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.Nodecc.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, displayNametooltip。这几个参数分别指定了 score 的默认值为 0,在 属性检查器 里,其属性名将显示为:“Score (player)”,并且当鼠标移到参数上时,显示对应的 Tooltip。

下面是常用参数:

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

在属性检查器中展示

image-20191231171222917

(2)数组类型

数组的 default 必须设置为 [],如果要在 属性检查器 中编辑,还需要设置 type 为构造函数,枚举,或者 cc.Integercc.Floatcc.Booleancc.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 回调。倘若节点第一次被创建且 enabledtrue,则会在 onLoad 之后,start 之前被调

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

厚渡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值