cocos-js 的事件监听（学习）

最新推荐文章于 2021-11-04 11:57:53 发布
原创 最新推荐文章于 2021-11-04 11:57:53 发布 · 700 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Cocos2d-x游戏引擎中事件监听和对象缓冲池的使用方法，包括如何添加触摸事件监听器、自定义事件以及对象缓冲池的实现方式，旨在优化内存管理和提高游戏性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简单方法的事件添加：

cc.eventManager.addLisener({

event: cc.Event.Lisener.Touch_One_By_one;

        onTouchBegin:function(touch,event){

            if(cc.rectContainsPoint(event.getCurrentTarget().boundingBox(),touch.getLocation()))

            {}

},

       onTouchBegin:function(touch,evnet){

}

       onTouchBegin:function(touch,evnet){

}

},this.Srite);


自定义事件：

对象缓冲池：

cc.pool的使用方法，节省内存

ScrollView 的滚动事件监听
11-06
ScrollView 的滚动事件监听
cocos-js小游戏《别踩白块》游戏源码以及素材
04-04
Cocos-js是Cocos2d-x框架的一个JavaScript版本，它允许开发者使用JavaScript语言进行游戏开发，同时享受到Cocos2d-x的强大功能和跨平台优势。 本游戏源码的获取，对于学习Cocos-js和游戏开发的初学者来说，是一个...
Cocos事件监听(JS)
Dust的博客
11-04 533
在onLoad里注册 this.node.on(cc.Node.EventType.MOUSE_DOWN, this.mouseDown, this); this.mouseDown是一个function,包含动作内容 mouseDown() { // 一些动作 } 在onDestory里注销 this.node.off(cc.Node.EventType.MOUSE_DOWN, this.mouseDown, this); 更多官方文档: 监听和发射事件 系统事件.
cocos2dx js 自定义监听事件
MyHaloJ
02-23 1209
cocos2dx js 自定义监听事件 cocos引擎还封装了一个自定义事件，下面我们将把一个节点对象通过自定义监听事件传入自定义回调事件中，并进行相应的函数调用。 代码 //自定义监听事件 customListener : function () { var myListener = cc.EventListener.create({ event :c...
cocos2d-js动画结束监听
有酒有故事
09-14 1112
注意带小写 var act = new cc.moveTo(0.20, cposition); var actionFinish = cc.callFunc(self.finishCallFunction, self); var seq = cc.sequence(act, actionFinish); self.node.runAction(
cocos-js触摸事件
xiaofang3a的专栏
04-05 1902
/** * Created by cena on 2017/4/4. */ var MyLayer=cc.Layer.extend({ ctor:function() { this._super(); var size=cc.winSize; var man=new cc.Sprite(res.HelloWorld_png);
cocos creator为事件加上监听的两种处理方式
11-28
在Cocos Creator中，事件监听是游戏开发中的关键部分，它允许我们响应各种用户交互、游戏状态变化和其他组件之间的通信。本篇文章将详细介绍两种在Cocos Creator中为事件添加监听的处理方式：一种是通过`cc.Class....
java安卓游戏源码-cocos2d-js:JS的cocos2d-x
06-04
Cocos2d-JS 从 3.7 版本开始与 Cocos2d-x 合并。 *** 请离开 Cocos2d-JS Cocos2d-JS 是 Cocos2d-x 引擎的 JavaScript 版本，包括 Cocos2d-html5 和 Cocos2d-x JavaScript 绑定。 它为您的游戏配备了跨浏览器和跨平台...
cocos-creator-demo:cocos-creator-demo
05-07
3. 事件监听：`cc.EventListener`类用于添加事件监听器，如触摸事件、键盘事件等，这在交互式游戏中至关重要。 4. 动画控制：`cc.Animation`和`cc.Animator`配合使用，可以创建复杂的动画效果。 二、背景无限滚动...
FantasticTheif-cocos2d-js-Sample:cocos2d-js 示例
06-22
这些都需要通过事件监听和响应来实现，例如 `cc.EventListener` 可用于监听触摸、键盘等用户输入事件。 4. **资源管理** 游戏中的图片、音频等资源，可以通过 Cocos2d-js 的资源管理模块加载和缓存，如 `cc.loader...
Cocos2d-js 游戏切后台和返回游戏，系统监听事件
weixin_30701521的博客
06-29 330
在日常游戏开发中，我们会发现，实时类操作的游戏，在模拟器中切后台，然后切回游戏，会出现很多异常。 很幸运，Cocos官方已经为我们预留了接口 1 LogicGame.addSystemListener = function () { 2 3 cc.eventManager.addCustomListener(cc.game.EVENT_HIDE, functi...
cocos2d js ScrollView的用法
dayday_up2的专栏
10-30 7231
cocos2d js ScrollView的用法
cocos2d-js webview
LANGZI7758521的专栏
04-28 4650
var webView = new ccui.WebView(); webView.setPosition(cc.p(this._actView.getContentSize().width/2, this._actView.getContentSize().height/2 -20)); webView.setContentSize(cc.size(this._actView.getConten
Cocos Creator_JavaScript权威指南（第六版）_第17章_事件处理
wy小骑士
09-06 226
事件类型（event type）是一个用来说明发生什么类型事件的字符串。例如，“mousemove”表示用户移动鼠标，“keydown”表示键盘上某个键被按下，而“load”表示文档（或某个其他资源）从网络上加载完毕。由于事件类型只是一个字符串，因此实际上有时会称之为事件名字。 事件目标（event target）是发生的事件或与之相关的对象。当讲事件时，我们必须同时指明类型和目标。例如，win...
Cocos creator 源码解析(一)
kenvs的博客
04-14 8993
序言 许久没写博客了，这次借着读源码来写几篇关于源码的解析吧。加上最近用cocos比较多，底层看的比较少，准备开始对全部的源码来一次深刻的解读，此篇文章也是方便我自己以后查看。源码已经添加了对应方法的解释，在此基础上加入我个人的解释。 PS: 本人是web方向的，所以基本cocos用的都是html场景，原生部分就没能力解析了，其他部分解析后续会更新 首先我们先从CCGame.js开始解读，因为...
cocos2d-js ScrollView事件监听
qq_41752041的博客
05-08 1527
cocos2d-js 自定义事件监听派发
weixin_34179762的博客
08-21 184
熟悉js的dom事件或者flash事件的，基本都能立马明白cc.eventManager的用法。 cc.eventManager有两种注册监听器的方式，一种是原生事件，例如 cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyRele...
[CocosCreator]音频播放
iningwei的博客
08-09 4745
1：平台差异 在ios浏览器及微信中不会自动播放音频，必须点击一次后才能播放。 且Safari浏览器不支持ogg格式音频。 具体浏览器对音频格式支持如下表： 微信小游戏上，根据官方文档，安卓、ios均对mp3、aac、wav完全支持。其它格式不保证支持。 2：播放方法 CocosCreator提供两种方式：AudioSource组件方式和AudioEngine纯代码方式。 具体参考官方文档：音频...
cocos2d事件监听机制
chenbingzhao的专栏
03-31 1183
下面就以我们常用的单点触摸监听来讲一下事件监听机制原理： 实现触摸监听代码如下：   local listener = cc.EventListenerTouchOneByOne:create() local function onTouchBegan(touch, event) return true end local function onTouchMoved(touch...
TypeError: at requestAnimationFrame callback Cannot read properties of null (reading 'on') at i.onEnable(cocos-js/cc.js:2) at e.fM [as _invoke](cocos-js/cc.js:2) at i.invoke(cocos-js/cc.js:2) at e.activateNode(cocos-js/cc.js:2) at e._activate(cocos-js/cc.js:2) at i.runSceneImmediate(cocos-js/cc.js:2) at ?(eval (cocos-js/cc.js:2) at ?(eval (cocos-js/cc.js:2) at ?(eval (cocos-js/cc.js:2) at ?(eval (cocos-js/cc.js:2)
最新发布
06-12
<think>我们正在处理的是Cocos引擎中删除相机时出现的TypeError:Cannotreadpropertiesofnull(reading'on')错误。根据用户提供的信息，错误发生在requestAnimationFrame回调中，这表明我们可能在动画帧回调中尝试访问已经被销毁的相机对象。从之前的历史回答中，我们已经知道：-删除相机后，相机对象会被销毁，变为null-如果requestAnimationFrame回调中仍然引用这个相机，就会抛出这个错误解决思路：1.在删除相机前，取消注册requestAnimationFrame回调。2.在requestAnimationFrame回调中检查相机对象是否仍然有效。具体步骤：###1.确保在销毁相机前停止动画循环如果你使用了`requestAnimationFrame`，那么在销毁相机的时候，必须取消这个回调。通常我们会使用一个标志来控制循环，或者在销毁前取消动画帧请求。例如：```javascript//在类的定义中updateCamera(){//假设这个函数会在每一帧调用if(!this.camera||!cc.isValid(this.camera)){//如果相机已经被销毁，则停止这个循环return;}//...使用相机的逻辑}startCameraLoop(){//保存animationframe的idthis._animationFrameId=requestAnimationFrame(()=>{this.updateCamera();});}stopCameraLoop(){if(this._animationFrameId){cancelAnimationFrame(this._animationFrameId);this._animationFrameId=null;}}//在销毁相机的代码中onDestroy(){this.stopCameraLoop();//其他销毁逻辑if(this.camera){this.camera.destroy();this.camera=null;}}```###2.在requestAnimationFrame回调中检查相机有效性如上例所示，在`updateCamera`函数中，我们首先检查相机对象是否存在以及`cc.isValid`（该函数检查对象是否未被销毁）。###3.使用cc.isValid判断对象有效性Cocos提供了`cc.isValid`函数，可以判断一个对象是否已经被销毁。注意：在Cocos中，销毁的对象并不会立即变成null，而是被标记为销毁，但变量仍然指向一个非null的值（此时调用对象的方法会导致错误）。因此，不能简单地用`if(this.camera)`来判断，而应该使用`cc.isValid`。所以，在回调中，我们应该这样写：```javascriptif(cc.isValid(this.camera)){//安全的操作}```###4.完整示例下面是一个更完整的示例，展示如何安全地删除相机并避免错误：```javascriptcc.Class({extends:cc.Component,properties:{camera:{default:null,type:cc.Camera}},onLoad(){this._animationFrameId=null;this.startCameraLoop();},startCameraLoop(){constupdate=()=>{this._animationFrameId=requestAnimationFrame(update);this.updateCamera();};this._animationFrameId=requestAnimationFrame(update);},stopCameraLoop(){if(this._animationFrameId!==null){cancelAnimationFrame(this._animationFrameId);this._animationFrameId=null;}},updateCamera(){//检查相机是否有效if(!cc.isValid(this.camera)){//如果相机已经销毁，停止循环this.stopCameraLoop();return;}//正常更新相机的逻辑//this.camera.someMethod();},//示例：一个删除相机的方法deleteCamera(){//先停止循环this.stopCameraLoop();if(cc.isValid(this.camera)){this.camera.destroy();this.camera=null;}},onDestroy(){this.stopCameraLoop();if(cc.isValid(this.camera)){this.camera.destroy();this.camera=null;}}});```###5.使用Cocos内置的update函数另外，如果使用的是Cocos的`update`函数（即每帧调用的函数），则无需手动控制循环，但是同样需要在`update`中检查相机有效性，并在销毁时停止使用。###总结这个错误通常是因为在相机销毁后，动画回调还在尝试访问相机对象。解决方法是：1.在销毁前停止动画循环2.在回调函数中检查相机对象是否有效按照上述步骤，应该可以解决这个错误。§§相关问题§§1.如何在CocosCreator中正确使用requestAnimationFrame？2.如何避免在Cocos中被销毁对象的空引用问题？3.Cocos中的cc.isValid()和普通的null检查有什么区别？4.在CocosCreator中销毁对象的最佳实践是什么？</think> ### Cocos引擎中删除相机时"requestAnimationFrame回调导致TypeError"的解决方案 您在Cocos引擎中遇到的`Uncaught TypeError: Cannot read properties of null (reading 'on')`错误结合`requestAnimationFrame`回调，表明存在**动画帧回调持续访问已销毁对象**的问题。根据请求动画帧的执行机制[^1]和引用[2]的调试经验，以下是完整解决方案： --- #### 核心问题分析 ```mermaid sequenceDiagram participant Main as 主线程 participant RAF as requestAnimationFrame队列 participant Camera as 相机对象 Main->>Camera: camera.destroy() activate Camera Camera-->>Main: 对象标记为null deactivate Camera RAF->>Camera: 尝试访问已销毁的相机 Camera-->>RAF: 抛出TypeError(Cannot read 'on' of null) ``` 根本原因是：**requestAnimationFrame回调未随相机销毁同步清除**，导致下一帧仍尝试访问已移除的对象。 --- #### 解决方案（分步实施） 1. **在销毁前清除动画帧回调** 在销毁相机前强制清理所有相关回调： ```javascript destroyCamera() { // 优先取消动画帧回调 if (this._frameHandler) { cancelAnimationFrame(this._frameHandler); this._frameHandler = null; } // 检查相机有效性后销毁 if (cc.isValid(this.camera)) { this.camera.node.destroy(); this.camera = null; // 显式解除引用 } } ``` 2. **在回调中添加防御性检查** 在所有访问相机的代码段前进行对象存活验证： ```javascript updateFrame() { // 前置安全校验（关键！） if (!cc.isValid(this.camera)) { return; // 相机不存在时跳过后续操作 } // 安全使用相机对象 const projection = this.camera.getProjectionMatrix(); // 递归注册下一帧回调 this._frameHandler = requestAnimationFrame(() => this.updateFrame()); } ``` 3. **使用对象有效性封装层** 创建安全访问层处理可能为空的对象： ```javascript safeCameraCall(callback) { return cc.isValid(this.camera) ? callback(this.camera) : null; } // 使用示例 this.safeCameraCall(cam => { cam.on(cc.Camera.EVENT_RENDER_POST, this.postEffect, this); }); ``` --- #### 错误场景重现及调试方法 ```javascript // ⚠️ 危险代码：没有销毁保护的动画循环 startCameraLoop() { this._frameHandler = requestAnimationFrame(() => { // 直接访问相机属性 ↓ 引发崩溃 this.camera.renderScene(); this.startCameraLoop(); }); } // ✅ 修正方案：增加销毁标记位 startCameraLoop() { if (this._isCameraDestroyed) return; // 终止条件 this._frameHandler = requestAnimationFrame(() => { if (!cc.isValid(this.camera)) { this._isCameraDestroyed = true; return; } this.camera.renderScene(); this.startCameraLoop(); }); } ``` > **调试工具推荐**： > 1. Cocos Creator调试器的**对象存活检查**（`cc.isValid()`） > 2. Chrome DevTools的**内存快照对比** > 3. 在`requestAnimationFrame`入口添加日志点： > ```javascript > console.log('[RAF] Camera valid:', cc.isValid(this.camera)); > ``` --- #### 最佳实践总结 1. **销毁顺序原则**： ``` 取消事件监听 → 停止动画帧 → 销毁对象 → 解除引用 ``` 2. **使用引用封装**： ```typescript interface SafeCamera { valid: boolean; ref: cc.Camera | null; invoke: (fn: (cam: cc.Camera) => void) => void; } ``` 3. **利用引擎生命周期**： 在`onDestroy()`中统一清理资源： ```javascript onDestroy() { cancelAnimationFrame(this._frameHandler); this.camera?.targetTexture?.destroy(); this.camera = null; } ``` > 注意：Cocos的`requestAnimationFrame`使用HTML5标准API，回调执行独立于引擎生命周期管理[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值