まだ理解が浅いので、解釈など間違っているかもしれませんが、確認した内容を書きます。
今回は、addChild、addComponentについて。
目次
使用環境
私が使用している環境です。
- Mac OS X El Capitan Version 10.11.4
- Cocos Creator Version 1.0
- ブラウザ：Google Chrome Version 49.0.2623.112 (64-bit)
スクリプトでコンポーネントを追加
スクリプトでコンポーネントを追加するには、次のように書きます。
このノードは『Create』-『Create Empty Node』で作成した空のノードです。
properties: { BackgroundSF: { // 背景の画像、『Properties』パネルで画像を設定 type: cc.SpriteFrame, default: null, }, }, onLoad: function () { var component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 },
追加できるコンポーネントは１種類につき１個まで
ノードに追加できるコンポーネントは、１種類につき１個までです。
『Properties』パネルの『Add Component』で、同じ種類のコンポーネントを追加しようとすると
と明確にダメ！と表示されます。
スクリプトで、同じ種類のコンポーネント追加する処理をしても警告は出ません。上書きされているっぽいです。
初見では『Cocos Studio2』の『node.addChild()』の代わりが『node.addComponent()』なのかと勘違いしましたが違いましたね。
『cc.Sprite』を繰り返し『addComponent()』しても親子の階層にはなりません。
スクリプトで子ノードを追加
子ノードを追加して、スプライトを親子の階層にするには、次のように書きます。
このノードは『Create』-『Create Empty Node』で作成した空のノードです。
properties: { BackgroundSF: { // 背景用の画像、『Properties』パネルで画像を設定 type: cc.SpriteFrame, default: null, }, ChildNodeSF: { // ChildNode用の画像、『Properties』パネルで画像を設定 type: cc.SpriteFrame, default: null, }, }, onLoad: function () { // 親ノードにスプライトを設定 var component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 // 子ノード作成 var childNode = new cc.Node("child_1"); // "child_1"という名前でノードを作成 component = childNode.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.ChildNodeSF; // スプライトに画像を設定 this.node.addChild(childNode); },
『Cocos Creater』にも同機能で『addChild』ありましたね。。。
子ノード.parent = 親ノード
上記のコードの最後の『 this.node.addChild(childNode); 』は次のようにも書けます。
childNode.parent = this.node;
スクリプトでコンポーネントを削除
『node.removeComponent()』の引数
コンポーネントを削除する『removeComponent()』は、『API Reference』の目次にはあるのに説明がありません。
試しに、次のように『removeComponent』の引数を『cc.Sprite』するとスプライトが消せました。
onLoad: function () { // 親ノードにスプライトを設定 var component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 this.node.removeComponent(cc.Sprite); // コンポーネントを削除 },
しかし、次のように繰り返すと２回目は消えません。
onLoad: function () { var component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 this.node.removeComponent(cc.Sprite); // コンポーネントを削除 component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 this.node.removeComponent(cc.Sprite); // コンポーネントを削除 },
次のように『removeComponent』の引数に実体を渡すと２回目もスプライトが消せました。
onLoad: function () { var component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 this.node.removeComponent(component); // コンポーネントを削除 component = this.node.addComponent(cc.Sprite); // ノードに追加したcc.Spriteコンポーネントを取得 component.spriteFrame = this.BackgroundSF; // スプライトに画像を設定 this.node.removeComponent(component); // コンポーネントを削除 },
２回繰り返すことは普通ないと思いますが、気になります。
『node.removeComponent()』の中身
『CCNode.js』の『emoveComponent()』は次のように書かれていました。
removeComponent: function (component) {
if ( !component ) {
cc.error('removeComponent: Component must be non-nil');
return;
}
if (typeof component !== 'object') {
component = this.getComponent(component);
}
if (component) {
component.destroy();
}
}, コンポーネントの実体を保持している場合は単に『component.destroy()』でもいいんですね。
保持してない場合は『removeComponent(cc.Sprite)』ですが、さきほどの現象が気になります。
あとがき
感覚的には『Cocos Sprite2』の『cc.Sprite』は、『Cocos Creater』では『cc.Node』+『cc.Sprite』です。
