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