cocos creator 事件

since1986 發布于2019-08-26 11:00 / 1585人閱讀

摘要：事件在做一個消除類游戲時，需要對點擊的方塊做出響應。普通節點注冊事件在中如果需要相應事件，需要為該節點添加一個組件。，事件冒泡利用自定義事件的屬性，實現冒泡。

cocos creator 事件

在做一個消除類游戲時，需要對點擊的方塊做出響應。代碼很簡單，可背后的原理還多著呢。

1. 普通節點注冊click事件

在cc中如果需要相應click事件，需要為該節點添加一個Button組件?；蚴褂妙愃菩Ч氖录热?/p>

cc.Node.EventType.MOUSE_DOWN

cc.Node.EventType.TOUCH_END

//author herbert qq:464884492
//注冊按鈕click事件
btn.node.on("click", event=>{cc.log("button click")});
//注冊MOUSE_DOWN 
btn.node.on(cc.Node.EventType.MOUSE_DOWN,event=>{cc.log("button MOUSE_DOWN")});
//注冊TOUCH_END
btn.node.on(cc.Node.EventType.TOUCH_END,event=>{cc.log("button TOUCH_END")})

2. 應該減少事件注冊量

是否沒有問題了？在寫juqery時，有事件委托（delegate）的概念。啥意思呢，就是在節點的父級注冊事件，來響應子節點的事件源。為啥可以實現，主要歸功于js事件的兩大機制

事件冒泡，事件響應從子節點往上冒泡到頂層節點

事件捕獲，事件響應沖頂層節點依次傳遞到最末級節點

所以問題來了，消除類游戲都是通過預制資源生成不同樣式的方塊。若在每一方塊上都注冊事件，勢必導致內存上漲（雖然現在內存很大了）?？纯碿c文檔，事件機制完全是一樣的（最終都是JS），然而我想在我的Canvas上注冊一個click事件，問題出現了。

3.問題來了

問題就是我在Canvas上注冊了click事件，點擊button時，Canvas 上居然沒有收到我的click事件。由此我查看cc源碼，寫了一堆測試代碼，最終得出以下結

click事件確實Button組件特殊存

click事件不會向上或向下傳遞

node.emit觸發事件不會向上或向下傳遞

node.dispatchEvent支持事件向上或向下傳遞

使用node.dispatchEvent參數必須是 cc.Event.EventCustom對象

4.click事件特殊在哪里

cc.Button 組件中的click事件，其實是cc的自定義事件，源碼為證

//author:herbert wx:464884492
...
 this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
...
_onTouchEnded (event) {
 if (!this.interactable || !this.enabledInHierarchy) return;
 if (this._pressed) {
 cc.Component.EventHandler.emitEvents(this.clickEvents, event);
 this.node.emit("click", this);//觸發事件
 }
 this._pressed = false;
 this._updateState();
 event.stopPropagation(); //停止冒泡
},
...

所以，之所Button能響應click事件，是因為組件注冊了TOUCH_END事件，并在響應該事件函數中發射一個click事件。

5. javascript 自定義事件

參考mdn文檔，js自定事件方式如下

// author:herbert wx:464884492

6.了解下cc.node.emit

cc.node.emit 最終調用的是CallbacksInvoker.prototype.invoke 方法，從源碼來看，是從對應的緩存對象中找到注冊的回調方法，依次調用回調函數。

//author herbert wx:464884492
CallbacksInvoker.prototype.invoke = function (key, p1, p2, p3, p4, p5) {
var list = this._callbackTable[key];
if (list) {
var rootInvoker = !list.isInvoking;
list.isInvoking = true;
var callbacks = list.callbacks;
var targets = list.targets;
for (var i = 0, len = callbacks.length; i < len; ++i) {
    var callbmhtack = callbacks[i];
    if (callback) {
        var target = targets[i];
        if (target) {
            callback.call(target, p1, p2, p3, p4, p5);
        }
        else {
            callback(p1, p2, p3, p4, p5);
        }
    }
}
if (rootInvoker) {
    list.isInvoking = false;
    if (list.containCanceled) {
        list.purgeCanceled();
    }
}}};

所以click自然不會往上或往下傳遞。

