Game Start

–

(不忍直視的名字和logo_(:з」∠)_)

應(yīng)用

創(chuàng)立 manager

在引入js后，咱們依照官網(wǎng)的代碼先創(chuàng)立manager實(shí)例。manager的dom元素就是所有nipple對(duì)象能生成的區(qū)域塊。

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%"

},//在容器內(nèi)垂直居中顯示

zone: joyCon //如果不提提供zone容器元素，那么默認(rèn)動(dòng)靜生成的元素是注入在body中的。

};

let manager = nipplejs.create(options);

因?yàn)閾u桿對(duì)象(nipple)默認(rèn)是紅色的所以須要給背景填充色彩，成果如圖。

好大一個(gè)…

????有三種模式：

1.dynamic(來到屏幕后就隱沒)

2.semi(來到屏幕后還保留在原處，挪動(dòng)到別處時(shí)切換以后的搖桿的地位)

3.static 固定不動(dòng)

自定義款式

image

通過審查元素可發(fā)現(xiàn)動(dòng)靜生成的nipple元素中有兩個(gè)div，front是兩頭的圓點(diǎn)，back是圓點(diǎn)的容器。

.front {

background-color: #fff;

user-select: none;//加這個(gè)屬性是因?yàn)樵乜偸菚?huì)被選中，會(huì)比擬影響應(yīng)用體驗(yàn)

}

.back {

background-image: url("../assets/j.png");

background-size: cover;

user-select: none;

}

如下圖所示

image

在文檔中介紹了兩個(gè)實(shí)例對(duì)象，manager寫得很分明，然而nipple這個(gè)實(shí)例是真的找了半天都沒有找到是怎么生成的…

而后翻到Events這邊發(fā)現(xiàn)原來這個(gè)對(duì)象是通過參數(shù)傳過來的 -。- ，查看了一下源碼，在生成manager對(duì)象后會(huì)創(chuàng)立collect對(duì)象，collect在被創(chuàng)立時(shí)會(huì)依據(jù)以后mode解決不同的狀況，當(dāng)mode為static時(shí)須要默認(rèn)生一個(gè)nipple對(duì)象。

image

監(jiān)聽事件

//滑動(dòng)搖桿的事件

manager.on("move", function (evt, data) {

if (data.direction) {

......

});

//進(jìn)行滑動(dòng)搖桿的事件

manager.on("end", function (evt, data) {

......

});

我這里只須要兩個(gè)事件就OK

兼容性

目前 nipplejs: 0.8.3版本在ios13上有bug導(dǎo)致其無奈滑動(dòng)…

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

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

image

可對(duì)源碼進(jìn)行批改，找到依賴下的utils.js

export const isPressed = (evt) => {

if (evt.type === 'pointerdown' || evt.type === 'pointermove') {

return true;

} //補(bǔ)充該代碼

if (isNaN(evt.buttons)) {

return evt.pressure !== 0;

}

return evt.buttons !== 0;

};

或者回退到0.8.1版本也能夠解決問題…

參考資料

( ?▽?)っ鏈接

js參數(shù)解釋

總結(jié)

以上是生活随笔為你收集整理的html5虚拟摇杆,关于前端:babylonjs-第三方-nipplejs虚拟摇杆的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。