CocosCreator微信小遊戲入門實戰《小貓釣魚》（四）：觸控輸入
阿新 • • 發佈：2019-01-23
之前第一節的時候，我們讓魚鉤簡單的動了起來，並且讓攝像頭跟隨魚鉤向下移動，可是我們並不能控制魚鉤的左右位置，這讓我們的根本無法享受操作的樂趣。
所以這一節，我們來實現讓玩家通過觸控輸入控制魚鉤的運動。
首先我們先對第一節做好的魚鉤進行一下改造
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方法：
onTouchStart (event) {
},
onTouchMove (event) {
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();
console.log("touchLoc :" , touchLoc);
},
onTouchEnd (event) {
},我們在觸控移動事件中可以列印觸控點進行測試，別忘了除錯時，在start方法中呼叫剛剛我們寫的EnableTouch方法開啟觸控。
start () {
this.EnableTouch();
},可以看到輸出：
好的，程式碼沒問題，最麻煩的輸入事件已經搞定，剩下的就是完善一下魚鉤移動的業務邏輯了。
參考官方範例，我們可以很容易的把業務邏輯進行完善：
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);
},OK，敲完程式碼執行一下，把速度值調整到你覺得合適的一個值，我們的觸控操作也就完成了！