cocos的脚本编程简单介绍_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 之前被调