一開始的時候會搞不清楚這兩者的關系,但是在經歷多次報錯的教育之后終于銘記住了這兩者之間的不同锋爪。先看下圖所示的組件
新建一個渲染節(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屬性。