cocos的 脚本编程 简单介绍

脚本编程

Cocos Creator 的脚本主要是通过扩展组件来进行开发的。目前 Cocos Creator 支持 JavaScript 和 TypeScript 两种脚本语言。通过编写脚本组件，并将它赋予到场景节点中来驱动场景中的物体。

考虑到大多数学员更熟悉JavaScript，本课程采用JavaScript作为脚本语言。

在组件脚本的编写过程中，你可以通过声明属性，将脚本中需要调节的变量映射到 属性检查器（Properties） 中，供策划和美术调整。于此同时，你也可以通过注册特定的回调函数，来帮助你初始化，更新甚至销毁节点。

1 节点和组件

1.1 创建和使用脚本组件

• 创建脚本组件

  在 Cocos Creator 中，脚本也是资源的一部分。你可以在资源编辑器中通过点击"创建"按钮来添加并选择 JavaScript 或者 TypeScript 来创建一份组件脚本。此时你会在你的资源编辑器中得到一份新的脚本：

  一份简单的组件脚本如下：

  cc.Class({
       
       
      extends: cc.Component,
  
      properties: {
       
       
      },
  
      // use this for initialization
      onLoad: function () {
       
       
      },
  
      // called every frame, uncomment this function to activate update callback
      update: function (dt) {
       
       
      },
  });
  

• 使用脚本组件

  将脚本添加到场景节点中，实际上就是为这个节点添加一份组件。我们先将刚刚创建出来的 NewScript.js重命名为 say-hello.js。然后选中我们希望添加的场景节点，此时该节点的属性会显示在 属性检查器 中。在 属性检查器 的最下方有一个 添加组件 的按钮，点击按钮并选择 添加用户脚本 -> say-hello 来添加我们刚刚编写的脚本组件。

  如果一切顺利，你将会看到你的脚本显示在 属性检查器 中：

  注意：用户也可以通过直接拖拽脚本资源到 属性检查器 的方式来添加脚本。

1.2 使用 cc.Class 声明类型

cc.Class 是一个很常用的 API，用于声明 Cocos Creator 中的类，为了方便区分，我们把使用 cc.Class 声明的类叫做 CCClass。

• 定义一个 CCClass

  调用 cc.Class，传入一个原型对象，在原型对象中以键值对的形式设定所需的类型参数，就能创建出所需要的类。

  let Sprite = cc.Class({
       
       
      name: "sprite",
  });
  

  以上代码用 cc.Class 创建了一个类型，并且赋给了 Sprite 变量。同时还将类名设为 “sprite”，类名用于序列化，一般可以省略。

• 实例化

  Sprite 变量保存的是一个 JavaScript 构造函数，可以直接 new 出一个对象：

  let obj = new Sprite();
  

• 判断类型

  需要做类型判断时，可以用 JavaScript 原生的 instanceof：

  cc.log(obj instanceof Sprite);       // true
  

• 实例方法

  let Sprite = cc.Class({
       
       
      // 声明一个名叫 "print" 的实例方法
      print: function () {
       
        }
  });
  

• 继承

  使用 extends 实现继承：

  // 父类
  let Shape = cc.Class();
  
  // 子类
  let Rect = cc.Class({
       
       
      extends: Shape
  });
  

1.3 声明自定义属性

1.3.1 简单声明

在多数情况下，我们都可以使用简单声明。

（1）基本类型

• 当声明的属性为基本 JavaScript 类型时，可以直接赋予默认值：

    properties: {
       
       
        height: 20,       // number
        type: "actor",    // string
        loaded: false,    // boolean                
        target: null,     // object
    }
  

• 当声明的属性具备类型时（如：cc.Node，cc.Vec2 等），可以在声明处填写他们的构造函数来完成声明，如：

    properties: {
       
       
        target: cc.Node,
        pos: cc.Vec2,
    }
  

（2）数组类型

当声明属性是一个数组时，可以在声明处填写他们的类型或构造函数来完成声明，如：

properties: {
   
   
      any: [],      		// 不定义具体类型的数组
      bools: [cc.Boolean],
      strings: [cc.String],
      floats: [cc.Float],
      ints: [cc.Integer],
      values: [cc.Vec2],
      nodes: [cc.Node],
      frames: [cc.SpriteFrame],
}

1.3.2 完整声明

有些情况下，我们需要为属性声明添加参数，这些参数控制了属性在 属性检查器 中的显示方式，以及属性在场景序列化过程中的行为。

（1）基本类型

properties: {
   
   
    score: {
   
   
        default: 0,
        displayName: "得分",
        tooltip: "设置玩家初始得分",
    }
}

以上代码为 score 属性设置了三个参数 default, displayName 和 tooltip。这几个参数分别指定了 score 的默认值为 0，在 属性检查器 里，其属性名将显示为：“Score (player)”，并且当鼠标移到参数上时，显示对应的 Tooltip。

下面是常用参数：

• default: 设置属性的默认值，这个默认值仅在组件第一次添加到节点上时才会用到
• type: 限定属性的数据类型
• visible: 设为 false 则不在 属性检查器 面板中显示该属性
• serializable: 设为 false 则不序列化（保存）该属性
• displayName: 在 属性检查器 面板中显示成指定名字
• tooltip: 在 属性检查器 面板中添加属性的 Tooltip

在属性检查器中展示

（2）数组类型

数组的 default 必须设置为 []，如果要在 属性检查器 中编辑，还需要设置 type 为构造函数，枚举，或者 cc.Integer，cc.Float，cc.Boolean 和 cc.String。

properties: {
   
   
    names: {
   
   
        default: [],
        type: [cc.String]   // 用 type 指定数组的每个元素都是字符串类型
    },

    enemies: {
   
   
        default: [],
        type: [cc.Node]     // type 同样写成数组，提高代码可读性
    },
}

1.4 脚本生命周期的回调函数

游戏运行的时期自动执行相关脚本，用户不需要手工调用它们。

目前提供给用户的生命周期回调函数主要有：

• onLoad
• onEnable
• start
• update
• lateUpdate
• onDisable
• onDestroy

1.4.1 onLoad

组件脚本的初始化阶段，我们提供了 onLoad 回调函数。onLoad 回调会在节点首次激活时触发，比如所在的场景被载入，或者所在节点被激活的情况下。在 onLoad 阶段，保证了你可以获取到场景中的其他节点，以及节点关联的资源数据。onLoad 总是会在任何 start 方法调用前执行，这能用于安排脚本的初始化顺序。通常我们会在 onLoad 阶段去做一些初始化相关的操作。例如：

cc.Class({
   
   
  extends: cc.Component,

  properties: {
   
   
    bulletSprite: cc.SpriteFrame,
    gun: cc.Node,
  },

  onLoad: function () {
   
   
    this._bulletRect = this.bulletSprite.getRect();
    this.gun = cc.find('hand/weapon', this.node);
  },
});

1.4.2 onEnable

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

1.4.3 start