文章目錄

• • 1、引言
  • 2、準備
  • 3、原理分析
  • 4、場景搭建
  • 5、代碼
  • 6、效果展示
  • 7、Demo示例下載
  • 8、結(jié)束語

---

1、引言

??近日準備做一個休閑游戲，需要用到虛擬搖桿！于是摸索一番，便有一得，這里分享出來，有不足之處還望大家來指正！

2、準備

• Cocos Creator v2.1.4
• VsCode

3、原理分析

??作為搖桿，需要有一個節(jié)點進行觸摸，還需要約束搖桿能夠移動的范圍，我們可以通過相似三角形等比例限定(x,y)。如下圖
??通常我們操作搖桿之后我們需要把搖桿放置在搖桿背景的中心。我們在觸摸結(jié)束的時候重新歸置搖桿的位置。

4、場景搭建

??我們只需要兩個素材，一個是搖桿背景，一個是搖桿。如下圖所示：


我們只需搭好搖桿，放置一個玩家就可以了，如下圖所示：

5、代碼

cc.Class({extends: cc.Component,properties: {/** 搖桿移動中心 */midNode: {default: null,type: cc.Node,displayName: '移動中心節(jié)點'},/** 搖桿背景做監(jiān)聽，體驗好些 */joyBk: {default: null,type: cc.Node,displayName: '搖桿背景節(jié)點'},/** 搖桿最大移動半徑 */maxR: {default: 100,displayName: '搖桿活動半徑'},/** 搖桿移動回調(diào) */joyCallBack: {default: [],type: cc.Component.EventHandler,displayName: '搖桿移動回調(diào)',tooltip: '觸發(fā)touchmove后分發(fā)數(shù)據(jù)'}},onLoad () {// 歸位this.goBackMid();},start () {this.joyBk.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);this.joyBk.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);this.joyBk.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);this.joyBk.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);},/** 回歸中心 */goBackMid () {this.joyBk.setPosition(0, 0);this.midNode.setPosition(0, 0);},onTouchStart (e) {let pos = this.node.convertToNodeSpaceAR(e.getLocation());this.clampPos(pos);this.midNode.setPosition(pos.x, pos.y);let angle = this.covertToAngle(pos);console.log(this.joyCallBack);// 觸發(fā)回調(diào)this.joyCallBack[0].emit([pos, angle]);},onTouchMove (e) {let pos = this.node.convertToNodeSpaceAR(e.getLocation());this.clampPos(pos);this.midNode.setPosition(pos.x, pos.y);let angle = this.covertToAngle(pos);// 觸發(fā)回調(diào)this.joyCallBack[0].emit([pos, angle]);},onTouchEnd (e) {this.goBackMid();this.joyCallBack[0].emit([cc.v2(0, 0),null]);},/** 根據(jù)半徑限制位置 */clampPos (pos) {let len = pos.mag();if (len > this.maxR-0.5) {let k = this.maxR / len;pos.x *= k;pos.y *= k;}},/** 根據(jù)位置轉(zhuǎn)化角度 */covertToAngle (pos) {let r = Math.atan2(pos.y, pos.x);let d = cc.misc.radiansToDegrees(r);return d;}, });

??由于代碼中已經(jīng)給出了詳盡的注釋，這里也就不再啰里啰嗦了。啟動該工程，只要我們拖動搖桿就可以看到如下效果！

6、效果展示

??下面是代碼實現(xiàn)的效果：

7、Demo示例下載

??為了方便大家，當然如果有不明白的童鞋也可以在這里點此下載Demo示例！

8、結(jié)束語

---

The End
??好了，今天的分享就到這里，如有不足之處，還望大家及時指正，隨時歡迎探討交流！！！

---

喜歡的朋友們，請收藏、點贊、評論！您的肯定是我寫作的不竭動力！

總結(jié)

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

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