こちらの記事で、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』の画面構成
最初に画面構成をざっと確認します。
『Node Tree』パネル
選択中のシーンに含まれているすべてのノード(オブジェクト)をツリー表示します。
右クリックメニューで、ノードの作成と削除ができます。またノードをドラッグしてツリーの階層を移動させることができます。
選択したノードは『Scene』パネルで青枠で囲まれ、『Properties』パネルに情報が表示されます。
『Assets』パネル
プロジェクトのアセット(ソースや画像等)を管理します。
右クリックメニューでアセットの追加と削除ができます。Finderから『Assets』パネルへドラッグでも追加できます。
プロジェクトフォルダ内のassetsフォルダと同期しているので、フォルダに直接追加しても反映されます。
『Scene』パネル(シーンエディタ)
画像、文字、特殊効果、UI、その他のゲームの要素の配置を行います。
ノードの位置、回転、スケール、サイズを変更することが可能です。
『Properties』パネル
現在選択中のノードとコンポーネントの属性値の確認と編集を行います。
『Scene』パネルもしくは『Node』パネルでノードを選択すると、『Properties』パネルに選択したノードとそのノードに含まれる全てのコンポーネントの属性値が表示され、値の確認と編集を行うことが出来ます。
パネルの上から、ノードの有効化チェックボックスと名前、ノードの属性値、コンポーネントの属性値です。
『Console』パネル
Warning、Error、『Cocos Creator』やエンジンによって生成されたその他のログ情報が表示されます。
ログは色分けされてます。
- Log:灰色:通常、作業の進行を示します。
- Info:青色:重要なプロンプト情報を示します。
- Success:緑色:現在の作業が正常に行われたことを示します。
- Warn:黄色:対処しなくても作業に影響を及ぼさない異常を警告としてユーザーに示します。
- Error:赤色:エラーと、実行のために必要な対処を示します。
表示される情報が多い場合に、絞り込む機能もあります。
『Cocos Studio 2』との違い
コードエディタ
一番の違いはコードエディタが含まれていることだと思います。
『Assets』パネルで『Script』フォルダ内の『HelloWorld.js』をダブルクリックすると、別ウインドウでコードエディタが開きます。
完全ではないですが、コード補完機能もあります。
ノードツリー
『Cocos Studio 2』では『Animation』ウインドウの中にありましたが、独立しています。
オブジェクト(画面の部品)ウインドウはなくなり、『Node Tree』の『+』ボタンや、右クリックメニューでオブジェクトを追加する形です。
基本的なゲームの作り方
プログラムのスタート位置
『Hello World』プロジェクトを見ていきます。
プログラムがどこから実行されるかですが、メイン関数(main.js)的なものはなく、Buildの設定の『Start Scene』に設定されたシーンから始まります。
プレビューする場合は、現在選択中のシーンが実行されます。
ノードとスクリプトの関連付け
シーン単位で作成し、スクリプト(ソースコード)もシーンの部品といった感じです。
『Node Tree』パネルで対象のオブジェクトを選択し、『Properties』パネルにスクリプトファイルをドラッグ&ドロップします。(または『Add Component』ボタンから追加)
すると『Properties』パネルに『HelloWorld』が追加されます。
これでシーン実行時にスクリプトも実行されるようになります。
『Properties』パネルの『HelloWorld』には、スクリプトの"properties"に定義したメンバーが表示されています。(※visible: falseとすると表示されない)
『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"のような未定義や参照エラーは詳しく表示されません。
あと贅沢を言えば、変数や関数の定義の参照ができたらよかったです。ソース内の検索はあるみたいですが。