相信很多做游戏开发的朋友都会用到虚拟摇杆来控制角色的移动。今天就带大家怎么制作这个虚拟摇杆。废话少说，直接开始。
1. 新建一个空的2D项目
2. 打开项目设置，宽度和高度设置为720px ,1280px。
3.新建一个单色精灵，并且命名为bg,作为背景。
4.调整背景的大小为720，1280
5. 背景颜色设置为#AAF5A3，当然也可以按照你自己的喜欢设置。
6. 添加一个空节点，命名为joystick
7.在assets 下新建一个文件夹，用来存放图片资源。
8.将图片资源放入到img文件夹中
9.将img文件夹下的Joystick_bg图片资源拖动到Joystick_bg节点上。
10.同样将img文件夹下的Joystick图片资源拖动到Joystick节点下。
11. 同样将角色图片素材导入到img文件夹中。
12.将play拖动到Canvas下。
13.调整play节点的位置。方便调试
14.在assets下新建一个文件夹，用来存放脚本文件。
15.在script 文件夹下新建一个脚本文件，并且命名为joystick.js
16. 将脚本绑定到joystick节点上。
17.打开脚本文件joystick，定义Joystick_bg,Joystick
18.在start函数里获取节点。
this.Joystick_bg = this.node.getChildByName("Joystick_bg");
this.Joystick = this.node.getChildByName("Joystick");
19.在start函数里定义触摸事件。
this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
20.填写回调函数
21.分别完善这些回调函数
onTouchStart(event) {
let pos_touch = event.getUILocation(); // 触摸点坐标@UI世界坐标系
let uiTransform = this.node.getComponent(UITransform);
let pos_nodeSpace = uiTransform.convertToNodeSpaceAR(new Vec3(pos_touch.x, pos_touch.y, 0));
this.Joystick.setPosition(pos_nodeSpace);
}
onTouchMove(event) {
let pos_touch = event.getUILocation(); // 触摸点坐标@UI世界坐标系
let uiTransform = this.node.getComponent(UITransform);
let pos_nodeSpace = uiTransform.convertToNodeSpaceAR(new Vec3(pos_touch.x, pos_touch.y, 0));
this.Joystick.setPosition(pos_nodeSpace);
}
onTouchEnd(e: Touch) {
this.Joystick.setPosition(new Vec3(0, 0, 0));
}
onTouchCancel(e: Touch) {
this.Joystick.setPosition(new Vec3(0, 0, 0));
}
今天先到这里，下一次，我们再继续。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
