從零開(kāi)始學(xué)習(xí)Cocos Creator(一):CCClass

CCClass是Cocos Creator(以下簡(jiǎn)稱(chēng)CCC)中的基礎(chǔ)類(lèi)宣增,可以理解為CCC中的最小元數(shù)據(jù)才沧,只有聲明為CCClass才能被CCC所管理和使用娩脾。
CCClass是基于原型模式所創(chuàng)建籍琳,所以只需要在創(chuàng)建的時(shí)候傳入所需的類(lèi)型和參數(shù)即可

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

CCClass的結(jié)構(gòu)為

cc.Class({

    // 類(lèi)名辰妙,用于序列化
    // 值類(lèi)型:String
    name: "Character",

    // 基類(lèi)压状,可以是任意創(chuàng)建好的 cc.Class
    // 值類(lèi)型:Function
    extends: cc.Component,

    // 構(gòu)造函數(shù)
    // 值類(lèi)型:Function
    ctor: function () {},

    // 屬性定義(方式一仆抵,直接定義)
    properties: {
        text: ""
    },

    // 屬性定義(方式二,使用 ES6 的箭頭函數(shù)种冬,詳見(jiàn)下文)
    properties: () => ({
        text: ""
    }),

    // 實(shí)例方法
    print: function () {
        cc.log(this.text);
    },

    // 靜態(tài)成員定義
    // 值類(lèi)型:Object
    statics: {
        _count: 0,
        getCount: function () {}
    },

    // 提供給 Component 的子類(lèi)專(zhuān)用的參數(shù)字段
    // 值類(lèi)型:Object
    editor: {
        disallowMultiple: true
    }
});

其中所有的參數(shù)都可以忽略镣丑,只需要按需傳入聲明即可。

構(gòu)造函數(shù)

CCClass中使用ctor來(lái)聲明構(gòu)造函數(shù)娱两,從編寫(xiě)習(xí)慣上來(lái)說(shuō)推薦在構(gòu)造函數(shù)中進(jìn)行所有的變量聲明(需要使用屬性檢查器傳入的組件不包括在內(nèi))莺匠,避免隨處聲明變量使代碼維護(hù)性和可讀性變差。

var Shape = cc.Class({
    ctor: function () {
        this.prop1 = "初始化一個(gè)屬性"
        cc.log("Shape"); 
    }
});

繼承

CCClass中使用extends來(lái)聲明繼承關(guān)系十兢,當(dāng)兩個(gè)CCClass屬于繼承關(guān)系時(shí)趣竣,CCClass會(huì)統(tǒng)一調(diào)用父構(gòu)造器并且逐級(jí)的調(diào)用到所有的子構(gòu)造器摇庙,因此不需要顯示的調(diào)用父構(gòu)造器來(lái)獲得一些繼承下來(lái)的屬性。

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

// 子類(lèi)
var Rect = cc.Class({
    extends: Shape
});
var Shape = cc.Class({
    ctor: function () {
        cc.log("Shape");    // 實(shí)例化時(shí)遥缕,父構(gòu)造函數(shù)會(huì)自動(dòng)調(diào)用卫袒,
    }
});

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

var Square = cc.Class({
    extends: Rect,
    ctor: function () {
        cc.log("Square");   // 再調(diào)用子構(gòu)造函數(shù)
    }
});

var square = new Square();

//以上代碼將依次輸出 "Shape" 和 "Square"。

聲明屬性

CCC中提供一種可以在可視化開(kāi)發(fā)工具中快速調(diào)整的屬性聲明方式单匣,也就是屬性檢查器夕凝;使用properties進(jìn)行聲明。

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

這時(shí)候户秤,你可以在 屬性檢查器 中看到你剛剛定義的兩個(gè)屬性:


image

CCC中提供兩種聲明方式與Vue中的prop聲明類(lèi)似码秉,分別為簡(jiǎn)單聲明和完整聲明:
粗體

 properties: {
      height: 20,       // number
      type: "actor",    // string
      loaded: false,    // boolean                
      target: null,     // object
      target: cc.Node, //聲明為CCClass類(lèi)型
      pos: new cc.Vec2(10, 20), //聲明時(shí)直接實(shí)例化一個(gè)對(duì)象
      any: [],//定義一個(gè)不限類(lèi)型的數(shù)組
      bools: [cc.Boolean],//定義一個(gè)布爾類(lèi)型的數(shù)組
  }

完整聲明
properties: {
score: {
default: 0,//默認(rèn)值
displayName: "Score (player)",//在可視化開(kāi)發(fā)界面中的名字
tooltip: "The score of player",//可視化界面的提示消息
visible:bool,//是否顯示在可視化界面中
serializable:bool,//是否序列化
type:type,//指定類(lèi)型
}
}
get/set聲明

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

屬性檢查器和構(gòu)造函數(shù)的區(qū)別在于,構(gòu)造函數(shù)聲明一定不會(huì)出現(xiàn)在可視化界面上鸡号,適用于完全不需要調(diào)試只會(huì)被代碼所影響的聲明转砖,屬性檢查器可以幫助快速的調(diào)試,并且提供了是否顯示在可視化界面的選項(xiàng)鲸伴。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末府蔗,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子挑围,更是在濱河造成了極大的恐慌礁竞,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件杉辙,死亡現(xiàn)場(chǎng)離奇詭異模捂,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)蜘矢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)狂男,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人品腹,你說(shuō)我怎么就攤上這事岖食。” “怎么了舞吭?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵泡垃,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我羡鸥,道長(zhǎng)蔑穴,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任惧浴,我火速辦了婚禮存和,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己捐腿,他們只是感情好纵朋,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著茄袖,像睡著了一般操软。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绞佩,一...
    開(kāi)封第一講書(shū)人閱讀 49,821評(píng)論 1 290
  • 那天寺鸥,我揣著相機(jī)與錄音,去河邊找鬼品山。 笑死,一個(gè)胖子當(dāng)著我的面吹牛烤低,可吹牛的內(nèi)容都是我干的肘交。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼扑馁,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼涯呻!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起腻要,我...
    開(kāi)封第一講書(shū)人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤复罐,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后雄家,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體效诅,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年趟济,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了乱投。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡顷编,死狀恐怖戚炫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情媳纬,我是刑警寧澤双肤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站钮惠,受9級(jí)特大地震影響茅糜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜萌腿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一限匣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦米死、人聲如沸锌历。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)究西。三九已至,卻和暖如春物喷,著一層夾襖步出監(jiān)牢的瞬間卤材,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工峦失, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留扇丛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓尉辑,卻偏偏與公主長(zhǎng)得像帆精,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子隧魄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容