乐趣区

关于前端:babylonjs-第三方-nipplejs虚拟摇杆

jiezi

Game Start

  • –

<center> (不忍直视的名字和 logo_(:з」∠)_)</center>

应用

创立 manager

在引入 js 后，咱们依照官网的代码先创立 manager 实例。manager 的 dom 元素就是所有 nipple 对象能生成的区域块。

 let joyCon = document.querySelector("#joy-con");
      // eslint-disable-next-line no-debugger
      let options = {
        mode: "static",// 'dynamic', 'static' or 'semi'
        size: 150,
        position: {
          left: "50%",
          top: "50%" 
        },// 在容器内垂直居中显示
        zone: joyCon // 如果不提提供 zone 容器元素，那么默认动静生成的元素是注入在 body 中的。};
      let manager = nipplejs.create(options);

因为摇杆对象（nipple）默认是红色的所以须要给背景填充色彩，成果如图。

好大一个 …

???? 有三种模式：

1.dynamic(来到屏幕后就隐没)

2.semi(来到屏幕后还保留在原处，挪动到别处时切换以后的摇杆的地位)

3.static 固定不动

自定义款式

image

通过审查元素可发现动静生成的 nipple 元素中有两个 div，front 是两头的圆点，back 是圆点的容器。

.front {
    background-color: #fff;
    user-select: none;// 加这个属性是因为元素总是会被选中，会比拟影响应用体验
  }

  .back {background-image: url("../assets/j.png");
    background-size: cover;
    user-select: none;
  }

如下图所示

image

在文档中介绍了两个实例对象，manager 写得很分明，然而 nipple 这个实例是真的找了半天都没有找到是怎么生成的 …
而后翻到 Events 这边发现原来这个对象是通过参数传过来的 -。-，查看了一下源码，在生成 manager 对象后会创立 collect 对象，collect 在被创立时会依据以后 mode 解决不同的状况，当 mode 为 static 时须要默认生一个 nipple 对象。

image

监听事件 

// 滑动摇杆的事件
   manager.on("move", function (evt, data) {if (data.direction) {......});
      
// 进行滑动摇杆的事件 
      manager.on("end", function (evt, data) {......});

我这里只须要两个事件就 OK

兼容性

目前 nipplejs: 0.8.3 版本在 ios13 上有 bug 导致其无奈滑动 …

https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

起因是新公布的 safari 13 减少了新的 API

image

可对源码进行批改，找到依赖下的 utils.js

export const isPressed = (evt) => {if (evt.type === 'pointerdown' || evt.type === 'pointermove') {return true;} // 补充该代码
    if (isNaN(evt.buttons)) {return evt.pressure !== 0;}
    return evt.buttons !== 0;
};

或者回退到 0.8.1 版本也能够解决问题 …

参考资料

(˘▽˘) っ链接
js 参数解释

退出移动版