版本：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.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;}} }

　　

演示效果

?

總結

以上是生活随笔為你收集整理的Cocos Creator 虚拟摇杆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。