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群：704391772const { 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