版本：2.3.4

參考：

【持續(xù)更新】Cocos Creator源碼分享——針對(duì)游戲中的各種功能

?

?

在cocos論壇找了一篇虛擬搖桿的制作文章。但是實(shí)際使用還要考慮多一些。這里在原來(lái)代碼基礎(chǔ)上做了一些改動(dòng)。

1.?監(jiān)聽事件不使用字符串。例如"touchstart"，使用cc.Node.EventType.TOUCH_START。因?yàn)槭褂米址菀灼村e(cuò)。

2.?增加觸摸響應(yīng)區(qū)域。因?yàn)槌Ｒ?guī)游戲中，虛擬搖桿可響應(yīng)范圍不僅僅是虛擬搖桿圖片范圍，而是一個(gè)可根據(jù)策劃需求調(diào)整的范圍，例如今天500x400，明天覺得600x400，只需要修改代碼，不需要重新制作圖片了。

3.?防止多點(diǎn)觸摸。增加了touchID的判斷，防止多個(gè)手指觸摸導(dǎo)致的問題。例如一個(gè)手指在操作搖桿，另一個(gè)手指不小心在觸摸區(qū)域點(diǎn)擊了一下，導(dǎo)致觸發(fā)了touch_end，使搖桿失效。

4.?增加了小圓移動(dòng)范圍設(shè)置。原來(lái)文章用大圓圖片的高寬限制小圓的移動(dòng)范圍。但是大圓圖片可能有透明區(qū)域，所以這里小圓的移動(dòng)范圍在代碼里手動(dòng)設(shè)置。

5.增加了搖桿是否正在移動(dòng)的標(biāo)志位。因?yàn)閾u桿沒有在使用的時(shí)候，不需要去執(zhí)行角色的移動(dòng)計(jì)算。所以增加了moving來(lái)表示搖桿是否在運(yùn)作中，減少搖桿空閑時(shí)對(duì)角色移動(dòng)的計(jì)算量。

6.增加了角度(弧度)計(jì)算。因?yàn)榭赡芨鶕?jù)搖桿的角度，進(jìn)行一些操作。例如人物如果是八方向或四方向，需要根據(jù)角度轉(zhuǎn)向。如果不需要，可以自行屏蔽角度的代碼。

7.增加了enable開關(guān)。在虛擬搖桿沒有操作的時(shí)候，不需要執(zhí)行update，較少計(jì)算量。

?

UI如下圖，為了方便area用綠色顯示，實(shí)際使用去掉就行了。

?

?

虛擬搖桿代碼

// 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; //去掉透明區(qū)域的大圓寬度private panelInitPos:cc.Vec2; //大圓初始位置private touchID:number; //觸摸IDpublic dir:cc.Vec3 = new cc.Vec3(0,0,0); //移動(dòng)方向public angle:number = 0; //弧度(角度)public moving:boolean = false; //是否正在移動(dòng)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");//觸摸點(diǎn)世界坐標(biāo)轉(zhuǎn)成局部坐標(biāo)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;}//小圓移動(dòng)let posDelta = e.getDelta();this.btn.x += posDelta.x;this.btn.y += posDelta.y;//正在移動(dòng)this.moving = true;}update(){console.log("update");if(this.moving){//將小圓限制大圓范圍內(nèi)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();}}

　　

實(shí)際操作

@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){//根據(jù)角度移動(dòng)// this.role.x += Math.cos(this.joyStick.angle)*this.speed.x;// this.role.y += Math.sin(this.joyStick.angle)*this.speed.y;//根據(jù)向量移動(dòng)this.role.x += this.joyStick.dir.x*this.speed.x;this.role.y += this.joyStick.dir.y*this.speed.y;}} }

　　

演示效果

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。