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

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

動的にデータリストを表示する方法ーCocosCreator

f:id:kusakabob:20180712164505p:plain


3つのコインが並んだ画像です。


コインの画像、名前、価値で一つのまとまりです。


これらを上記の画像のように配置するためには、画像を3つ、テキストを6つ作り、
それらを画面に配置する必要があります。


しかし、これは3つだから手作業でできるものの、100並べろと言われたら大分時間がかかります。


この記事ではそのような手間を省き、ゲームが開始するときに自動でデータを配置する方法を解説します。


この[List With Data]というチュートリアル記事を参考にしています。


http://www.cocos2d-x.org/docs/creator/manual/en/ui/list-with-data.html

全体の構造


f:id:kusakabob:20180712165131p:plain


これが完成時の編集画面です。


Sceneエディタの画面を見るとコインが3つ配置されていません。


3つのコインはコードで動的に画面に表示されます。


具体的にはEditor画面から各コインの持つ情報を登録し、
それをコードで処理し、画面に描画するということをしています。


f:id:kusakabob:20180712172122p:plain


ここを設定することで、表示するデータを決めることができます。


そのためのコードを見る前に、まずはNodeの構造を見ておきましょう。


画面を構成するためのNodeを作り、各NodeにComponentというコードロジックを付与して、ゲームを作るというワークフローがCocosCreatorでは採用されています。


なのでまずNodeの構造を把握すると理解が早いです。


Nodeの構造は以下の通り。


基本これだけです。


ゲームの動きを決めるロジックであるComponentは

  • ItemList.js
  • ItemTemplate.js


の2つです。


これらの役割をざっくり説明すると、


ItemListがテンプレを元にデータ作成
ItemTemplateがコインのテンプレ作成


を担当しています。


Component ItemListはItemList(Node)に紐づいています。


ItemTemplate.jsはItem(Node)に紐づいています。

prefabとは


先ほどNodeの構造は


だと書きましたが、実はItemというNodeが存在します。


これがNode Treeにないのはprefabというアセットデータに変換されているからです。


prefabとは、簡単に言うとNodeのテンプレートです。
沢山作る必要があるオブジェクト、例えば弾丸やコインなど、を生成するときに使われます。


今回の場合、

  • Item: 空のNode
    • name: Label Node
    • price: Label Node
    • icon: Sprite Node


という構造がprefabとして登録されています。


自分が作ったNodeをAssetsパネルにドラッグ&ドロップすると、


f:id:kusakabob:20180712170941p:plain


Assetsフォルダの一番下にItemという名のprefabができます。


このprefabはItemList(Node)に付与されます。
そして、ItemListに紐づいているScript ItemList.jsで利用されます。


一度Prefabを作れば、Node TreeのItem(Node)は消しても構いません。


しかし、Node Tree上にprefab化されたNodeがあると、それをクリックすることで編集ができ、propertiesパネルからセーブし同期ができるので、開発中は残しておくと良いです。


Node Treeから消してしまっても、Assets パネルからNode Tree パネルにドラッグ&ドロップすれば復活します。

prefabに紐づくスクリプト


コードを見ていきましょう。
このコードはItemTemplate.jsです。


f:id:kusakabob:20180712172821p:plain


Item(prefab)のitem Template propertyを定義しています。
このコードはprefabテンプレートに具体的なデータを設定していくという処理を行なっています。

cc.Class({
    extends: cc.Component,

    properties: { //prefabが持つデータを定義している。ここにItem配下のiconやpriceなどのNodeが設定される。
       id:0,
       icon:cc.Sprite,
       itemName:cc.Label,
       itemPrice:cc.Label,

    },

    init: function (data) { //引数で与えられたdata(具体的な画像やテキストのデータが入っている)をprefabに設定する。
        this.id = data.id;
        this.icon.spriteFrame = data.iconSF;
        this.itemName.string = data.itemName;
        this.itemPrice.string = data.itemPrice;
    }
});

ItemListに紐づくScript


ItemList.jsは登録されたデータを全てViewとして書き出しています。


個別具体的なデータはここで設定されています。


f:id:kusakabob:20180712172122p:plain

var Item = cc.Class({ //Item型を定義。
    name:'Item',
    properties:{
        id:0,
        itemName:'',
        itemPrice:0,
        iconSF:cc.SpriteFrame
    }

});

cc.Class({
    extends: cc.Component,

    properties: {
        items:{ //Item型が入るArray
            default: [], //item型データが入る配列
            type:Item, //先ほど定義したItem型

        },

        itemPrefab:cc.Prefab //prefabをここに登録する。

    },

    onLoad(){
        for(var i=0;i < this.items.length;++i){ //データの回数分繰り返す。
            var item = cc.instantiate(this.itemPrefab); //prefabを元にインスタンス(クラスの実装)を作る。
            var data = this.items[i]; //~番目のデータをここに入れる。
            this.node.addChild(item); this.node = ItemList Node配下にインスタンスを作成。

            item.getComponent('ItemTemplate').init({ // ItemTemplateクラスからinitを呼び出す。具体的なデータの値を元にインスタンスを初期化。
                id:data.id,
                itemName:data.itemName,
                itemPrice:data.itemPrice,
                iconSF:data.iconSF
            });
        }
    }
});


まとめると、

  • Nodeのテンプレ作る。
  • 値をeditorから受け取る。
  • その値をテンプレに当てはめる。
  • 作られたNodeを表示する。


といった流れになっています。

所感


レーザーやコイン、エフェクトなどたくさん表示する可能性があるものはprefabを使うと良いですね。


prefabはよく使うので今後も記事を書いていこうと思います。