搖桿是所有手遊中不可或缺的一部分，是最基本的操作方式，下面是用cococ creator實現的一個簡單的搖桿，後面將基於此慢慢優化。

一 場景

新建一個場景，拖入三中圖片，如圖：

分別表示：

• spPlayer 代表遊戲中的角色，通過搖桿控制其移動；
• spRoker 搖桿的事件影響區域；
• spRokerCenter 搖桿的中心點。

二 事件監聽

為了能控制搖桿，需要監聽搖桿的事件，新建一個指令碼CompRoker，掛到Canvas上，然後編輯器其內容如下：

cc.Class({
    extends: cc.Component,

    properties: {
        spPlayer: cc.Sprite,
        spRoker: cc.Sprite,
        spRokerCenter: cc.Sprite
    },

    onLoad: function
 
 () {
        this.spRoker.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_CANCEL, this
 
.onTouchCancel, this);
    },

    onTouchStart: function(event) {
        console.log("start ...");
    },

    onTouchMove: function(event) {
        console.log("move ...");
    },

    onTouchEnd: function(event) {
        console.log("end ...");
    },

    onTouchCancel: function(event) {
        console.log("cancel ..."
 
);
    },
});

定義了三個變數，分別表示前面說到的三個控制元件，從cocos中，將其關聯到相應的變數，然後執行，可以看到輸出，說明事件監聽正確。

三 方向控制

首先，我們做一個最簡單的額四方向搖桿，控制角色上下左右移動。

如圖，當我們觸控點在spRoker的不同區域，分別表示角色向不同的方向移動。

那麼，如何來判斷觸控點落在那個區域呢，以spRoker的原點為座標原點的直角座標系中，對角線的方程即為：
x = y和x = -y，每個區域分別為：

• 上：x < y 且 x > -y
• 下：x > y 且 x < -y
• 左：x < y 且 x < -y
• 右：x > y 且 x > -y

基於這個原理，新增一個函式getDirection根據傳入點來獲取方向，如下：

    onTouchStart: function(event) {
        var touchPoint = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPoint);
        var dir = this.getDirection(pos);
        console.log("start ...", dir);
    },

    onTouchMove: function(event) {
        var touchPoint = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPoint);
        var dir = this.getDirection(pos);
        console.log("move ...", dir);
    },

    getDirection: function(pos) {
        var x = pos.x;
        var y = pos.y;
        if (x <= y && x > -y) {
            return cc.v2(0, 1);// 上
        } else if (x >= y && x < -y) {
            return cc.v2(0, -1);// 下
        } else if (x <= y && x < -y) {
            return cc.v2(-1, 0);// 左
        } else {
            return cc.v2(1, 0);// 右
        }
    },

執行，點選搖桿的不同位置，驗證獲得的方向是否準確。

此外，我們需要需要不斷的更新搖桿中心點的位置。

    onTouchStart: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        var dir = this.getDirection(pos);
        console.log("start ...", dir);
        this.updateRokerCenterPos(pos);
    },

    onTouchMove: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        var dir = this.getDirection(pos);
        console.log("move ...", dir);
        this.updateRokerCenterPos(pos);
    },

    onTouchEnd: function(event) {
        console.log("end ...");
        this.updateRokerCenterPos(cc.v2(0, 0));
    },

    onTouchCancel: function(event) {
         console.log("cancel ...");
        this.updateRokerCenterPos(cc.v2(0, 0));
    },

    updateRokerCenterPos: function(pos) {
        this.spRokerCenter.node.setPosition(pos);
    }

四 控制角色移動

通過上面的几几個步驟，已經得到移動的方向，據此，可以來更新角色的位置，另外為了控制角色移動快慢，在設定一個速度。
最終程式碼如下：

cc.Class({
    extends: cc.Component,

    properties: {
        spPlayer: cc.Sprite,
        spRoker: cc.Sprite,
        spRokerCenter: cc.Sprite,
        moveSpeed: {
            type: cc.Float,
            default: 1
        }
    },

    onLoad: function () {
        this.spRoker.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    },

    onTouchStart: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        var dir = this.getDirection(pos);
        this.moveDir = this.getDirection(pos);
        this.updateRokerCenterPos(pos);
    },

    onTouchMove: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        this.moveDir = this.getDirection(pos);
        this.updateRokerCenterPos(pos);
    },

    onTouchEnd: function(event) {
        this.updateRokerCenterPos(cc.v2(0, 0));
        this.moveDir = null;
    },

    onTouchCancel: function(event) {
        this.updateRokerCenterPos(cc.v2(0, 0));
        this.moveDir = null;
    },

    getDirection: function(pos) {
        var x = pos.x;
        var y = pos.y;
        if (x <= y && x > -y) {
            return cc.v2(0, 1);// 上
        } else if (x >= y && x < -y) {
            return cc.v2(0, -1);// 下
        } else if (x <= y && x < -y) {
            return cc.v2(-1, 0);// 左
        } else {
            return cc.v2(1, 0);// 右
        }
    },

    updateRokerCenterPos: function(pos) {
        this.spRokerCenter.node.setPosition(pos);
    },

    updatePlayerPos: function(dir) {
        this.spPlayer.node.x += dir.x * this.moveSpeed;
        this.spPlayer.node.y += dir.y * this.moveSpeed;
    },

    update: function(dt) {
        if (this.moveDir) {
            this.updatePlayerPos(this.moveDir);
        }
    },
});

到這裡，就可以看到角色在搖桿的控制下動起來了，當然還有很多細節需要優化的地方，後面再加上。