之前第一节的时候，我们让鱼钩简单的动了起来，并且让摄像头跟随鱼钩向下移动，可是我们并不能控制鱼钩的左右位置，这让我们的根本无法享受操作的乐趣。
所以这一节，我们来实现让玩家通过触摸输入控制鱼钩的运动。
首先我们先对第一节做好的鱼钩进行一下改造
Hook为一个Widget节点，挂载脚本为第一节我们制作的Hook，size修改为640*960；
Controller为我们的鱼钩节点Sprite类型，挂载一个新的脚本Controller.js；
Camera同第一节不变。
OK，接下来打开Controller.js脚本，我们来编写代码。
关于触摸输入，可以参考官方范例：
Properties中添加属性mCanvas，引用Canvas节点，因为我们需要使用Canvas节点来接受触摸事件。
-
mCanvas : {
-
-
default : null,
-
-
type : cc.Node
-
-
}
为什么不用鱼钩来直接接受触摸事件？理论上也是可以的，不过鱼钩这些小，放在手机中，那就需要让玩家精确的触摸到鱼钩才能进行操作，这个操作体验实在是太差了。在编码过程中，很多时候你得试着去站在GameDesigner的角度去考虑问题，否则就真的是一个码农了。
接下来是开启注册监听触摸事件，并定义触摸事件触发后的回掉函数：
EnableTouch () {
if (this.mEnableTouch)
return;
this.mCanvas.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.mCanvas.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.mCanvas.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
this.mCanvas.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
this.mEnableTouch = true;
console.log("EnableTouch");
},
关闭方法：
DisableTouch () {
if (!this.mEnableTouch)
return;
this.mCanvas.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.mCanvas.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.mCanvas.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
this.mCanvas.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
this.mEnableTouch = false;
console.log("DisableTouch");
},
同时实现onTouchStart,onTouchMove,onTouchEnd方法：
我们在触摸移动事件中可以打印触摸点进行测试，别忘了调试时，在start方法中调用刚刚我们写的EnableTouch方法开启触摸。onTouchStart (event) {
},
onTouchMove (event) {
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();
console.log("touchLoc :" , touchLoc);
},
onTouchEnd (event) {
},
start () {
this.EnableTouch();
},
可以看到输出：
好的，代码没问题，最麻烦的输入事件已经搞定，剩下的就是完善一下鱼钩移动的业务逻辑了。
参考官方范例，我们可以很容易的把业务逻辑进行完善：
OK，敲完代码运行一下，把速度值调整到你觉得合适的一个值，我们的触摸操作也就完成了！properties: {
mSpeed : 350,
mMoveToPos : {
default : cc.v2(0,0),
visible : false
},
mIsMoving : {
default : false,
visible : false
},
mEnableTouch : {
default : false,
visible : false
},
mCanvas : {
default : null,
type : cc.Node
}
},
onTouchStart (event) {
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();//获得当前触摸点的坐标
this.mIsMoving = true;//进入移动状态
this.mMoveToPos = this.node.parent.convertToNodeSpaceAR(touchLoc);//将绝对坐标转换为父节点的相对坐标
},
onTouchMove (event) {
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();//获得当前触摸点的坐标
this.mMoveToPos = this.node.parent.convertToNodeSpaceAR(touchLoc);
},
onTouchEnd (event) {
this.mIsMoving = false;//退出移动状态
},
update (dt) {
if (!this.mIsMoving)
return;
var oldPos = this.node.position;
var direction = this.mMoveToPos.sub(oldPos).normalize();//获得移动方向
direction.y = 0;//锁定Y轴的移动
var newPos = oldPos.add(direction.mul(this.mSpeed * dt));//根据移动速度计算鱼钩新的坐标
this.node.setPosition(newPos);
},
