CocosCreator 屬性面板設置 (property)

版本:2.4.2

參考：

cocos教程：屬性參數參考

Cocos技術派 | TS版各種屬性聲明詳解

Cocos技術派 | TS版屬性面板定義高級篇

 

普通定義  cc.Integer/cc.String/cc.Node/cc.Prefab

    @property(cc.Integer)  //數字
    public num:number = 0;

    @property(cc.String)   //字符串
    public str:string = "";

    @property(cc.Node)     //cc.Node
    public topNode:cc.Node = null;

    @property(cc.Prefab)   //預制體cc.Prefab
    public prefab:cc.Prefab = null;

 

提示  displayName/tooltip

給屬性取一個別名，並增加一個提示

    @property({type:cc.Integer, displayName:"金幣", tooltip:"金幣數量"})
    public goldNum:number = 0;

 

數字最大值/最小值/步長   min/max/step

限制范圍10-100，如果輸入超出范圍的數字，則會自動變更。例如輸入5，會自動變成10；輸入999會自動變成100。

點擊屬性框的上下箭頭，變化值為步長step。例如點上箭頭每次增加值為5。

    @property({type:cc.Integer, min:10, max:100,step:5})
    public goldNum:number = 0;

 

數字滑動條  slide

范圍0-100的滑動條

    @property({type:cc.Integer, min:0, max:100,slide:true})
    public goldNum:number = 0;

 

下拉菜單 + 顯示隱藏   Enum/visible

定義一個性別的下拉菜單，當選擇男人時，顯示男人年齡；當選擇女人時，顯示女人年齡。

const {ccclass, property} = cc._decorator;

export enum SexyType{
    man=1,
    woman=2
}

@ccclass
export default class HelloScene extends cc.Component {

    @property({type:cc.Enum(SexyType),tooltip:"性別"})
    sex:SexyType = SexyType.man;

    @property({type:cc.Integer,visible(){return this.sex == SexyType.man}})
    manAge = 1;

    @property({type:cc.Integer,visible(){return this.sex == SexyType.woman}})
    womanAge = 1;
    
}

　　

下拉菜單如下圖：

 

選擇男人時，屬性面板只顯示男人年齡Man Age

 

選擇女人時，屬性面板只顯示女人年齡Woman Age

 

值改變通知 notify

notify不支持ES6定義方式？反正我用TS沒有這個屬性。所以用get/set實現改變值通知。

實現金幣的set/get方法，每當在屬性面板變更goldNum，label的文本也會跟着變化。

這個set/get方式同時具有默認值效果，屬性面板會顯示默認值15。

    @property(cc.Label)   //金幣文本
    public label:cc.Label = null;

    @property(cc.Integer) //金幣get/set方法
    public get goldNum(){
        return this._goldNum;
    }
    public set goldNum(value){
        this._goldNum = value;
        this.label.string = this._goldNum + "";  //每當金幣變化，則設置label文本
    }    

    /**金幣數量 */
    private _goldNum:number = 15;

　　

 

數組  

比如你有排行榜前3名文本，則可以使用數組來添加屬性。

    @property([cc.Label]) //文本列表
    public labelList:cc.Label[] = [];

 

下划線屬性名不顯示

_labelList2下划線命名，默認隱藏，在屬性面板不會顯示出來

    @property([cc.Label]) //文本列表
    public labelList:cc.Label[] = [];

    @property([cc.Label]) //文本列表
    public _labelList2:cc.Label[] = [];