CocosCreator編碼貼士:組件不等于Node

一開始的時候會搞不清楚這兩者的關系,但是在經歷多次報錯的教育之后終于銘記住了這兩者之間的不同锋爪。先看下圖所示的組件


新建一個渲染節(jié)點->Sprite并命名為'Item'后在右側屬性檢查器里面會發(fā)現該節(jié)點所有屬性被分為了兩個類別丙曙,位于上方的是Node(含有x,y,anchor等定位屬性及color, opacity等顏色透明度屬性),位于下方的是Sprite(含有紋理及混合模式等屬性)其骄。為什么'Item'的屬性會被分為Node和Sprite兩個類別呢亏镰?因為在cocosCreator里面所有節(jié)點都不是獨立存在的,它們是由若干個組件堆砌在一起的拯爽,每堆砌一個組件就多一個功能索抓。如果我們在creator的編輯器里面新建一個空節(jié)點,那么該節(jié)點僅由Node組件組成毯炮,如果新建一個Sprite節(jié)點逼肯,那么該節(jié)點將會由Node組件(每個節(jié)點的根組件均為Node組件)和Sprite組件組成,就像我們剛才新建的'Item'節(jié)點一樣桃煎。
因此篮幢,在寫代碼對節(jié)點進行操作的時候必須時刻記得我們要操作的屬性是屬于哪個組件的。下圖中为迈,我們新建了一個Script命名為Item洲拇,并將其掛載到剛才新建的Item節(jié)點上面奈揍。

下面是Item這個Script文件的代碼:

cc.Class({
    extends: cc.Component,
    
    onLoad: function () {
        this.node.spriteFrame = xx;
    },
});

我們在這個腳本中企圖對節(jié)點Item的紋理進行更改,于是在onLoad中使用了this.node.spriteFrame = xx;這樣的代碼赋续,但是最終執(zhí)行時并無法得到我們預想的結果。原因在于我們操作的屬性spriteFrame并不在Node組件上另患,而是在Sprite組件上纽乱。所以,要想達到預期效果昆箕,就必須使用getComponent方法先獲取到我們要操作屬性所屬的組件后再進行屬性修改動作:

cc.Class({
    extends: cc.Component,
    
    onLoad: function () {
        this.node.getComponent(cc.Sprite).spriteFrame = xx;
    },
});

代碼改成上面這樣就一切OK了鸦列。再接下來看另一個例子,假如我們在Item這個Script文件里面需要持有另一個文本節(jié)點的引用鹏倘,并在onLoad里面對此文本節(jié)點進行更改顯示的文字的操作薯嗤,那么代碼如下:

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Node
        }
    },
    
    onLoad: function () {
        this.label.string = 'xxx';
    }
});

然后在creator編輯器里面新建一個Label節(jié)點到舞臺上并把他拖拽進Item節(jié)點的Item這個腳本組件的label屬性里面去


運行項目后發(fā)現無法達到預期效果,這是什么原因呢纤泵?有同學可以回答我嗎骆姐?這位同學回答得非常好,原因和剛才我們舉的例子一樣捏题,是因為我們操作的屬性string屬于cc.Label組件玻褪,而不屬于cc.Node組件,而我們在onLoad方法里獲取到的this.label其實上是一個cc.Node組件公荧,因為我們在屬性聲明語句里聲明了它的類型就是cc.Node:

  properties: {
        label: {
            default: null,
            type: cc.Node //聲明了其類型為cc.Node
        }
    }
});

要解決此問題带射,有兩種方法,其一就是在聲明label屬性時規(guī)定其類別為cc.Label

  properties: {
        label: {
            default: null,
            type: cc.Label //聲明了其類型為cc.Label
        }
    }
});

其二就是和之前舉的例子一樣循狰,使用getComponent方法先窟社,然后再操作屬性

    onLoad: function () {
        this.label.getComponent(cc.Label).string = 'xxx';
    }
});

具體使用什么方式主要還是看哪一種比較方便,如果你在Item這個腳本組件中需要頻繁修改label的string屬性绪钥,那么就把label聲明成cc.Label類型灿里,如果需要頻繁修改label的位置,那么就聲明成cc.Node(因為x,y屬性屬于cc.Node組件)昧识,如果你把label聲明成了cc.Label類型后想修改其位置钠四,需要使用this.label.node.x = 123這樣的代碼,不能漏掉.node跪楞,這一段缀去,因為需要先取到cc.Node組件后才能操作x屬性。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末甸祭,一起剝皮案震驚了整個濱河市缕碎,隨后出現的幾起案子,更是在濱河造成了極大的恐慌池户,老刑警劉巖咏雌,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凡怎,死亡現場離奇詭異,居然都是意外死亡赊抖,警方通過查閱死者的電腦和手機统倒,發(fā)現死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氛雪,“玉大人房匆,你說我怎么就攤上這事”叮” “怎么了浴鸿?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長弦追。 經常有香客問我岳链,道長,這世上最難降的妖魔是什么劲件? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任掸哑,我火速辦了婚禮,結果婚禮上寇仓,老公的妹妹穿的比我還像新娘举户。我一直安慰自己,他們只是感情好遍烦,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布俭嘁。 她就那樣靜靜地躺著,像睡著了一般服猪。 火紅的嫁衣襯著肌膚如雪供填。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天罢猪,我揣著相機與錄音近她,去河邊找鬼。 笑死膳帕,一個胖子當著我的面吹牛粘捎,可吹牛的內容都是我干的。 我是一名探鬼主播危彩,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼攒磨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了汤徽?” 一聲冷哼從身側響起娩缰,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谒府,沒想到半個月后拼坎,有當地人在樹林里發(fā)現了一具尸體浮毯,經...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年泰鸡,在試婚紗的時候發(fā)現自己被綠了债蓝。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸟顺,死狀恐怖惦蚊,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情讯嫂,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布兆沙,位于F島的核電站欧芽,受9級特大地震影響,放射性物質發(fā)生泄漏葛圃。R本人自食惡果不足惜千扔,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望库正。 院中可真熱鬧曲楚,春花似錦、人聲如沸褥符。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽喷楣。三九已至趟大,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铣焊,已是汗流浹背逊朽。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留曲伊,地道東北人叽讳。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像坟募,于是被迫代替她去往敵國和親岛蚤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內容

  • (三)訪問節(jié)點和組件 你可以在 屬性檢查器 里修改節(jié)點和組件婿屹,也能在腳本中動態(tài)修改灭美。動態(tài)修改的好處是能夠在一段時間...
    菜鳥_一枚閱讀 802評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現昂利,斷路器届腐,智...
    卡卡羅2017閱讀 134,652評論 18 139
  • 一铁坎、基本內容: 1.cc.Label相關: (1)動態(tài)創(chuàng)建cc.Label : var node = new cc...
    工匠良辰閱讀 1,267評論 0 1
  • main {width:220px;height:300px;border:1px solid black;dis...
    jh2k15閱讀 339評論 0 0
  • 群里是幾個因愛書而識但從未見過的朋友,很喜歡一個姑娘說“書簽就像是書的伴侶”的說法犁苏,我的每本書都有一個書簽硬萍,最近就...
    奴隸主閱讀 366評論 1 2