html5虚拟摇杆,关于前端:babylonjs-第三方-nipplejs虚拟摇杆
Game Start
–
应用
创立 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参数解释