Cocos Creator 虚拟摇杆
版本：2.3.4
参考：
【持续更新】Cocos Creator源码分享——针对游戏中的各种功能
在cocos论坛找了一篇虚拟摇杆的制作文章。但是实际使用还要考虑多一些。这里在原来代码基础上做了一些改动。
1. 监听事件不使用字符串。例如"touchstart"，使用cc.Node.EventType.TOUCH_START。因为使用字符串容易拼错。
2. 增加触摸响应区域。因为常规游戏中，虚拟摇杆可响应范围不仅仅是虚拟摇杆图片范围，而是一个可根据策划需求调整的范围，例如今天500x400，明天觉得600x400，只需要修改代码，不需要重新制作图片了。
3. 防止多点触摸。增加了touchID的判断，防止多个手指触摸导致的问题。例如一个手指在操作摇杆，另一个手指不小心在触摸区域点击了一下，导致触发了touch_end，使摇杆失效。
4. 增加了小圆移动范围设置。原来文章用大圆图片的高宽限制小圆的移动范围。但是大圆图片可能有透明区域，所以这里小圆的移动范围在代码里手动设置。
5.增加了摇杆是否正在移动的标志位。因为摇杆没有在使用的时候，不需要去执行角色的移动计算。所以增加了moving来表示摇杆是否在运作中，减少摇杆空闲时对角色移动的计算量。
6.增加了角度(弧度)计算。因为可能根据摇杆的角度，进行一些操作。例如人物如果是八方向或四方向，需要根据角度转向。如果不需要，可以自行屏蔽角度的代码。
7.增加了enable开关。在虚拟摇杆没有操作的时候，不需要执行update，较少计算量。
UI如下图，为了方便area用绿色显示，实际使用去掉就行了。
虚拟摇杆代码
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class JoyStick extends cc.Component {
@property(cc.Node)
panel:cc.Node = null; //大圆
@property(cc.Node)
btn:cc.Node = null; //小圆
@property(cc.Integer)
private panelWidth:number = 130; //去掉透明区域的大圆宽度
private panelInitPos:cc.Vec2; //大圆初始位置
private touchID:number; //触摸ID
public dir:cc.Vec3 = new cc.Vec3(0,0,0); //移动方向
public angle:number = 0; //弧度(角度)
public moving:boolean = false; //是否正在移动
onLoad(){
this.panelInitPos = new cc.Vec2(this.panel.x, this.panel.y);
}
start () {
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
}
public stop(){
this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.off(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
this.node.off(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
this.moving = false;
this.enabled = false;
}
private onTouchStart(e:cc.Touch){
console.log("start");
//触摸点世界坐标转成局部坐标
let pos = this.node.convertToNodeSpaceAR(e.getLocation());
this.panel.setPosition(pos);
this.btn.setPosition(0,0);
this.touchID = e.getID();
this.moving = false;
this.enabled = true;
}
private onTouchMove(e:cc.Touch){
console.log("move");
if(this.touchID != e.getID()){
return;
}
//小圆移动
let posDelta = e.getDelta();
this.btn.x += posDelta.x;
this.btn.y += posDelta.y;
//正在移动
this.moving = true;
}
update(){
console.log("update");
if(this.moving){
//将小圆限制大圆范围内
let ratio = this.btn.position.mag() / this.panelWidth;
if (ratio > 1) {
this.btn.setPosition(this.btn.position.div(ratio));
}
//获取向量归一化
this.dir = this.btn.position.normalizeSelf();
//获取弧度
this.angle = Math.atan2(this.btn.y, this.btn.x);
}
}
private onTouchEnd(e:cc.Touch){
console.log("end");
if(this.touchID != e.getID()){
return;
}
this.panel.setPosition(this.panelInitPos);
this.btn.setPosition(0,0);
this.moving = false;
this.enabled = false;
}
private onTouchCancel(e:cc.Touch){
console.log("cancel");
if(this.touchID != e.getID()){
return;
}
this.panel.setPosition(this.panelInitPos);
this.btn.setPosition(0,0);
this.moving = false;
this.enabled = false;
}
onDestroy(){
this.stop();
}
}
实际操作
@ccclass
export default class Helloworld extends cc.Component {
//虚拟摇杆Area
@property(cc.Node)
joyStickArea:cc.Node = null;
//虚拟摇杆代码
joyStick:JoyStick;
//角色
@property(cc.Node)
role:cc.Node = null;
//速度
speed:cc.Vec2 = new cc.Vec2(5,5);
onLoad(){
this.joyStick = this.joyStickArea.getComponent(JoyStick);
}
start() {
}
update(){
if(this.joyStick.moving){
//根据角度移动
// this.role.x += Math.cos(this.joyStick.angle)*this.speed.x;
// this.role.y += Math.sin(this.joyStick.angle)*this.speed.y;
//根据向量移动
this.role.x += this.joyStick.dir.x*this.speed.x;
this.role.y += this.joyStick.dir.y*this.speed.y;
}
}
}
演示效果