Cocos-js快速上手

2023-11-07 17:14:34

1.访问节点和组件

节点（active）：在层级管理器中创建UI组件，空节点等。
组件（enabled）：资源管理器上创建的TS,JS脚本，物理材质，动画片段（不仅限于脚本）

节点本身没有类型，显示的类型由组件实现

this.node 获得组件所在的节点
getComponent 获取同一个节点上的其他组件

2.常用节点和组件API

2.1 节点API

说明 API
激活关闭节点 this.node.active
更改节点父节点 this.node.parent=parentNode / parentNode.addChild(this.node)
索引节点的子节点 this.node.children / this.node.childrenCount
更改节点的位置 this.node.x this.node.y / this.node.setPostion(x,y)
旋转 this.node.rotation / this.node.setRotation
更改节点缩放 this.node.scaleX this.node.scaleY / this.node.setScale(2, 2)
更改节点尺寸 this.node.width this.node.height / this.node.setContentSize(100, 100)
更改节点锚点位置 this.node.anchorX this.node.anchorY /this.node.setAnchorPoint(1, 0)
颜色和不透明度 this.node.color this.node.opacity

3.生命周期回调

依赖于节点（active）：__preload、onLoad、onDestroy
依赖于组件（enabled）：onEnable、start、update、lateUpdate、onDisable

再到最终销毁的完整生命周期函数调用顺序为：onLoad -> onEnable -> start -> update -> lateUpdate -> onDisable -> onDestroy

onLoad：节点首次激活时触发

onEnable：当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时激活。倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。

start：组件第一次激活前，update之前触发 (初始化一些需要经常修改的数据)

update：每一帧渲染前更新物体的行为

lateUpdate：动效（如动画、粒子、物理等）更新之后才进行一些额外操作

onDisable：当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调

onDestroy：当组件或者所在节点调用了 destroy()，则会调用 onDestroy 回调，并在当帧结束时统一回收组件。

4.创建和销毁节点

创建新节点：new cc.Node('Sprite')

克隆节点：cc.instantiate

销毁节点：node.destroy()，可以通过 cc.isValid 判断当前节点是否已经被销毁

destroy和removeFromParent的区别：后者不会从内存中释放，导致内存泄漏

API获取节点

this.node：当前节点

this.node.parent：父节点

this.node.children：子节点

cc.find()：全局查找节点

cc.find(’’,someNode)：查找子节点

API获取组件

node.getComponent()

5.加载和切换场景

//加载切换场景
cc.director.loadScene("MyScene");
//预加载
cc.director.preloadScene("table", function () {
    cc.log("Next scene preloaded");
});

//v2.4以后增加了新的加载方式
bundle.loadScene('MyScene', function (err, scene) {
    cc.director.runScene(scene);
});

6.监听事件

6.1事件的监听与关闭

//参数1：事件名称 参数2：方法 参数3：this指向

//开启监听
this.node.on('click',function(event){
    this.enabled = false
},this)

//关闭监听
this.node.off('click', function(event){
    this.enabled = false
}, this);

6.2 触摸事件

触摸事件在移动平台和桌面平台都会触发，只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件

枚举对象定义 对应的事件名 事件触发的时机
cc.Node.EventType.TOUCH_START touchstart 当手指触点落在目标节点区域内时
cc.Node.EventType.TOUCH_MOVE touchmove 当手指在屏幕上目标节点区域内移动时
cc.Node.EventType.TOUCH_END touchend 当手指在目标节点区域内离开屏幕时
cc.Node.EventType.TOUCH_CANCEL touchcancel 当手指在目标节点区域外离开屏幕时

触摸事件的重要API如下

API名 类型 意义
touch cc.Touch 与当前事件关联的触点对象
getID Number 获取触点的 ID，用于多点触摸的逻辑判断
getLocation Object 获取触点位置对象，对象包含 x 和 y 属性
getLocationX Number 获取触点的 X 轴位置
getLocationY Number 获取触点的 Y 轴位置
getPreviousLocation Object 获取触点上一次触发事件时的位置对象，对象包含 x 和 y 属性
getStartLocation Object 获取触点初始时的位置对象，对象包含 x 和 y 属性
getDelta Object 获取触点距离上一次事件移动的距离对象，对象包含 x 和 y 属性

