手游摇杆(一)最简单的四方向摇杆

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

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