cocos creator 事件
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
<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 事件的更多相关文章
- Cocos Creator学习五:触摸和重力传感响应事件
1.移动设备上主要涉及触摸响应事件以及重力传感响应事件的处理. 事件主要分两类: 针对节点事件处理的节点响应事件cc.Node.EventType(主要是触摸响应事件和鼠标响应事件): 针对全局系统事 ...
- Cocos Creator学习四:按钮响应事件
1.方法一:通过编辑器对cc.Button的属性进行拖放操作进行控制 (1)创建脚本BtnClick1.js,增加btnClick1函数,然后拖放到Canvas节点中(记得拖放,否则下面步骤将找不到对 ...
- cocos creator Touch事件应用(触控选择多个子节点)
最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是一级一级往上冒泡,中间可以阻止 ...
- cocos creator实现棋牌游戏滑动选牌的功能
最近在玩cocos creator,打算学着做一款类似双扣游戏的棋牌,名字叫文成三星,比双扣还要多一扣,因为需要三幅牌,在我们老家比较流行这种玩法. 目前实现了绝大部分的逻辑效果如下: 有一点不好的体 ...
- Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线
这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...
- Cocos Creator学习二:查找节点和查找组件
1.目的:只有通过方便的获取节点对象以及组件,才能较好的进行逻辑控制. 2.通过 cc.find(节点全路径名称字符串) 获取节点. 3.通过getComponent获取组件(注意一个是类型,一个是类 ...
- Cocos Creator学习一:学习目录以及v2.0 必须关注的网址
学习目录: <Cocos Creator学习二:查找节点和查找组件> <Cocos Creator学习三:生命周期回调函数> <Cocos Creator学习四:按钮响应 ...
- Cocos Creator实现的《点我+1》
一.前言 在学习Cocos中,需要一些东西来练手,于是前段时间就开发仿照一款公司之前的产品<点我+1>来做,仿照过程中,所有的算法逻辑都是自己研究的,并没有参考公司代码,也没有使用公司的美 ...
- 初识cocos creator的一些问题
本文的cocos creator版本为v1.9.01.color赋值cc.Label组件并没有颜色相关的属性,但是Node有color的属性. //如果4个参数,在ios下有问题let rgb = [ ...
随机推荐
- TensorFlow笔记-初识
深度学习: 转换编程的思维(和传统的机器学习的编程方式不太一样) 测试链接 TensorFlow的安装 CPU版本: 只支持程序在CPU上计算/运算,默认运行就是CPU上运行 卸载: pip unin ...
- C语言入门7-程序设计方法基础-循环结构
程序设计方法基础-循环结构 循环三要素: 初值 循环判断条件 步长(循环增量) 循环结构在有些书籍上也称为重复结构, 即反复执行某一部分的操作. 循环三要素: 初值 循环判断条件 步 ...
- 7月新的开始 - LayUI的基本使用 - 分页
LayUI 分页处理 数据展示是以表格的形式展示的.使用模块如下: 首先使用内置模块-数据表格 然后使用内置模块-分页 官方文档地址:https://www.layui.com/doc/ 官方示例地址 ...
- 如何在 Centos7 中安装 gcc
系统环境:Centos7.4 今天在安装 Nodejs8.7 的时候,报了一个警告: WARNING: C++ Compiler too old, need g++ 4.9.4 or clang++ ...
- linux初学者-磁盘阵列篇
linux初学者-磁盘阵列篇 在磁盘的使用中,有时候需要提高磁盘的读写数据速度,就要用到磁盘组——raid,也就是磁盘阵列. 磁盘阵列是由最少两块以上的磁盘组成的,raid有许多模式,在这里将介绍其中 ...
- IO-文件输出流
一.输出流的原理 Java向文件中写数据的原理 Java程序-->JVM(java虚拟机)-->OS(操作系统)-->OS调用写数据的方法-->把数据写入到文件中 tips: ...
- mysql整数类型int后面的长度有什么意义
int 的 SQL-92 同义字为 integer.SQL-92 是数据库的一个标准. int类型的存储大小为4个字节 unsigned(无符号) int 存储范围是 2^4*8 int(M) 中的M ...
- TestNG独立运行的几种方法.md
目录 通过main函数调用testng.xml文件,然后打成可执行jar包执行 1 假设我们已经写好了testng.xml,现在我们需要写一个主类和main函数用来调用testng.xml 2 把项目 ...
- tomcat 启动是 jdbc警告
the web application [ROOT] registered the JDBC driver [com.mysql.jdbc.Driver] but failed to unregist ...
- Mybatis与Spring集成时都做了什么?
Mybatis是java开发者非常熟悉的ORM框架,Spring集成Mybatis更是我们的日常开发姿势. 本篇主要讲Mybatis与Spring集成所做的事情,让读过本文的开发者对Mybatis和S ...