摘要:事件在做一個消除類游戲時,需要對點擊的方塊做出響應(yīng)。普通節(jié)點注冊事件在中如果需要相應(yīng)事件,需要為該節(jié)點添加一個組件。,事件冒泡利用自定義事件的屬性,實現(xiàn)冒泡。
cocos creator 事件
在做一個消除類游戲時,需要對點擊的方塊做出響應(yīng)。代碼很簡單,可背后的原理還多著呢。
1. 普通節(jié)點注冊click事件在cc中如果需要相應(yīng)click事件,需要為該節(jié)點添加一個Button組件。或使用類似效果的事件比如
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. 應(yīng)該減少事件注冊量
是否沒有問題了?在寫juqery時,有事件委托(delegate)的概念。啥意思呢,就是在節(jié)點的父級注冊事件,來響應(yīng)子節(jié)點的事件源。為啥可以實現(xiàn),主要歸功于js事件的兩大機制
事件冒泡,事件響應(yīng)從子節(jié)點往上冒泡到頂層節(jié)點
事件捕獲,事件響應(yīng)沖頂層節(jié)點依次傳遞到最末級節(jié)點
所以問題來了,消除類游戲都是通過預(yù)制資源生成不同樣式的方塊。若在每一方塊上都注冊事件,勢必導(dǎo)致內(nèi)存上漲(雖然現(xiàn)在內(nèi)存很大了)??纯碿c文檔,事件機制完全是一樣的(最終都是JS),然而我想在我的Canvas上注冊一個click事件,問題出現(xiàn)了。
3.問題來了問題就是我在Canvas上注冊了click事件,點擊button時,Canvas 上居然沒有收到我的click事件。由此我查看cc源碼,寫了一堆測試代碼,最終得出以下結(jié)
click事件確實Button組件特殊存
click事件不會向上或向下傳遞
node.emit觸發(fā)事件不會向上或向下傳遞
node.dispatchEvent支持事件向上或向下傳遞
使用node.dispatchEvent參數(shù)必須是 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);//觸發(fā)事件 } this._pressed = false; this._updateState(); event.stopPropagation(); //停止冒泡 }, ...
所以,之所Button能響應(yīng)click事件,是因為組件注冊了TOUCH_END事件,并在響應(yīng)該事件函數(shù)中發(fā)射一個click事件。
5. javascript 自定義事件參考mdn文檔,js自定事件方式如下
// author:herbert wx:4648844926.了解下cc.node.emit
cc.node.emit 最終調(diào)用的是CallbacksInvoker.prototype.invoke 方法,從源碼來看,是從對應(yīng)的緩存對象中找到注冊的回調(diào)方法,依次調(diào)用回調(diào)函數(shù)。
//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 屬性,實現(xiàn)冒泡。至于為啥使用 btn.node.dispatchEvent(new cc.Event.EventMouse(cc.Node.EventType.MOUSE_DOWN, true))沒有觸發(fā)事件是因為cc在底層,將事件類型統(tǒng)一改成了 cc.Event.MOUSE,源碼為證
author:herbert wx:464884492 ... var EventMouse = function (eventType, bubbles) { cc.Event.call(this, cc.Event.MOUSE, bubbles); ... };
場景
運行效果
8.總結(jié)做開發(fā),不管是開發(fā)游戲還是其他應(yīng)用程序。思路基本是一樣的。再簡單的事,多想想,再發(fā)散一下,你會收獲更多。
需要進cocos游戲開發(fā)群的朋友,請?zhí)砑游椅⑿呕貜?fù)cocos
歡迎感興趣的朋友關(guān)注我的訂閱號“小院不小”,或點擊下方二維碼關(guān)注。我將多年開發(fā)中遇到的難點,以及一些有意思的功能,體會都會一一發(fā)布到我的訂閱號中。如需本文demo請在訂閱號中回復(fù)ccevent
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/106976.html
摘要:自從調(diào)整游戲難度后我的最高分重來就沒有超過生命最高分來點實際的做技術(shù)嘛,大多都是做點總結(jié)吧開源地址在基本中定義的屬性,切記在編輯器中拖動綁定多看官網(wǎng),多開實例代碼發(fā)布微信小游戲一定不要有英文,會導(dǎo)致審核不通過 1.初來乍到 打開 Cocos Creator 點擊新建空白項目,在默認布局的左下區(qū)域,一個黃黃assets文件夾映入眼簾。作為前端的你對這個文件是不是再熟悉不過了。是的,和你想...
摘要:但開發(fā)的游戲是無法通過網(wǎng)頁發(fā)給別人在線玩的,更不能做成微信小游戲。它使用作為開發(fā)語言,開發(fā)出的游戲可以直接生成微信小游戲網(wǎng)頁安卓等平臺上的版本。 微信群里最大的騷擾源有兩種: 一是轉(zhuǎn)發(fā)#吱口令#~!@#¥%……&*,長按復(fù)制此消息領(lǐng)紅包之類的 另一種就是各種小程序和小游戲的分享 前天有同學(xué)無意間把一個小游戲分享到了答疑群中,我看了一下,其實游戲的代碼邏輯并不復(fù)雜(簡化版的跳一跳,套上個...
摘要:錨點位置確定后,所有子節(jié)點就會以父節(jié)點錨點所在位置作為坐標系原點。觀察實際效果以下為實際效果,左側(cè)打開欄目為不同手機分辨率模式。巨坑因為分辨率發(fā)生變化,導(dǎo)致節(jié)點大小位置都會發(fā)生變化。 項目地址:https://github.com/Iroha1024/... 一個小游戲的demo,以下簡單地介紹了我關(guān)于cocos creator的一點理解和開發(fā)流程 版本:cocos creator v...
摘要:從年底開發(fā)組就說要支持,等了大半年,新的內(nèi)測版本終于增加了的功能,但效果也是差強人意。實際上我不會把這幾個和打版本號的。最后產(chǎn)出會把這幾個文件合并到中。 Cocos Creator 是Cocos最新一代的游戲開發(fā)者工具,基于 Cocos2d-x,組件化,腳本化,數(shù)據(jù)驅(qū)動,跨平臺發(fā)布。Cocos Creator的開發(fā)思路已經(jīng)逐步跟Unity 3D靠攏,寫起來也更方便快捷,開發(fā)效率更高。 ...
摘要:本篇我們會基于的官方示例做分析,我在原的基礎(chǔ)上增加了部署的腳本,部署到又拍云和騰訊云。文件資源增加版本號版本號的方案跟之前的文章基本一致,這個流程在版本應(yīng)該可以忽略了。 這篇文章主要是我們團隊在使用Cocos Creator過程中的一些關(guān)于部署方面的實踐總結(jié),標題黨了一回,嚴格來說,應(yīng)該是《快看漫畫游戲研發(fā)團隊使用Cocos Creator構(gòu)建部署最佳實踐》,對于其他團隊可能并不是。 ...
閱讀 3562·2021-08-31 09:39
閱讀 1869·2019-08-30 13:14
閱讀 2931·2019-08-30 13:02
閱讀 2778·2019-08-29 13:22
閱讀 2356·2019-08-26 13:54
閱讀 778·2019-08-26 13:45
閱讀 1597·2019-08-26 11:00
閱讀 990·2019-08-26 10:58