nipplejs虚拟摇杆

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版本也可以解决问题...

参考资料

( ˘▽˘)っ链接