Cocos技术派 | TS版各种属性声明详解_ts @property

先来看一段代码：

cc.Class({
    extends: cc.Component,
    properties: {
        userID: 20,
        userName: "Foobar"
    }
});

这是一个CCClass类，用关键字 properties 声明了两个属性：userID和userName。

官方文档和范例代码里面都有讲JS的属性声明写法，这样的声明可以直接在属性面板里面显示，可以输入属性值，比较方便。

虽然JS写法很简单，但是我还是建议大家使用TS来写游戏逻辑，因为TS更规范，且兼容JS所有的语法特性。

Cocos Creator使用了Typescript的装饰器来做注解式写法，注解式的开发方式在很多语言里被广泛应用。

Creator使用 @property 注解声明属性，其本质上其实就是一个函数，详细的原理这里不讨论，我们只讨论用法。

1

一般节点属性

最常见的节点属性，例如cc.Node，cc.Label，cc.Sprite等，要点：

• 使用@property注解，括号内参数是其类型

• backGround 和label 是变量名，可以自定义

• sp:cc.Sprite=null 是默认值，必须要给一个默认值

 TS 的代码如下：

 // 声明一个Sprite属性
 @property(cc.Sprite)
 backGround: cc.Sprite = null;
 
 // 声明一个Label属性
 @property(cc.Label)
 label: cc.Label = null;

这样声明之后，将脚本挂接在一个节点上，就可以在属性面板查看了，如下图：

2

增加属性显示名

声明一个简单的节点属性，属性面板上会默认显示变量名，如果变量采用驼峰法命名，编辑器会将这个变量按照驼峰分成多个单词。

为了在属性面板上更加直观地显示，在声明属性时可以为其定义一个显示名称displayName，这样可在属性面板上显示中文：

// 声明一个Sprite属性
@property({
    type: cc.Sprite,
    displayName: "背景"
})
backGround: cc.Sprite = null;
 
// 声明一个Label属性
@property({
    type: cc.Label,
    displayName: "标题"
})
label: cc.Label = null;

属性面板上显示如下：

3

增加属性提示说明

属性显示中文名之后已经很直观了，但是如果有一些属性用了简称，或者特定名称也很难理解，这个时候可以再增加一个提示说明，将鼠标悬浮在名称上就会浮现提示文字，代码如下：

@property({
    type: cc.Node,
    displayName: "底座",
    tooltip: "底部炮台的父节点"
})
baseNode: cc.Node = null;

打开属性面板，鼠标放在属性 底座 上，会有一个文字提示弹出，如下：

4

整数型属性

有一些属性，可能只希望取整数，并且有最大最小值，比如人物血量，最大100，最小0，将 type 设置为 cc.Integer，并设置 min 和 max 即可，如下：

@property({
    type: cc.Integer,
    displayName: "血量",
    min: 0,
    max: 10,
    tooltip: "人物当前血量"
})
HP = 10;

属性面板上显示如下：

如图所示，血量是个整数，在编辑器中调整大小的时候，最大不会超过10，最小不能小于0，而且不能输入小数。

5

下拉列表

要在属性面板上定义下拉列表，需要先定义一个枚举类型，TS有枚举类型，为了在属性面板上使用中文字符选项，我们必须使用Creator的枚举 cc.Enum.

let SexyType = cc.Enum({
    UNKNOWN: 0,
    MAN: 1,
    WOMAN: 2
});

@property({
    type: cc.Enum(SexyType),
    displayName: "性别"
})
sex = SexyType.UNKNOWN;

属性面板上操作如下：

6

定义文本框

默认值设为字符串即可，不需要定义type。

@property({displayName: "作者"})
author = "大掌教";
@property({ displayName: "Q群" })
QQ = "704391772";

属性面板如下：

7

定义ValueType类型

如果定义的属性为cc.ValueType的子类（cc.Vec2，cc.Vec3，cc.Color，cc.Rect），设置默认值为其实例即可，不需要显示设置type。

@property({
    displayName: "坐标"
})
pos: cc.Vec2 = new cc.Vec2(0);

属性面板如下：

8

定义滑动条

如果不定义type，则滑动条默认是小数，如果要定义一个整数型滑动条，将type设为 cc.Integer 即可，另外还需要定义最大值 min，max，step，并且设置slide为 true。

@property({
    type: cc.Integer,
    min:0,
    max:120,
    step: 1,
    slide: true,
    displayName: "年龄"
})
age = 32;

在属性面板上的样式如下：

9

定义事件回调

设置 type 为 cc.Component.EventHandler，默认值设置为事件的对象，即可定义一个事件回调，可以在属性面板上绑定一个回调函数，类似 Button 的点击事件绑定回调函数。

@property({
    type: cc.Component.EventHandler,
    displayName: "双杀"
})
doubleKill = new cc.Component.EventHandler();

属性面板上显示如下：