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

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

ゲーム画面の作り方ーCocosCreator

f:id:kusakabob:20180716154411p:plain


CocosCreatorでのゲーム画面の構成方法について説明します。

NodeとComponent


CocosCreatorはゲーム開発フローにcomponent-entity systemを採用しています。


簡単にいうと、ゲームを構成する要素をComponentの組み合わせで作るという方法です。


Componentはゲームロジックを定義、実行するコードです。


CocosCreatorでは基本的にJSでかかれます。*1


ゲームロジックとゲーム画面をつなぐ役割がNodeです。


ゲームロジック以外にも画像やテキストを紐づけることができます。


Nodeは画像やテキスト、Componentなどを保持する箱みたいなものです。


Nodeに色々とくっつけていくことで、一つのゲーム要素を作ります。


例えば、タッチされたときにキャベツを切る忍者などが作れます。

Nodeの作り方


エディターの左上にNode Treeパネルがあります。


f:id:kusakabob:20180717214934p:plain


これはNodeの階層構造です。
Nodeをフォルダのように管理できます。


➕ボタンを押すことで新たなNodeを追加することができます。


Nodeをクリックすると下のような画面が出てきます。


f:id:kusakabob:20180717215407p:plain


NodeのPropertiesを編集することで、画像やテキストの大きさや位置などを簡単に変更できます。


一番下のAdd ComponentをクリックするとComponentを追加することができます。


自分の作ったゲームロジック Componentをくっつけたい場合は、Add Custom Componentを選択します。


Componentは好きなだけ追加できます。


基本的にNode追加、Componentくっつける、の繰り返しでゲームを作るというワークフローです。


f:id:kusakabob:20180716154411p:plain


上の画像だと、Canvasが全てのNodeの親ノード*2です。


そして、

  • score:スコアラベル
  • bar:上下に動くバー
  • gameOver:ゲームオーバーラベル
  • effect:切ったときに現れるエフェクト
  • obj:上から落ちてくるキャベツ
  • ninja:忍者
  • gameCtrl:ゲームロジック


の構造です。


最後のgameCtrl以外はテキストや画像など目に見えるものなので*3わかりやすいです。


gameCtrlはComponentのみがくっついており、空Nodeです。


f:id:kusakabob:20180717221019p:plain


このPropertyはJSファイルの中で定義します。

properties: {
        obj: {
            default: null,
            type: cc.Node,
        },
        ninja: {
            default: null,
            type:cc.Node,
        },
        scoreDisplay: {
            default: null,
            type:cc.Label,
        },
        effect: {
            default: null,
            type:cc.Node,
        },
        gameOverDisplay: {
            default:null,
            type:cc.Node,
        },
       bar:{
           default:null,
           type:cc.Node,
       },
        
    },
...


propertiesに上記のように記載すると、エディターのpropetiesパネルにボックスが表示されます。


ここに他のNode*4ドラッグアンドドロップすることで、ComponentがそれらNodeへの参照をえることができます。


つまりgameCtrl NodeのComponentから全てのNodeの値やComponentにアクセスすることができるようになります。


Nodeを一括管理でき、ゲームをコントロールしやすくなるので、
このような空Nodeを作るのは便利ですし推奨されています。

所感


このワークフローを理解しているとCocosCreatorで高速開発できます。


私は最初ここを理解していなかったので大分苦労しました。。。


基本を抑えておくのが大事ですね。

*1:Coffee ScriptとTypeScriptも使える。

*2:ルートNodeにすることが推奨されている。

*3:effectは透明、切ったときに透明度を変えて表示。

*4:ninjaやeffect