cocos create学习笔记2

最新推荐文章于 2025-08-22 16:23:19 发布

原创最新推荐文章于 2025-08-22 16:23:19 发布 · 226 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

cocos creator学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CocosCreator中的事件处理，包括节点事件监听、关闭监听、事件冒泡以及系统内置事件的使用。同时，提到了全局系统事件如键盘和重力传感事件的监听。此外，还探讨了CocosCreator的动作系统和新引入的缓动系统，对比了两者在节点属性动画上的应用，并推荐使用缓动系统以简化操作。

监听器的设置
事件处理是在节点（cc.Node）中完成的。对于组件，可以通过访问节点 this.node 来注册和监听事件。监听事件可以通过 this.node.on() 函数来注册。

 	this.node.on('mousedown', function ( event ) {
    	console.log('Hello!');
    });
 // 使用函数绑定
 	this.node.on('mousedown', function ( event ) {
 		this.enabled = false;
 	}.bind(this));
 	// 使用第三个参数
	this.node.on('mousedown', function (event) {
  		this.enabled = false;
	}, this);

使用off方法来关闭监听，需要注意的是，off 方法的参数必须和 on 方法的参数一一对应，才能完成关闭。

发送事件
使用emit来发射事件

cc.Class({
  extends: cc.Component,

  onLoad () {
    // args are optional param.
    this.node.on('say-hello', function (msg,msg1) {
      console.log(msg)
      console.log(msg1);
    });
  },

  start () {
    // At most 5 args could be emit.
    this.node.emit('say-hello', 'Hello, this is Cocos Creator','这个是我加的，为了测试之后的参数都会被传到监听器调用的函数中');
  },
});

第一个参数指定发射的事件类型，之后的参数都会算作事件的参数（最多5个)。

使用dispatchEvent派送事件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210713100530515.png
通过该方法发射的事件，会进入事件派送阶段。
在 Cocos Creator 的事件派送系统中，我们采用冒泡派送的方式。冒泡派送会将事件从事件发起节点，不断地向上传递给他的父级节点，直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()。
请注意，在发送用户自定义事件的时候，请不要直接创建 cc.Event 对象，因为它是一个抽象类，请创建 cc.Event.EventCustom 对象来进行派发。

this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );

系统内置事件
Cocos Creator 支持的系统事件包含鼠标、触摸、键盘、重力传感四种。

全局系统事件
全局系统事件是指与节点树不相关的各种全局事件，由 cc.systemEvent 来统一派发，目前支持以下几种事件：
键盘事件设备重力传感事件
直接看代码:

cc.Class({
    extends: cc.Component,
    onLoad: function () {
        // add key down and key up event
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },

    onDestroy () {
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },

    onKeyDown: function (event) {
        switch(event.keyCode) {
            case cc.macro.KEY.a:
                console.log('Press a key');
                break;
        }
    },

    onKeyUp: function (event) {
        switch(event.keyCode) {
            case cc.macro.KEY.a:
                console.log('release a key');
                break;
        }
    }
});

设备重力传感事件先暂不学习。
缓动系统
Cocos Creator 在 v2.0.9 提供了一套新的 API —— cc.tween。cc.tween 能够对对象的任意属性进行缓动，功能类似于 cc.Action（动作系统）。但是 cc.tween 会比 cc.Action 更加简洁易用，因为 cc.tween 提供了链式创建的方法。

可以对任何对象进行操作，并且可以对对象的任意属性进行缓动。

cc.tween 在动作系统的基础上做了一层 API 封装。

先简单看看动作系统
Cocos Creator 提供的动作系统源自 Cocos2d-x，API 和使用方法均一脉相承。动作系统可以在一定时间内对节点完成位移，缩放，旋转等各种动作。

只支持在节点属性上使用

// 创建一个移动动作
var action = cc.moveTo(2, 100, 100);
// 节点对象执行动作
node.runAction(action);
// 停止节点对象对应的一个动作
node.stopAction(action);
// 停止这个节点对象的所有动作
node.stopAllActions();

moveTo的参数列表
duration Number duration in seconds
position Vec2 | Number
y Number

// example
var action1 = cc.moveTo(2, cc.v2(80,80));
var action2 = cc.moveTo(2,80,80);

这里有一个Vec2类型，该类型用于表示 2D 向量和坐标，我们一般通过cc.v2来创建Vec2对象

v2的参数列表
x Number |Object
y Number

var v1 = cc.v2();
var v2 = cc.v2(0, 0);
var v3 = cc.v2(v2);
var v4 = cc.v2({x: 100, y: 100});

相对动作系统，使用缓动系统会更加方便。建议使用缓动系统代替动作系统。