摇杆是所有手游中不可或缺的一部分，是最基本的操作方式，下面是用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);

｝

｝,

｝);

到这里，就可以看到角色在摇杆的控制下动起来了，当然还有很多细节需要优化的地方，后面再加上。