ブロックチェーンゲーム制作チェーン -Minimal Arcade Medal-

ブロックチェーン技術、ゲーム作成のためのコード、ドット絵やアニメーションの作り方を解説するブログです。最終的に記事の内容を組み合わせることで誰でもブロックチェーンゲームが作れるようにしたいです。Micro Arcade MedalというdApps開発中です。

値をゲーム実行中に変更する方法ーCocosCreator

NodeやComponentの値を変更することで、ゲーム内オブジェクトを好きなように操ることができます。


NodeとComponentの値の変更の仕方は2つあります。


1つがPropertiesパネルで値を変更する方法で、
もう1つがコードで動的に変更する方法です。


2つ目の方法は言い換えれば、ゲーム起動中に値を変更するということです。


これはリアルタイムでプレイヤーからのインプットを受け取り、NodeとComponentを生成、変更、削除するという、ゲームを作る上では欠かせない機能です。


そのためにはコード*1からNodeや別のComponentの値を参照しなければいけません。



この記事ではその参照方法をまとめます。

自身が属しているNodeの値を参照する

start: function () {
        var node = this.node;
        node.x = 100;
    }


基本的にComponentとNodeは紐づけられています。


Component自身が紐づけられているNodeを参照する場合


this.nodeを使えば良いです。

同じNodeの、別Componentを参照する


Nodeは複数のComponentを持つことができます。


Componentから同じNodeに属している別のComponentの値への参照を得る場合、


getComponentを使います。

start: function () {
        var label = this.getComponent(cc.Label);
        var text = this.name + ' started';

        // Change the text in Label Component
        label.string = text;
    }


getComponent()の引数にはクラス*2が入ります。

上のケースだとcc.Label Componentを獲得します。


また、引数にComponentの名前*3をとることができます。
これで自らが定義したComponentへの参照を得ることができます。

var rotate = this.getComponent("SinRotate");


該当するComponentがない場合、getComponentはTypeErrorを返します。

別NodeのComponentの値を参照する


敵がプレイヤーの位置を特定して追いかけてくる、といったときに敵NodeからプレイヤーNodeのComponentの値を参照する必要があります。


一番簡単な方法はPropertiesパネルを使う方法です。

cc.Class({
    extends: cc.Component,
    properties: {
        // declare player property
        sprite: {
            default: null,
            type: cc.Node
        },
        obj: {
            default: null,
            type: cc.Node
        },

     ...

    }
});


上のようにtypeがNodeのpropertyを宣言すると、
下の画像のようにボックスがpropertyパネルに現れます。


f:id:kusakabob:20180717221019p:plain


ここにNode Treeから対応するNodeをドラッグ&ドロップすると、そのNodeへの参照を得ることができます。

this.spriteやthis.objといった具合です。


そしてそれらのNodeのComponentにアクセスする場合、this.sprite.getComponent()を使えば良いです。

Child Nodeを参照する


同じタイプのたくさんのオブジェクト*4をゲーム画面に登場させたい場合、
それらのオブジェクトをひとつの親Nodeの子供Nodeとすることで、親Nodeから全てのオブジェクトにアクセスすることができます。

cc.Class({
    extends: cc.Component,

    start: function () {
        var cannons = this.node.children;
        // ...
    }
});


名前で特定のNodeを指定することもできます。

this.node.getChildByName("Cannon 01");


また階層が深い場合はcc.findが使えます。

this.backNode = cc.find("Canvas/Menu/SFX",this.node);


cc.findの2つ目の引数this.nodeを消すことにより、root Node以下の全てのNodeから検索を行います。



上記の方法でNodeやComponentへの参照を獲得することにより、それらのPropertyにアクセスして値を変更することができます。

*1:Component

*2:Componentの種類

*3:ファイル名、大文字小文字の区別がある

*4:敵や特殊効果