cocos creator 事件
cocos creator 事件
在作一個消除類遊戲時，須要對點擊的方塊作出響應。代碼很簡單，可背後的原理還多着呢。javascript
1. 普通節點註冊click事件
在cc中若是須要相應click事件，須要爲該節點添加一個Button組件。或使用相似效果的事件好比java
- 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事件的兩大機制node
- 事件冒泡，事件響應從子節點往上冒泡到頂層節點
- 事件捕獲，事件響應衝頂層節點依次傳遞到最末級節點
因此問題來了，消除類遊戲都是經過預製資源生成不一樣樣式的方塊。若在每一方塊上都註冊事件，勢必致使內存上漲（雖然如今內存很大了）。看看cc文檔，事件機制徹底是同樣的（最終都是JS），然而我想在個人Canvas上註冊一個click事件，問題出現了。git
3.問題來了
問題就是我在Canvas上註冊了click事件，點擊button時，Canvas 上竟然沒有收到個人click事件。由此我查看cc源碼，寫了一堆測試代碼，最終得出如下結github
- 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
<script text="javascript">
let cusEvent = new Event("custom", {
bubbles: true //容許冒泡
});
document.body.addEventListener("custom", e => {
console.log("自定義事件");
console.log(" Body event by custom");
});
let btn = document.querySelector("#btn");
btn.addEventListener("custom", e => {
console.log("自定義事件");
console.log("Button event by custom");
})
btn.dispatchEvent(cusEvent);
</script>
複製代碼
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