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

大掌教，从事游戏开发多年，精通 Cocos/Unity 等游戏引擎，精通安卓/iOS/H5等多种平台开发，发表过多个开源项目和 100 多篇原创博文，经验丰富，技术精湛。

紧接上次话题，今天将补充TS属性定义的高级心法~

1

音频剪辑

音频剪辑是一个比较特殊的节点，它是一个资源，本质上其实是一个音频的url，但是我们不能直接使用string来定义。

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

2

节点数组

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

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

但是这样定义，引擎会给你报个警告。
当然我一般都不care这个警告的，如果有强迫症的话可以改一下：

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

属性面板显示如下：

3

互斥面板

 

这是一个比较高级的用法，结合上一篇的性别选择下拉框，还有两个相关属性：年龄和身高。因为女人的年龄是比较敏感的，如果性别为女，则不显示年龄属性。效果如下：
实现这个效果，需要使用属性定义的visible关键字，官网文档只告诉我们这个字段是一个boolean，为true时显示，false则隐藏。
其实visible还可以是一个函数：

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

4

自定义类型

如果我们引用一个自定义类型，该怎么定义属性呢：
自定义类型虽然可以使用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属性】可以获取源码，好文章记得要分享哦~~

1. 大神驾到 |「大掌教」Cocos3D组件详解

2. Creator MVVM方案—为人生节省时间！
   

3. CreatorPrimer 30篇教程汇总
   

4. 贝塞尔曲线动作小工具

5. Creator2.x摄像跟随实现RPG地图
   

6. Cocos实现对ETC2的支持

7. CreatorPrimer|组件编码心得(上)
   

8. CreatorPrimer|组件编码心得(中)

9. CreatorPrimer|组件编码心得(下)
   

10. 2D MMO中角色动画的优化总结