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,敲完程式碼執行一下,把速度值調整到你覺得合適的一個值,我們的觸控操作也就完成了!