Cocos Creator 實現虛擬搖桿

---

1、引言

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

2、準備

• Cocos Creator v2.1.4
• VsCode

3、原理分析

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

4、場景搭建

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


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

5、代碼

cc.Class({
    extends: cc.Component,

    properties: {
        /** 搖桿移動中心 */
        midNode: {
            default: null,
            type: cc.Node,
            displayName: '移動中心節點'
        },
        /** 搖桿背景做監聽，體驗好些 */
        joyBk: {
            default: null,
            type: cc.Node,
            displayName: '搖桿背景節點'
        },
        /** 搖桿最大移動半徑 */
        maxR: {
            default: 100,
            displayName: '搖桿活動半徑'
        },
        /** 搖桿移動回調 */
        joyCallBack:  {
            default: [],
            type: cc.Component.EventHandler,
            displayName: '搖桿移動回調',
            tooltip: '觸發touchmove後分發數據'
        }
    },

    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);
        // 觸發回調
        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);
        // 觸發回調
        this.joyCallBack[0].emit([pos, angle]);
    },

    onTouchEnd (e) {

        this.goBackMid();
        
        this.joyCallBack[0].emit([cc.v2(0, 0),null]);
    },

    /** 根據半徑限制位置 */
    clampPos (pos) {
        let len = pos.mag();
        if (len > this.maxR-0.5) {
            let k = this.maxR / len;
            pos.x *= k;
            pos.y *= k;
        }
    },

    /** 根據位置轉化角度 */
    covertToAngle (pos) {
        let r = Math.atan2(pos.y, pos.x);
        let d = cc.misc.radiansToDegrees(r);
        return d;
    },
});

  由於代碼中已經給出了詳盡的註釋，這裏也就不再囉裏囉嗦了。啓動該工程，只要我們拖動搖桿就可以看到如下效果！

6、效果展示

  下面是代碼實現的效果：

7、Demo示例下載

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

8、結束語

---

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

---

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