本次引擎2.0.5

編輯工具VSCode

如遇不會某個步驟可以先過一遍之前教程，或者下方評論，感謝支援！

目標：讓不聽話小方塊聽話

今天教大家CocosCreator的觸控監聽函式；

（遊戲內座標是中心為原點，對於觸控是左下角為原點，需轉換）

好了，我們新建一個專案：

然後建個白色背景（Sprite（單色））起名bk，

再建一個紅色主角；

我們的主角是怎麼不聽話的呢？

你點它它就亂跑！

我們給它綁個指令碼先：

新建個zhujuejs，哦，記得儲存一下場景。

然後我們把指令碼繫結在主角上：

開啟指令碼，讓指令碼可愛起來。

我們解開onLoad的封印（哈哈），指令碼的執行順序是：onLoad（），然後start（），然後update（dt）

隨後update（dt）在遊戲的每一幀都呼叫。

（我們宣告一些東西都在onLoad，然後在start中處理。）

好，我們寫下一個觸控監聽函式：

在onLoad（）函式中寫下了觸控監聽函式，監聽的是‘touchstart’，也就是點選開始

（觸控事件有4個：開始時（1次），移動時（n次），在節點中擡起手（1次），在節點外擡起手（1次））

對應的是：

懂了吧，我們來讓小方塊不聽話：

cc.Class({
    extends: cc.Component,

    properties: {
    },
    onLoad () {
        this.node.on('touchstart',function(){
            //x應該是在-430到430之間運動
            this.node.x = -430 + 860*Math.random();
            //y應該是在-270到270之間運動
            this.node.y = -270 + 540*Math.random();
        },this);
    },

    start () {

    },

    // update (dt) {},
});
 

滑鼠點下去，它就跑啦~~不聽話吧，滑稽！

但是它是瞬間過去的，我們結合動作系統讓它飄逸起來。

第一步先加動作：

怎麼樣，當你點的時候，你會發現，它咻的一下飛出去了。

怎麼樣？但是不聽話的小方塊不是好方塊。

我們讓它聽話：

我們改一下監聽的動作，監聽touchmove。

有的小夥伴問了：我們手指在螢幕上移動時，怎麼得到觸控點呢？

這麼得到，在function（這裡加個event來接受）；

但是我們執行的時候會發現節點不在觸控點，這是因為我之前說的，Cocos有兩個座標系，一個觸控的，一個遊戲內的。

我們轉換一下：

成功是成功了，可是他為什麼會抖動加閃爍呢？

哈哈，因為這個：

因為以本節點（主角）為參考，，但主角在動啊！！！！！

那怎麼辦，找個不動的唄！（主角的父節點是Canvas，不動）

（別告訴我你不會看子節點和父節點，好吧，我簡單講一下，在層級管理器中，預設Canvas是老大，點開它的下拉小三角，那都是它的父節點。同理）

好了，我們以主角的父節點為基準：

cc.Class({
    extends: cc.Component,

    properties: {
    },
    onLoad () {
        this.node.on('touchmove',function(event){
            var touch_xy = event.getLocation();//獲取當前觸點位置
            //以本節點父節點為參考，轉換觸控座標至遊戲座標
            var game_xy = this.node.parent.convertToNodeSpaceAR(touch_xy);
            this.node.x = game_xy.x;
            this.node.y = game_xy.y;
        },this);
    },

    start () {

    },

    // update (dt) {},
});

好了，我們的小方塊可以聽話的跟著觸控點走了呢！

那麼下一個問題，怎麼回去呢？？？

簡單，加個變數儲存就行了。

（給出程式碼）

cc.Class({
    extends: cc.Component,

    properties: {
        //用於儲存座標
        old_xy:null,
    },
    onLoad () {
        //點選後把座標存好
        this.node.on('touchstart',function(){
            //this.node.position的用處跟分別給x,y賦值是一樣的
            this.old_xy = this.node.position;
        },this);
        //移動
        this.node.on('touchmove',function(event){
            var touch_xy = event.getLocation();//獲取當前觸點位置
            //以本節點父節點為參考，轉換觸控座標至遊戲座標
            var game_xy = this.node.parent.convertToNodeSpaceAR(touch_xy);
            this.node.x = game_xy.x;
            this.node.y = game_xy.y;
        },this);
        //觸控結束時
        this.node.on('touchend',function(){
            //把節點的位置重新給回來
            this.node.position = this.old_xy;
        },this);
    },

    start () {

    },

    // update (dt) {},
});

怎麼樣，學會了嗎？

O(∩_∩)O~~