定义一个属性_CocosCreator脚本属性个性化定制 ——下拉列表属性、滑动条属性...

本是古典何须时尚 2023-01-07 07:26 158阅读 0赞

![537f477c5c15de03f7259d6a54b0ee07.png][]

### 一、声明属性 ###

要声明属性，需要在 cc.Class 定义的 properties 字段中，填写属性名字和属性参数。在此处声明的属性在Cocos Creator编辑器属性检查器面板中可以读取和编辑。如下：

![1a0bc9354751d7a6a275379a75949338.png][]

### 二、下拉列表 ###

要在属性检查器上显示为下拉列表的样式，需设置属性类型为枚举，并设置默认值为枚举值。为了设置为枚举，需定义一个枚举类型，可以使用Cocos提供的cc.Enum定义枚举。

![d4efa911e62e5859c28ea9688d55e6e1.png][]

### 1. 中文下拉选项文字 ###

要想定义中文的下拉选项文字，必须使用cc.Enum。

![c7bc52c67c31abcad5d2c64a7264d979.png][]

### 2. 动态设置属性的可见性（类似级联下拉列表） ###

要想选择不同的下拉选项，在属性面板上显示或隐藏不同的属性，需把要动态设置可见性的属性的visible写成函数的形式，并在函数中根据不同的情况返回不同的布尔值。

![e6ee9ae8d31191d5a5c5db74e2b240b9.png][]

### 三、滑动条 ###

实现滑动条样式需设置属性的min，max，step，并把slide设置为true。

![ef5f3bde4466fad4afd0688f031c5743.png][]

### 四、回调函数 ###

要想在属性面板绑定回调函数，需设置属性的type为cc.Component.EventHandler，设置默认值为空，并且在构造函数中初始化属性为cc.Component.EventHandler的实例。

![40ca1d2620a9dd56d9a269da4f5e4dc6.png][]

### 五、自定义类 ###

用自定义类定义一个属性，可实现对多个属性分组。用cc.Class定义一个类，并设置name为类名。然后设置属性的type为自定义类的类名，设置默认值为空。然后在构造函数里实例化属性值。

![e540465dd635abc10d6ee4bca73117ad.png][]

### 六、实时预览 ###

要想在属性面板上设置的值产生的效果可以在编辑器中实时预览，需要让脚本在编辑器模式下运行。为此，需要在类中定义editor属性，并设置executeInEditMode为true。而editor 只能定义在 cc.Component 的子类中。而在设置过面板上的数据后，还要用属性notify来更新状态。下面举个例子：有三个label，用一个可以在面板上设置的数值来控制显示的label的个数。如下图所示效果（设置Label Num的值为2，则只显示前面两个Label）：

![3588292988e4fd17fac8b6009f08fc31.png][]

实现代码PropViewNow如下：

### 七、其他样式 ###

锁定：设置readonly为true。文本框：把属性的默认值设置为字符串字面量，若想初始文本为空，则设置空的字符串。无需设置type。整数数值：要想使属性在属性面板上只接受整数，需把属性的type设置为cc.Integer。若不设置type，把默认值设置为数值，则表示属性为浮点数。

![56d586cb6b1ba7913c1aa4681b71c77d.png][]

### 八、属性类型定义方式总结 ###

1、当属性类型为基本类型时：用字面量设置其默认值。完整声明时也无需设置type。

![6b8d51ef4a2166142548ce29d8224d1a.png][]

2、当属性类型为cc.ValueType的子类时：设置默认值为该类的实例，或者在简单声明中填写其构造函数。这些类有：cc.Color，cc.Vec2，cc.Rect等。

![a9132d16311d31b34cc3d1a15e35e33d.png][]

3、当属性类型为其他类时：把属性的type设置为其构造函数，默认值设置为null或者\{\}，或者在简单声明中设置其构造函数。若想在面板上显示非空的值，需要在ctor里面用实例初始化这个属性。

![49a32b3578b3e636db33f40bd11678df.png][]

![35cc6ccdc2fcb768344e837666ae772d.gif][]

[537f477c5c15de03f7259d6a54b0ee07.png]: /images/20221119/26d6bbccfd1c4636ba4f7c7726264ca1.png
[1a0bc9354751d7a6a275379a75949338.png]: /images/20221119/802e5a664f2e4b8aa05adedccda987ae.png
[d4efa911e62e5859c28ea9688d55e6e1.png]: /images/20221119/aedcccc1c1c546788616b8f53efecf3e.png
[c7bc52c67c31abcad5d2c64a7264d979.png]: /images/20221119/04edc930e5bb49ccb2280ac03f2f0bed.png
[e6ee9ae8d31191d5a5c5db74e2b240b9.png]: /images/20221119/e5e570936dd14ddfb41574b2a9efcf5b.png
[ef5f3bde4466fad4afd0688f031c5743.png]: /images/20221119/53e3f03916a84e309f80c2d4f8144684.png
[40ca1d2620a9dd56d9a269da4f5e4dc6.png]: /images/20221119/adf16747bf08469e90d0256bfab74399.png
[e540465dd635abc10d6ee4bca73117ad.png]: /images/20221119/208fa7a6168a4886a589719d0e715dc4.png
[3588292988e4fd17fac8b6009f08fc31.png]: /images/20221119/527ac0ad7c6147cebc1114cc92e67197.png
[56d586cb6b1ba7913c1aa4681b71c77d.png]: /images/20221119/2fe43c22fb244e43b810357c4e5b7442.png
[6b8d51ef4a2166142548ce29d8224d1a.png]: /images/20221119/caf10fe0104c472f81b023f77e0586dd.png
[a9132d16311d31b34cc3d1a15e35e33d.png]: /images/20221119/6604d3c6000a4252af6e7bc8e6abee7c.png
[49a32b3578b3e636db33f40bd11678df.png]: /images/20221119/f59e58b991144c08a5f359935cd6f8f4.png
[35cc6ccdc2fcb768344e837666ae772d.gif]: /images/20221119/a85aac0f0a1843d1a3990c45932508cf.png