cocos creator 事件

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

1. 普通节点注册click事件

在cc中如果需要相应click事件,需要为该节点添加一个Button组件。或使用类似效果的事件比如

  1. cc.Node.EventType.MOUSE_DOWN

  2. 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事件的两大机制

  1. 事件冒泡,事件响应从子节点往上冒泡到顶层节点

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

所以问题来了,消除类游戏都是通过预制资源生成不同样式的方块。若在每一方块上都注册事件,势必导致内存上涨(虽然现在内存很大了)。看看cc文档,事件机制完全是一样的(最终都是JS),然而我想在我的Canvas上注册一个click事件,问题出现了。

3.问题来了

问题就是我在Canvas上注册了click事件,点击button时,Canvas 上居然没有收到我的click事件。由此我查看cc源码,写了一堆测试代码,最总得出以下结

  1. click事件确实Button组件特殊存

  2. click事件不会向上或向下传递

  3. node.emit触发事件不会向上或向下传递

  4. node.dispatchEvent支持事件向上或向下传递

  5. 使用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>

5.了解下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自然不会往上或往下传递。

6.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);
...
};

场景

运行效果

7.总结

做开发,不管是开发游戏还是其他应用程序。思路基本是一样的。在简单的事,多想想,再发散一下,你会收获更多。
需要进cocos游戏开发群的朋友,请添加我微信回复cocos


欢迎感兴趣的朋友关注我的订阅号“小院不小”,或点击下方二维码关注。我将多年开发中遇到的难点,以及一些有意思的功能,体会都会一一发布到我的订阅号中。如需本文demo请在订阅号中回复ccevent

cocos creator 事件的更多相关文章

  1. Cocos Creator学习五:触摸和重力传感响应事件

    1.移动设备上主要涉及触摸响应事件以及重力传感响应事件的处理. 事件主要分两类: 针对节点事件处理的节点响应事件cc.Node.EventType(主要是触摸响应事件和鼠标响应事件): 针对全局系统事 ...

  2. Cocos Creator学习四:按钮响应事件

    1.方法一:通过编辑器对cc.Button的属性进行拖放操作进行控制 (1)创建脚本BtnClick1.js,增加btnClick1函数,然后拖放到Canvas节点中(记得拖放,否则下面步骤将找不到对 ...

  3. cocos creator Touch事件应用(触控选择多个子节点)

    最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是一级一级往上冒泡,中间可以阻止 ...

  4. cocos creator实现棋牌游戏滑动选牌的功能

    最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑效果如下: 有一点不好的体 ...

  5. Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线

    这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...

  6. Cocos Creator学习二:查找节点和查找组件

    1.目的:只有通过方便的获取节点对象以及组件,才能较好的进行逻辑控制. 2.通过 cc.find(节点全路径名称字符串) 获取节点. 3.通过getComponent获取组件(注意一个是类型,一个是类 ...

  7. Cocos Creator学习一:学习目录以及v2.0 必须关注的网址

    学习目录: <Cocos Creator学习二:查找节点和查找组件> <Cocos Creator学习三:生命周期回调函数> <Cocos Creator学习四:按钮响应 ...

  8. Cocos Creator实现的《点我+1》

    一.前言 在学习Cocos中,需要一些东西来练手,于是前段时间就开发仿照一款公司之前的产品<点我+1>来做,仿照过程中,所有的算法逻辑都是自己研究的,并没有参考公司代码,也没有使用公司的美 ...

  9. 初识cocos creator的一些问题

    本文的cocos creator版本为v1.9.01.color赋值cc.Label组件并没有颜色相关的属性,但是Node有color的属性. //如果4个参数,在ios下有问题let rgb = [ ...

随机推荐

  1. local class incompatible: stream classdesc serialVersionUID = 4125096758372084309, local class serialVersionUID = 7725746634795906143

    local class incompatible: stream classdesc serialVersionUID = 4125096758372084309, local class seria ...

  2. Docker 环境下搭建nexus私服

    一.安装docker 1.脚本安装 本机环境CentOS7,用户为root 下载脚本到工作目录 curl -fsSL https://get.docker.com -o get-docker.sh 执 ...

  3. 推荐 2 款超牛逼、炫酷、实用的Docker管理工具!

    Docker技术的火热程度,想必每个互联网IT技术人员都能时时感受的到,的确,近些年,国内对于Docker容器技术的应用需求越来越强烈!! 人均年薪80万以上,docker到底是什么?为什么这么火? ...

  4. 从7点到9点写的小程序(用了模块导入,python终端颜色显示,用了点局部和全局可变和不可变作用域,模块全是自定义)

    未完待续的小程序 要是能做的好看为啥不做的好看 在同目录下生成程序 1.程序文件 run.py from login import login from register import registe ...

  5. c语言进阶13-线性表之顺序表

    一. ACM算法:顺序表的查找 顺序表的查找指获取顺序表的第i个元素.对于线性表的顺序存储结构来说,如果我们要实现获取元素的操作(GetElem),即将线性表L中的第i个位置元素值返回.就程序而言,只 ...

  6. [HDOJ] 2026.Max Sum

    2026.Max Sum (c++) Problem Description Consider the aggregate An= { 1, 2, -, n }. For example, A1={1 ...

  7. CF392BTower of Hanoi(记忆化搜索)

    CF392B 记搜好题 预处理 题目给出了将一个盘从x移到y的代价(代码中为a[][]),当我们知道这并不是最优的 就像最短路floyd一样松弛操作预处理得到两柱之间最优值b[][] for(int ...

  8. Java EE.JSP.指令

    JSP的指令是从JSP向Web容器发送消息,它用来设置页面的全局属性,如输出内容类型等. JSP的指令的格式为:<%@ 指令名 属性="属性值"%> 1.page指令 ...

  9. linux初学者-磁盘加密篇

    linux初学者-磁盘加密篇 因为保密需要,一般系统中会在文件和磁盘中进行加密,但是文件的加密比较容易破解,不安全.所以在特殊需要下,会对磁盘进行加密,磁盘加密后在磁盘损坏的同时,其中的数据也会损坏, ...

  10. Linux虚拟机所装软件说明

    Linux虚拟机所装软件说明 第一台虚拟机192.168.72.201 的 /usr/local/ 目录下放了一下软件: drwxr-xr-x 3 root root 4096 6月 14 19:16 ...