CocosCreatorの公式チュートリアル「Quick Start：Make your first game」を１日やってみた感想です。大まかには以下のような感じでした。
- Unityの仕組み(GameObject,Componentなど)でCocosCreatorは使える。
- Unityユーザーはすぐにできるが、Cocos2d-xユーザーにとっては使いづらい。
- Cocos2d-xとは別物
- コード編集してフォーカスをCocosCreatorに戻すと、ブラウザーリロードで開発が楽(JavaScriptのlivereload)
- ドキュメントを期待する前にまずはサンプルプロジェクトを起動
作ったゲームの簡単な説明
このゲームは、紫スライムがプレイヤーで、ADキーで左右に移動してスターを取るゲームです。スターは一定時間で消えるので、消えたらゲームオーバーです。
Unityの仕組み(GameObject,Componentなど)でCocosCreatorは使える。
CocosCreatorはUnityの考え方を土台にして作られているのでいくつか共通な概念を確認します。
HierarchyWindowに対応するNodeTree
UnityではGameObjectに画像、音声、スクリプトなどをコンポーネントとして追加する構造です。CocosCreatorでは、Nodeという言葉を使いますが構造は同じでした。
操作もUnityと同じで、アセットからシーンウィンドウに画像をドロップしてSpriteNodeを作れます。
UnityのHierarchyWindowに対応するNodeTreeがあり、そこで右クリックすると、EmptyNodeやSpriteNodeが作れます。これはUnityでいうEmptyGameObjectやSpriteRendererコンポーネントと同じです。
InspectorWindowに対応するPropertiesウィンドウ
以下は、紫スライムのPlayerNodeのプロパティーです。これはUnityのGameObjectのInspectorWindowと同じで、「Add Component」ボタンでコライダーや、Physicsをコンポーネントとして追加できるのも全く同じです。
Unityのスクリプト変数がインスペクターに反映されるのとCocosCreatorは同じ
Unityでは変数がインスペクターに反映されます。この仕組みがあるのでC#スクリプトにパブリックフィールドを用意してUnityエディターで値を調整できます。CocosCreatorも同じで、スクリプトを作成するとひな型にpropertiesオブジェクトがあるので、ここにプロパティを書いていきます。
UnityユーザーからするとC#と記述は違いますが、やりたいことは一致しているので問題なく書いていけますが、Cocos2d-xユーザーは、この概念を新しく学ぶ必要があって面倒かもしれません。
Playerノードに上記Playerスクリプトを「Add Component」ボタンで追加すると以下のようにPlayerスクリプトがコンポーネントとして追加され、プロパティが表示されます。Unityと全く同じです。
Prefabもある
Unityでは現在のシーンでオブジェクトに画像や音声、スクリプトをコンポーネントとして追加し、ProjectウィンドウにドラッグするとPrefab化できます。CocosCreatorでは、NodeTreeウィンドウからAssetsウィンドウにドラッグするとPrefab化できます。
いままで見てきたように、CocosCreatorはUnityを参考に作られているのが分かります。
Unityユーザーはすぐにできるが、Cocos2d-xユーザーにとっては使いづらい?
いくつか機能を比較してきましたがCocosCreatorは、Unityの概念を参考に作られています。そのためCocos2d-xのようなソースコード主体の開発ではなく、オーサリングツールやGUIデザイナーがある開発ツールと同様な開発手法が求められます。音声、画像など各種リソースの設定や配置は、ソースコードで書かれずにツールで設定するようになります。
今までのCocos2d-xと同じだろうと思ってやってみると名前だけが同じなので、全然別物のためUnityユーザーが始めるよりもCocos2d-xユーザーの方が大変かもしれません。
コード編集してフォーカスをCocosCreatorに戻すと、ブラウザーリロードでするので開発が楽(JavaScriptのlivereload)
HTML+JavaScript+CSSでWebアプリを開発している感覚で、オートリロードでゲームを再確認できます。かなり軽いためこれは非常に良かったです。
またブラウザーゲームの場合そのままブラウザーの機能を使えるので、例えば音声認識APIなどと連動する場合は、相性が良いと思います。
ドキュメントを期待する前にまずはサンプルプロジェクトを起動
Unityのような感覚でドキュメントや参考となるプロジェクトを見つけることはできません。また日本語のドキュメントを探すのも難しいです。ですが、DashboardにExample Collectionがあり、これはいろんな機能をシーンで分けて一覧化したプロジェクトです。なのでまずは起動してみるとよいです。簡単なゲームを作る際に必要な情報は手に入ります。
少々強引なJavaScript
JavaScriptはC#やJavaと異なり、動的型付けなので、以下のような記述はできません。
|
1 2 |
public GameObject myobj; public Text scoreText; |
ソースコード上のプロパティとGUIのインスペクターを連動するために、以下のようにJavaScriptのオブジェクトにtypeプロパティでcc.Prefabのように型を設定して対応しています。
|
1 2 3 4 |
starPrefab: { default: null, type: cc.Prefab }, |
またTypeScriptでプログラミングする場合は、注釈があるため２行ですっきり書けます。class構造もすっきりして入力補完も完全対応なので慣れるとこちらのほうが開発しやすそうです。
|
1 2 |
@property(cc.Label) label: cc.Label = null; |
まとめ
CocosCreatorとUnityの似ているところをUIやソースコードで確認してみました。
CocosCreatorは動作が軽く、Phaserなどコードベースのライブラリーと比較するとシーン管理、画像やテキストの配置や音声ファイルの設定などがドラッグアンドドロップでできるため、ソースコードが少なくなります。
またJavaScriptのためブラウザー機能と連携する場合は、ブラウザーの機能（音声認識APIなど)を単純に呼び出すだけでよいのでこれも相性が良いです。
ブラウザーゲームとして公開する場合は、瞬時にCanvas起動するのでこれはUnityより良いです。
此処までいくつかメリットを書きましたが、まとめるとWebブラウザーベースのちょっとしたゲームを素早く作りたい。UnityのWebGLのロードが待てない。リソース管理をコードベースで書きたくない。などの理由がある場合はよいツールと感じました。
Unityは、とにかく入門情報が、英語でも日本語でも動画でもgithubのソースコードでも豊富です。初心者向けの入門書もたくさんあり問題が発生しても誰かが解決策をブログで書いていたりします。良いツールですが、広く使ってもらうのは難しいのかもしれません。