cocos creator 事件

since1986 发布于2019-08-26 11:00 / 1584人阅读

摘要：事件在做一个消除类游戏时，需要对点击的方块做出响应。普通节点注册事件在中如果需要相应事件，需要为该节点添加一个组件。，事件冒泡利用自定义事件的属性，实现冒泡。

cocos creator 事件

在做一个消除类游戏时，需要对点击的方块做出响应。代码很简单，可背后的原理还多着呢。

1. 普通节点注册click事件

在cc中如果需要相应click事件，需要为该节点添加一个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. 应该减少事件注册量

是否没有问题了？在写juqery时，有事件委托（delegate）的概念。啥意思呢，就是在节点的父级注册事件，来响应子节点的事件源。为啥可以实现，主要归功于js事件的两大机制

事件冒泡，事件响应从子节点往上冒泡到顶层节点

事件捕获，事件响应冲顶层节点依次传递到最末级节点

所以问题来了，消除类游戏都是通过预制资源生成不同样式的方块。若在每一方块上都注册事件，势必导致内存上涨（虽然现在内存很大了）。看看cc文档，事件机制完全是一样的（最终都是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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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