読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

addChild、addComponentについて:Cocos Creator

 まだ理解が浅いので、解釈など間違っているかもしれませんが、確認した内容を書きます。
 今回は、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; // スプライトに画像を設定
    },

追加できるコンポーネントは1種類につき1個まで

 ノードに追加できるコンポーネントは、1種類につき1個までです。
 『Properties』パネルの『Add Component』で、同じ種類のコンポーネントを追加しようとすると
f:id:mmorley:20160412212633p:plain:w300
と明確にダメ!と表示されます。
 
 スクリプトで、同じ種類のコンポーネント追加する処理をしても警告は出ません。上書きされているっぽいです。
 初見では『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); // コンポーネントを削除
    },

 しかし、次のように繰り返すと2回目は消えません。

    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』の引数に実体を渡すと2回目もスプライトが消せました。

    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); // コンポーネントを削除
    },

 2回繰り返すことは普通ないと思いますが、気になります。

『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』です。

広告を非表示にする