Cocos Creator学习（一）

最新推荐文章于 2025-04-30 17:13:06 发布

原创最新推荐文章于 2025-04-30 17:13:06 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cocos2d-js

cocos 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Cocos Creator中如何声明组件脚本属性，通过cc.Class定义字段并设置属性参数，实现属性在属性检查器中的可视化编辑。讨论了type、displayName等参数的作用，以及它们如何影响属性在属性检查器的显示和行为。示例中强调了组件脚本在场景中的应用，如控制节点行为。

一个简单的组件脚本。

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) {
    },
});

通过在组件脚本中声明属性，我们可以将脚本组件中的字段可视化地展示在 属性检查器 中，从而方便地在场景中调整属性值。

要声明属性，仅需要在 cc.Class 定义的 properties 字段中，填写属性名字和属性参数即可，在属性检查器中方便查看修改。

编写这些脚本的用处：这些代码就是编写一个组件（脚本）所需的结构。具有这样结构的脚本就是 Cocos Creator 中的组件（Component），他们能够挂载到场景中的节点上，提供控制节点的各种功能。例如：例子中的Player控制小怪物弹跳，Game产生星星。

完整声明：

properties: {
    score: {
        default: 0,
        displayName: "Score (player)",
        tooltip: "The score of player",
    }
}

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

下面是type，displayName等的属性参数：http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html

这些参数控制了属性在 属性检查器 中的显示方式，以及属性在场景序列化过程中的行为。

type 参数

当 default 不能提供足够详细的类型信息时，为了能在 属性检查器 显示正确的输入控件，就要用 type 显式声明具体的类型：

当默认值为 null 时，将 type 设置为指定类型的构造函数，这样 属性检查器 才知道应该显示一个 Node 控件。
```
  enemy: {
      default: null,
      type: cc.Node
  }
```
当默认值为数值（number）类型时，将 type 设置为 cc.Integer，用来表示这是一个整数，这样属性在 属性检查器 里就不能输入小数点。
```
  score: {
      default: 0,
      type: cc.Integer
  }
```
当默认值是一个枚举（cc.Enum）时，由于枚举值本身其实也是一个数字（number），所以要将 type 设置为枚举类型，才能在 属性检查器 中显示为枚举下拉框。
```
  wrap: {
      default: Texture.WrapMode.Clamp,
      type: Texture.WrapMode
  }
```