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

张晓衡

发布于 2019-09-11 18:11:54

1.4K0

发布于 2019-09-11 18:11:54

文章被收录于专栏：Creator星球游戏开发社区Creator星球游戏开发社区

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

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

音频剪辑

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

@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则隐藏。其实visible还可以是一个函数：

// 声明滑动条，不加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属性定义的所有要点。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-06-25，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自 Creator星球游戏开发社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度