使用 cc.Class 宣告型別

cc.Class 是一個很常用的 API，用於宣告 Cocos Creator 中的類，為了方便區分，我們把使用 cc.Class 宣告的類叫做CCClass。

定義 CCClass

呼叫 cc.Class，傳入一個原型物件，在原型物件中以鍵值對的形式設定所需的型別引數，就能創建出所需要的類。

var Sprite = cc.Class({
    name: "sprite"
});

以上程式碼用 cc.Class 建立了一個型別，並且賦給了 Sprite 變數。同時還將類名設為 "sprite"，類名用於序列化，一般可以省略。

例項化

Sprite

var obj = new Sprite();

判斷型別

需要做型別判斷時，可以用 JavaScript 原生的 instanceof：

cc.log(obj instanceof Sprite);       // true

建構函式

使用 ctor 宣告建構函式：

var Sprite = cc.Class({
    ctor: function () {
        cc.log(this instanceof Sprite);    // true
    }
});

Component 是特殊的 CCClass，不能定義建構函式，它的構造職能可由 onLoad

 方法代替。

例項方法

var Sprite = cc.Class({
    // 宣告一個名叫 "print" 的例項方法
    print: function () { }
});

繼承

使用 extends 實現繼承：

// 父類
var Shape = cc.Class();

// 子類
var Rect = cc.Class({
    extends: Shape
});

父建構函式

繼承後，CCClass 會統一自動呼叫父建構函式，你不需要顯式呼叫。

var Shape = cc.Class({
    ctor: function () {
        cc.log("Shape"
 
);    // 例項化時，父建構函式會自動呼叫，
    }
});

var Rect = cc.Class({
    extends: Shape
});

var Square = cc.Class({
    extends: Rect,
    ctor: function () {
        cc.log("Square");   // 再呼叫子建構函式
    }
});

var square = new Square();

以上程式碼將依次輸出 "Shape" 和 "Square"。

宣告屬性

通過在元件指令碼中宣告屬性，我們可以將指令碼元件中的欄位視覺化地展示在 屬性檢查器 中，從而方便地在場景中調整屬性值。

要宣告屬性，僅需要在 cc.Class 定義的 properties 欄位中，填寫屬性名字和屬性引數即可，如：

cc.Class({
    extends: cc.Component,
    properties: {
        userID: 20,
        userName: "Foobar"
    }
});

這時候，你可以在 屬性檢查器 中看到你剛剛定義的兩個屬性：

在 Cocos Creator 中，我們提供兩種形式的屬性宣告方法：

簡單宣告

在多數情況下，我們都可以使用簡單宣告。

• 當宣告的屬性為基本 JavaScript 型別時，可以直接賦予預設值：

    properties: {
        height: 20,       // number
        type: "actor",    // string
        loaded: false,    // boolean                
        target: null,     // object
    }

• 當宣告的屬性具備型別時（如：cc.Node，cc.Vec2 等），可以在宣告處填寫他們的建構函式來完成宣告，如：

    properties: {
        target: cc.Node,
        pos: cc.Vec2,
    }

• 當宣告屬性的型別繼承自 cc.ValueType 時（如：cc.Vec2，cc.Color 或 cc.Rect），除了上面的建構函式，還可以直接使用例項作為預設值：

    properties: {
        pos: new cc.Vec2(10, 20),
        color: new cc.Color(255, 255, 255, 128),
    }

• 當宣告屬性是一個數組時，可以在宣告處填寫他們的型別或建構函式來完成宣告，如：

    properties: {
        any: [],      // 不定義具體型別的陣列
        bools: [cc.Boolean],
        strings: [cc.String],
        floats: [cc.Float],
        ints: [cc.Integer],
  
        values: [cc.Vec2],
        nodes: [cc.Node],
        frames: [cc.SpriteFrame],
    }

注意：除了以上幾種情況，其他型別我們都需要使用完整宣告的方式來進行書寫。

完整宣告

有些情況下，我們需要為屬性宣告新增引數，這些引數控制了屬性在 屬性檢查器 中的顯示方式，以及屬性在場景序列化過程中的行為。例如：

properties: {
    score: {
        default: 0,
        displayName: "Score (player)",
        tooltip: "The score of player",
    }
}

以上程式碼為 score 屬性設定了三個引數 default, displayName 和 tooltip。這幾個引數分別指定了 score 的預設值為 0，在屬性檢查器 裡，其屬性名將顯示為：“Score (player)”，並且當滑鼠移到引數上時，顯示對應的 Tooltip。

下面是常用引數：

• default: 設定屬性的預設值，這個預設值僅在元件第一次新增到節點上時才會用到
• visible: 設為 false 則不在 屬性檢查器 面板中顯示該屬性
• serializable: 設為 false 則不序列化（儲存）該屬性
• displayName: 在 屬性檢查器 面板中顯示成指定名字
• tooltip: 在 屬性檢查器 面板中新增屬性的 Tooltip

更多的屬性引數，可閱讀 屬性引數

陣列宣告

陣列的 default 必須設定為 []，如果要在 屬性檢查器 中編輯，還需要設定 type 為建構函式，列舉，或者cc.Integer，cc.Float，cc.Boolean 和 cc.String。

properties: {
    names: {
        default: [],
        type: [cc.String]   // 用 type 指定陣列的每個元素都是字串型別
    },

    enemies: {
        default: [],
        type: [cc.Node]     // type 同樣寫成陣列，提高程式碼可讀性
    },
}

get/set 宣告

在屬性中設定了 get 或 set 以後，訪問屬性的時候，就能觸發預定義的 get 或 set 方法。定義方法如下：

properties: {
    width: {
        get: function () {
            return this._width;
        },
        set: function (value) {
            this._width = value;
        }
    }
}

如果你只定義 get 方法，那相當於屬性只讀。