# Zjbcool-virtual-joystick插件教程

本教程介绍使用virtual-joystick插件实现一个自定义的虚拟摇杆,并控制小汽车的运动,效果如下:

img

# 创建虚拟摇杆

# 加载脚本

使用load script拼图或直接在.html文件中使用<script>标签从CDN加载nipplejs.min.js

mark

或:

<script src='https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js'><script>
1

# 创建摇杆

使用create joystick拼图的默认选项可以快速创建出一个虚拟摇杆实例。

mark

# 自定义虚拟摇杆

# 额外选项

通过给extra option参数传递一个字典类型的数据,可以定制虚拟摇杆的外观和交互方式。

首先,使用Dictionaries分类下的create empty dict拼图创建一个空字典,并保存到变量option

然后,使用插件中set joystick prop拼图为虚拟摇杆设置额外选项。这里我们设置拼图中的restOpacity参数为1,设置restOpacityfalse。修改后可以让虚拟摇杆在释放时,不改变透明度,并且保持在当前位置。

最后将变量option传递给create joystick拼图的extra option参数,如图:

mark

# 为摇杆设置背景图片

在手游里面,虚拟摇杆往往被设计得很漂亮,下面继续定制我们的虚拟摇杆,通过添加背景图片,让它看起来更精致。

使用插件中的set joystick background拼图可以修改虚拟摇杆的背景,摇杆分为前后两部分,分别通过参数frontback控制,它们的值支持CSS的输入方式。

mark

两张PNG格式的背景图:

mark

mark

默认虚拟摇杆的不透明度是0.5,使用插件中的set joystick opacity拼图将不透明度设置为1。因为添加了背景图片,透明度可以通过图片控制。

通过设置额外参数和背景图片,我们得到了想要的外观和交互。如图:

mark

# 控制运动

下面我们的目标是,通过旋转摇杆控制小汽车的方向;同时,只要摇杆有位移,小汽车就会以一定的速度运动。

# 控制旋转

插件中的joystick event拼图和get data拼图可以获取虚拟摇杆在交互时候的数据,这些数据只有在joystick event拼图的on move插槽下才能获取,你可以通过打印到控制台查看数据的结构和内容,根据需要获取。

这里,我们通过如下拼图获取摇杆的旋转角度,并且用它控制小汽车的旋转,如图:

mark

在上图的set transform拼图中,需要控制小汽车的垂直方向的轴,由于Verge3D版本分为Blender/3dsMax/Maya三个版本,坐标系不一致,要根据所用的版本控制Z轴或Y轴。

# 控制移动

joystick event拼图中有3个插槽,代表摇杆的3个状态:开始、移动、结束。我们可以通过创建一个carMoving变量,分别在3个插槽中设置它的值,来标记小汽车是否处于运动状态。当虚拟摇杆正在移动时,carMovingtrue,小汽车处于运动状态;当虚拟摇杆被松开时,carMovingfalse,小汽车处于停止状态。

然后,在every frame拼图中,给小汽车一个速度,它就可以根据虚拟摇杆的位移运动了。

最后,为了避免小汽车跑远了回不来,我们给它设置一个约束,控制它的运动范围。

完整拼图如下:

mark

上次更新: 2021-5-22 22:49:58