注意：触摸事件支持多点触摸，每个触点都会有发送一次事件给事件监听器

触摸事件的冒泡过程与普通事件的冒泡过程并没有区别，可以调用event.stopPropagation()可以主动停止冒泡过程。

6.3 鼠标事件

枚举对象定义 对应的事件名 事件触发的时机
cc.Node.EventType.MOUSE_DOWN mousedown 当鼠标在目标节点区域按下时触发一次
cc.Node.EventType.MOUSE_ENTER mouseenter 鼠标移入目标节点区域时，不论是否按下
cc.Node.EventType.MOUSE_MOVE mousemove 当鼠标在目标节点在目标节点区域中移动时，不论是否按下
cc.Node.EventType.MOUSE_LEAVE mouseleave 当鼠标移出目标节点区域时，不论是否按下
cc.Node.EventType.MOUSE_UP mouseup 当鼠标从按下状态松开时触发一次
Node.EventType.MOUSE_WHEEL mousewheel 当鼠标滚轮滚动时

鼠标事件（ cc.Event.EventMouse ）的重要API如下（ cc.Event 标准事件 API 之外）：

枚举对象定义 返回值类型 意义
getScrollY Number 获取滚轮滚动的 Y 轴距离，只有滚动时才有效
getLocation Object 获取鼠标位置对象，对象包含 x 和 y 属性
getLocationX Number 获取鼠标的 X 轴位置
getLocationY Number 获取鼠标的 Y 轴位置
getPreviousLocation Object 获取鼠标事件上次触发时的位置对象，对象包含 x 和 y 属性
getDelta Object 获取鼠标距离上一次事件移动的距离对象，对象包含 x 和 y 属性
getButton Number cc.Event.EventMouse.BUTTON_LEFT 或 cc.Event.EventMouse.BUTTON_RIGHT 或 cc.Event.EventMouse.BUTTON_MIDDLE

6.4 键盘事件与重力传感事件

键盘，设备重力传感器此类全局事件是通过函数cc.systemEvent.on(type, callback, target)注册

  1. cc.SystemEvent.EventType.KEY_DOWN(键盘按下)
  2. cc.SystemEvent.EventType.KEY_UP(键盘释放)
  3. cc.SystemEvent.EventType.DEVICEMOTION(设备重力传感)

6.5 自定义事件

注意：emit只能传给自己，dispatchEvent可以向上冒泡

1.发送事件

//发射事件（性能考虑，最多只支持传递 5 个事件参数）
cc.Class({
  extends: cc.Component,
  onl oad () {
    // args are optional param.
    this.node.on('say-hello', function (msg) {
      console.log(msg);
    });
  },

  start () {
    // At most 5 args could be emit.
    this.node.emit('say-hello', 'Hello, this is Cocos Creator');
  },
});

Cocos-js快速上手

//派送事件（采用冒泡派送的方式，不断传给上一级节点直至遇到event.stopPropagation()中断处理）

// 节点 c 的组件脚本中
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );
// 节点 b 的组件脚本中
this.node.on('foobar', function (event) {
  event.stopPropagation();
});

7.缓动系统

cc.Action
cc.tween：链式调用，更简洁

API 说明
to 绝对值计算（直接设置属性为结果）
by 相对值计算（累加属性为结果）
then 插入其他的缓动到队列中
repeat 重复执行
delay 延迟执行
sequence action队列，按顺序执行
repeatForever 停止stopAllByTarget
parallel 并行执行
call 回调函数（动作执行完毕后调用）

8.使用计时器

//开始一个计时器
component.schedule(function() {
     // 这里的 this 指向 component
     this.doSomething();
 }, 5);

//更灵活的计时器
 // 以秒为单位的时间间隔
 var interval = 5;
 // 重复次数
 var repeat = 3;
 // 开始延时
 var delay = 10;
 component.schedule(function() {
     // 这里的 this 指向 component
     this.doSomething();
 }, interval, repeat, delay);

