// 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.htmlconst {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;    //触摸IDpublic 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;}}
}