属性检查器相关参数
属性装饰器的各种特性是通过 @property()
的参数来指定的。完整可选择参数可以参考:
参数名 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
type | 限定属性的数据类型 | (Any) | undefined | |
visible | 在 属性检查器 面板中显示或隐藏 | boolean | (注1) | |
displayName | 在 属性检查器 面板中显示为另一个名字 | string | undefined | |
tooltip | 在 属性检查器 面板中添加属性的 Tooltip | string | undefined | |
multiline | 在 属性检查器 面板中使用多行文本框 | boolean | false | |
readonly | 在 属性检查器 面板中只读 | boolean | false | |
min | 限定数值在编辑器中输入的最小值 | number | undefined | |
max | 限定数值在编辑器中输入的最大值 | number | undefined | |
step | 指定数值在编辑器中调节的步长 | number | undefined | |
range | 一次性设置 min、max、step | [min, max, step] | undefined | step 值可选 |
slide | 在 属性检查器 面板中显示为滑动条 | boolean | false | |
group | 在 属性检查器 面板中显示为分组,样式默认为 tab | { name } 或 { id, name, displayOrder, style } | undefined |
属性装饰器
@property({
type: Node,
visible: true,
})
targetNode: Node | null = null;
声明属性 children 的 cc 类型为 Node 数组
@property({
type: [Node]
})
children: Node[] = [];
@property({
type: String,
}) // 警告:不应该使用构造函数 String。等价于 CCString。也可以选择不声明类型
text = '';
分组
当脚本中定义的属性过多且杂时,可通过 group
对属性进行分组、排序,方便管理。同时还支持对组内属性进行分类。
group
写法包括以下两种:
@property({ group: { name } })
@property({ group: { id, name, displayOrder, style } })
参数 | 说明 |
---|---|
id | 分组 ID,string 类型,是属性分组组号的唯一标识,默认为 default 。 |
name | 组内属性分类的名称,string 类型。 |
displayOrder | 对分组进行排序,number 类型,数字越小,排序越靠前。默认为 Infinity ,表示排在最后面。若存在多个未设置的分组,则以在脚本中声明的先后顺序进行排序 |
style | 分组样式,目前支持 tab 和 section 样式。 默认为 tab。 |
// 分组一
// 组内名为 “bar” 的属性分类,其中包含一个名为 label 的 Label 属性
@property({ group: { name: 'bar' }, type: Label })
label: Label = null!;
// 组内名为 “foo” 的属性分类,其中包含一个名为 sprite 的 Sprite 属性
@property({ group: { name: 'foo' }, type: Sprite })
sprite: Sprite = null!;
// 分组二
// 组内名为 “bar2” 的属性分类,其中包含名为 label2 的 Label 属性和名为 sprite2 的 Sprite 属性,并且指定排序为 1。
@property({ group: { name: 'bar2', id: '2', displayOrder: 1 }, type: Label })
label2: Label = null!;
@property({ group: { name: 'bar2', id: '2' }, type: Sprite })
sprite2: Sprite = null!;
因为分组一未指定 displayOrder
,分组二指定了 displayOrder
为 1,所以分组二会排在分组一的前面。
若需要对分组内的属性排序,也可以使用 displayOrder
。以分组二为例,目前是按照在脚本中定义的先后顺序进行排序,label2 在 sprite2 的前面。我们将其调整为:
// 分组二
// 组内名为 “bar” 的属性分类,其中包含名为 label2 的 Label 属性和名为 sprite2 的 Sprite 属性,并且指定排序为 1。
@property({ group: { name: 'bar2', id: '2', displayOrder: 1 }, displayOrder: 2, type: Label })
label2: Label = null!;
@property({ group: { name: 'bar2', id: '2' }, displayOrder: 1, type: Sprite })
sprite2: Sprite = null!;
内置类型界面
针对一些常用类型,引擎内部提供了默认界面,开发者可以根据自身的需求使用:
- 颜色界面:
代码示例如下:
@property(Color)
color:Color
- 曲线:用于保存曲线类型、样式以及采样数据。
代码示例如下:
@property(RealCurve)
realCurve:RealCurve = new RealCurve();
- 曲线范围:可以通过常量、曲线、双曲线或双常量进行控制。
代码示例如下:
@property(CurveRange)
curveRang : CurveRange = new CurveRange();
- 渐变色:记录渐变色的关键值和用于计算渐变色的结果
代码示例如下:
@property(Gradient)
gradient = new Gradient();
- 渐变色范围:通过颜色、渐变色、双颜色或双渐变色控制颜色
代码示例如下:
@property(GradientRange)
gradientRange:GradientRange = new GradientRange();