1. 程式人生 > >CocosCreator微信小遊戲入門實戰《小貓釣魚》(四):觸控輸入

CocosCreator微信小遊戲入門實戰《小貓釣魚》(四):觸控輸入

之前第一節的時候,我們讓魚鉤簡單的動了起來,並且讓攝像頭跟隨魚鉤向下移動,可是我們並不能控制魚鉤的左右位置,這讓我們的根本無法享受操作的樂趣。

所以這一節,我們來實現讓玩家通過觸控輸入控制魚鉤的運動。

首先我們先對第一節做好的魚鉤進行一下改造

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