//只执行一次的计时器
 component.scheduleOnce(function() {
     // 这里的 this 指向 component
     this.doSomething();
 }, 2);
API
schedule 开始一个计时器
scheduleOnce 开始一个只执行一次的计时器
unschedule 取消一个计时器
unscheduleAllCallbacks 取消这个组件的所有计时器

9.音频播放

AudioEngine与 AudioSource 都能播放音频，它们的区别在于 AudioSource 是组件，可以添加到场景中，由编辑器设置。而 AudioEngine 是引擎提供的纯 API，只能在脚本中进行调用。

//this.audioSource
  cc.Class({
      extends: cc.Component,

      properties: {
          audioSource: {
              type: cc.AudioSource,
              default: null
          },
      },

      play: function () {
          this.audioSource.play();
      },

      pause: function () {
          this.audioSource.pause();
      },
  });

// cc.AudioEngine
 cc.Class({
     extends: cc.Component,

     properties: {
         audio: {
             default: null,
             type: cc.AudioClip
         }
     },

     onl oad: function () {
         this.current = cc.audioEngine.play(this.audio, false, 1);
     },

     onDestroy: function () {
         cc.audioEngine.stop(this.current);
     }
 });

10.CCClass进阶

1.原型对象参数说明
cc.Class({
	//类名，用于序列化
    //值类型：string
    name:"Character",
    
    //基类，可以是任意创造好的cc.Class
    //值类型：Function
    extends:cc.Component,
    
    //构造函数
    //值类型：Function
    ctor:function(){},
    
    //属性定义
    properties:{},
    
    //实例方法
    print:function(){
        cc.log(this.text)
    }
    
    //静态成员定义
    statics:{}
         
    // 提供给 Component 的子类专用的参数字段
    // 值类型：Object
    editor: {
        disallowMultiple: true
    }
})
2.构造函数

ctor：定义构造函数，为了保证反序列化能始终正确运行，不允许定义构造参数

__ctor__：允许定义构造参数，并且不会自动调用父构造函数（无特殊情况使用ctor）

3.判断类型

JavaScript原生instanceof

cc.isChildClassOf判断类的继承关系

4.继承

请注意，不论子类是否有定义构造函数，子类实例化前父类的构造函数都会被自动调用

重写方法：

var Shape = cc.Class({
    getName: function () {
        return "shape";
    }
});

var Rect = cc.Class({
    extends: Shape,
    getName: function () {
        return "rect";
    }
});
5.GetSet方法

设定了get以后，这个属性就不能被序列化，也不能指定默认值，但仍然可以附带除了default，serializable外的大部分参数

如果没有和 get 一起定义，则 set 自身不能附带任何参数。和 get 一样，设定了 set 以后，这个属性就不能被序列化，也不能指定默认值。

前端模块化 说明
AMD 并行加载，提前执行（define return）
CMD 并行加载，延迟执行（define moudle export）
Common.js 后端NODE使用，同步加载 拷贝
ES6 import 引用 必须在模块*

11.资源管理：Asset Bundle

AB包作为资源模块化工具，允许开发者按照项目需求将贴图，脚本，场景等资源划分在多个AB包中，然后在游戏运行过程中，按照需求去加载不同的AB包，以减少启动时需要加载的资源数量，从而减少首次下载和加载游戏时所需的事件，同时可以减少内存占用

AB包可以按照需求随意放置（远程服务器，本地，小游戏平台分包，跨项目服用，加载子项目中的AB包）

AB包是以文件夹为单位进行配置的，并且不支持嵌套不允许同名

AB包配置项 功能说明
internal 存放所有内置资源以及其依赖资源
main 存放所有构建发布面板的参与构建场景中勾选的场景以及其依赖资源
resources 存放resources目录下的所有资源以及其依赖资源
start-scene 如果在构建发布面板中勾选了初始场景分包，则首场景将会被构建到 start-scene 中
上一篇：有限元分析简单实例之平面矩形薄板（matlab）


下一篇：cocos creator2.2.1 益智教学小游戏《太极》源码H5+安卓+IOS三端源码