html5虚拟摇杆,关于前端:babylonjs-第三方-nipplejs虚拟摇杆
Game Start
–
(不忍直視的名字和logo_(:з」∠)_)應用
創立 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參數解釋
總結
以上是生活随笔為你收集整理的html5虚拟摇杆,关于前端:babylonjs-第三方-nipplejs虚拟摇杆的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅谈Unity中的优化
- 下一篇： html里的表情,HTML 表情符号