Cocos技术派 | TS版属性面板定义高级用法

前一篇文章讲解了几种常见的属性定义方式，基本上看看就会了。
本篇将补充另外几个开发中会使用到的属性定义。

音频剪辑

音频剪辑是一个比较特殊的节点，它是一个资源，本质上其实是一个音频的url。

@property({
    type: cc.AudioClip,
    displayName:"背景音乐"
})
bgm: cc.AudioClip = null;

节点数组

定义一个数组，元素是cc.Node类型，同类型节点数组。

    @property([cc.AudioClip])
    effects: cc.AudioClip[] = [];

但是这样定义，引擎会给你报个警告。

当然我一般都不care这个警告，如果有强迫症的话可以改一下：

    @property({
        type: [cc.AudioClip],
        displayName: "音效"
    })
    effects: cc.AudioClip[] = [];

属性面板显示如下：

互斥面板

这是一个比较高级的用法，结合上一篇的性别选择下拉框，还有两个相关属性：年龄和身高。因为女人的年龄是比较敏感的，如果性别为女，则不显示年龄属性。效果如下：

实现这个效果，需要使用属性定义的visible关键字，官网文档只告诉我们这个字段是一个boolean，为true时显示，false则隐藏。
其实还可以是一个函数：

// 声明滑动条，不加type就是浮点值
    @property({
        type: cc.Integer,
        min: 0,
        max: 120,
        step: 1,
        slide: true,
        displayName: "年龄",
        visible() {
            return this.sex != SexyType.女;
        }
    })
    age = 32;

自定义类型

如果我们引用一个自定义类型，该怎么定义属性呢：

自定义类型虽然可以使用TS原生的Class，但是官方都说了，我们CCClass更丰富强大，所以我们使用CCClass。记住要点：

• 定义一个CCClass的子类，不需要继承Component
• 默认值使用类的实例对象

自定义玩家类

// Author：lerry（大掌教）
// 微信公众号ID：darkpalm
// Q群：704391772

const { ccclass, property } = cc._decorator;

// 使用注解定义一个CCClass，名称就是Player，括号内是参数
// 如果不传参，将会有意想不到的意外
@ccclass("Player")
export default class Player {

    @property({
        displayName: "昵称"
    })
    nickName = "大掌教";

    @property({
        displayName: "Q群"
    })
    qGroup = "704391772";
}

在MainGame.ts中引入这个类，增加自定义类的属性

@property(Player)
player: Player = new Player();

属性面板显示如下：
完整的属性面板如下：

上一篇加上这一篇，基本上讲完了TS属性定义的所有要点。还有什么疑问可以联系我。

关注我的公众号，回复【ts属性】可以获取源码

公众号ID：darkpalm