7.dispatchEvent，事件冒泡

dispatchEvent 利用自定義事件的 bubbles 屬性，實現冒泡。至于為啥使用 btn.node.dispatchEvent(new cc.Event.EventMouse(cc.Node.EventType.MOUSE_DOWN, true))沒有觸發事件是因為cc在底層，將事件類型統一改成了 cc.Event.MOUSE，源碼為證

author:herbert wx:464884492
 ...
 var EventMouse = function (eventType, bubbles) {
 cc.Event.call(this, cc.Event.MOUSE, bubbles);
 ...
};

場景

運行效果

8.總結

做開發，不管是開發游戲還是其他應用程序。思路基本是一樣的。再簡單的事，多想想，再發散一下，你會收獲更多。
需要進cocos游戲開發群的朋友，請添加我微信回復cocos

歡迎感興趣的朋友關注我的訂閱號“小院不小”，或點擊下方二維碼關注。我將多年開發中遇到的難點，以及一些有意思的功能，體會都會一一發布到我的訂閱號中。如需本文demo請在訂閱號中回復ccevent

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106976.html

cocos creator游戲開發

摘要：自從調整游戲難度后我的最高分重來就沒有超過生命最高分來點實際的做技術嘛，大多都是做點總結吧開源地址在基本中定義的屬性，切記在編輯器中拖動綁定多看官網，多開實例代碼發布微信小游戲一定不要有英文，會導致審核不通過 1.初來乍到打開 Cocos Creator 點擊新建空白項目，在默認布局的左下區域，一個黃黃assets文件夾映入眼簾。作為前端的你對這個文件是不是再熟悉不過了。是的，和你想...

SoapEye 2019-08-26 10:36 評論0 收藏0
小游戲開發上手體驗 - Cocos Creator

摘要：但開發的游戲是無法通過網頁發給別人在線玩的，更不能做成微信小游戲。它使用作為開發語言，開發出的游戲可以直接生成微信小游戲網頁安卓等平臺上的版本。微信群里最大的騷擾源有兩種：一是轉發#吱口令#~！@#￥%……&*，長按復制此消息領紅包之類的另一種就是各種小程序和小游戲的分享前天有同學無意間把一個小游戲分享到了答疑群中，我看了一下，其實游戲的代碼邏輯并不復雜（簡化版的跳一跳，套上個...

zhiwei 2019-07-31 11:18 評論0 收藏0
cocos creator 簡單實戰

摘要：錨點位置確定后，所有子節點就會以父節點錨點所在位置作為坐標系原點。觀察實際效果以下為實際效果，左側打開欄目為不同手機分辨率模式。巨坑因為分辨率發生變化，導致節點大小位置都會發生變化。項目地址：https://github.com/Iroha1024/... 一個小游戲的demo，以下簡單地介紹了我關于cocos creator的一點理解和開發流程版本：cocos creator v...

taowen 2019-08-26 10:31 評論0 收藏0
Cocos Creator—如何給資源打MD5版本號

摘要：從年底開發組就說要支持，等了大半年，新的內測版本終于增加了的功能，但效果也是差強人意。實際上我不會把這幾個和打版本號的。最后產出會把這幾個文件合并到中。 Cocos Creator 是Cocos最新一代的游戲開發者工具，基于 Cocos2d-x，組件化，腳本化，數據驅動，跨平臺發布。Cocos Creator的開發思路已經逐步跟Unity 3D靠攏，寫起來也更方便快捷，開發效率更高。 ...

lk20150415 2019-08-20 18:23 評論0 收藏0
Cocos Creator—最佳構建部署實踐

摘要：本篇我們會基于的官方示例做分析，我在原的基礎上增加了部署的腳本，部署到又拍云和騰訊云。文件資源增加版本號版本號的方案跟之前的文章基本一致，這個流程在版本應該可以忽略了。這篇文章主要是我們團隊在使用Cocos Creator過程中的一些關于部署方面的實踐總結，標題黨了一回，嚴格來說，應該是《快看漫畫游戲研發團隊使用Cocos Creator構建部署最佳實踐》，對于其他團隊可能并不是。 ...

caohaoyu 2019-08-22 13:41 評論0 收藏0