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

モーリーのメモ

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

エディタの画面構成と基本的なゲームの作り方を調べる!:Cocos Creator

Cocos Creator Mac

 こちらの記事で、iOS、Web向けのビルドと実行が出来ることを確認しました。
mmorley.hatenablog.com
 
 今回は、『Hello World』プロジェクトを通じて『Cocos Creator』によるゲームの作成方法を調べました。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0
  • Xcode Version 7.3
  • ブラウザ:Google Chrome Version 49.0.2623.110 (64-bit)

『Cocos Creator』の画面構成

 最初に画面構成をざっと確認します。
 f:id:mmorley:20160404231227p:plain:w400

『Node Tree』パネル

 選択中のシーンに含まれているすべてのノード(オブジェクト)をツリー表示します。
 右クリックメニューで、ノードの作成と削除ができます。またノードをドラッグしてツリーの階層を移動させることができます。
 選択したノードは『Scene』パネルで青枠で囲まれ、『Properties』パネルに情報が表示されます。

『Assets』パネル

 プロジェクトのアセット(ソースや画像等)を管理します。
 右クリックメニューでアセットの追加と削除ができます。Finderから『Assets』パネルへドラッグでも追加できます。
 プロジェクトフォルダ内のassetsフォルダと同期しているので、フォルダに直接追加しても反映されます。

『Scene』パネル(シーンエディタ)

 画像、文字、特殊効果、UI、その他のゲームの要素の配置を行います。
 ノードの位置、回転、スケール、サイズを変更することが可能です。

『Properties』パネル

 現在選択中のノードとコンポーネントの属性値の確認と編集を行います。
 『Scene』パネルもしくは『Node』パネルでノードを選択すると、『Properties』パネルに選択したノードとそのノードに含まれる全てのコンポーネントの属性値が表示され、値の確認と編集を行うことが出来ます。
 パネルの上から、ノードの有効化チェックボックスと名前、ノードの属性値、コンポーネントの属性値です。

『Console』パネル

 Warning、Error、『Cocos Creator』やエンジンによって生成されたその他のログ情報が表示されます。
 ログは色分けされてます。

  • Log:灰色:通常、作業の進行を示します。
  • Info:青色:重要なプロンプト情報を示します。
  • Success:緑色:現在の作業が正常に行われたことを示します。
  • Warn:黄色:対処しなくても作業に影響を及ぼさない異常を警告としてユーザーに示します。
  • Error:赤色:エラーと、実行のために必要な対処を示します。

 表示される情報が多い場合に、絞り込む機能もあります。

『Toolbar』

 シーンの編集用のボタン、ゲームプレビュー用の操作ボタンがあります。
 右端にはリモートのテストとデバッグ用のアクセスアドレスと接続されたデバイスの数が表示されます。

『Cocos Studio 2』との違い

コードエディタ

 一番の違いはコードエディタが含まれていることだと思います。
 『Assets』パネルで『Script』フォルダ内の『HelloWorld.js』をダブルクリックすると、別ウインドウでコードエディタが開きます。
 完全ではないですが、コード補完機能もあります。

ノードツリー

『Cocos Studio 2』では『Animation』ウインドウの中にありましたが、独立しています。
 オブジェクト(画面の部品)ウインドウはなくなり、『Node Tree』の『+』ボタンや、右クリックメニューでオブジェクトを追加する形です。

基本的なゲームの作り方

プログラムのスタート位置

 『Hello World』プロジェクトを見ていきます。
 プログラムがどこから実行されるかですが、メイン関数(main.js)的なものはなく、Buildの設定の『Start Scene』に設定されたシーンから始まります。
 f:id:mmorley:20160404234059p:plain:w200 
 プレビューする場合は、現在選択中のシーンが実行されます。

ノードとスクリプトの関連付け

 シーン単位で作成し、スクリプトソースコード)もシーンの部品といった感じです。
 『Node Tree』パネルで対象のオブジェクトを選択し、『Properties』パネルにスクリプトファイルをドラッグ&ドロップします。(または『Add Component』ボタンから追加)
 f:id:mmorley:20160405005035p:plain:w400
 
 すると『Properties』パネルに『HelloWorld』が追加されます。
 これでシーン実行時にスクリプトも実行されるようになります。
 
 『Properties』パネルの『HelloWorld』には、スクリプトの"properties"に定義したメンバーが表示されています。(※visible: falseとすると表示されない)
f:id:mmorley:20160405010313p:plain:w400
 
 『Node Tree』パネルから『Label』をドラッグ&ドロップしてスクリプトの"label"と関連付けします。
 これでスクリプトで『Label』が扱えるようになります。
 
 基本的には、ノードとスクリプトを関連付け、スクリプト内で振る舞いを記述してゲームを作成していく感じでしょうか。

"properties"が更新されない?

 最初これにだいぶ悩んだのですが、
 スクリプトの"『text: 'Hello, World!'』部分を『text: 'test'』に変更てプレビューしましたが、ラベルの文字は『Hello, World!』のままでした。
 スクリプト内の『 onLoad: function () {}』内で『this.label.string = ”test”;』とすると『test』に変わりました。
 『Properties』パネル側で『Text』を”test”にした場合は『test』に変わりました。

 スクリプトで定義した"properties"の値は、ノードに追加した後は同期しないので、『Properties』パネルの値が優先されるみたいです。

あとがき

 コードエディタが含まれたのは大きな変化です。オール・イン・ワンになっているのはいいですね。
 構文エラーも即時表示されます。しかし、"18:ReferenceError: abc is not defined"のような未定義や参照エラーは詳しく表示されません。
 あと贅沢を言えば、変数や関数の定義の参照ができたらよかったです。ソース内の検索はあるみたいですが。