Cocos2d-js(Cocos2d-x)でモバイルゲーム開発講座

近頃ゲーム開発用の開発環境が色々な会社から発表されて、混戦状態の様子を露わにしてきていますが、モバイルゲーム開発におけるTOP2は「Unity」「Cocos2d-x」、ついで「UnrealEngine4」といった所ではないかと思います。

よく、どれを勉強すればわからない、という声を聞きますが、すべてさわってみて自分に合うやつを選べば良いと思います。

習得難度の低さとしてはダントツでUnityになるかと思います。

書籍やWebサイトにおける情報も豊富ですし、公式のAssetStoreにより、既に他のデベロッパーが開発した「機能」を購入して組み込むことができるので、お金さえつぎ込めばかなりのドーピングが可能です。日本のソーシャルゲームのガチャの仕組みに近い。

次いで、注目を浴びているのがUnrealEngine4でしょう。

基本的にはPCやコンシューマー向けのハイエンドグラフィック志向なゲームを作るのに向いていますが、スマホへの最適化対応もバッチリされています。

また、ブループリントという独自の機構により、プログラムをほとんど書くことなく、ゲーム開発を進めることができます。

上記２つは、プログラマではないが、ゲームを作りたいという人たちに好まれていると思います。特にデザイナさんは相性がよく、利用されている方が多いでしょう。

Unityにも「Play Maker」という有料Assetがあり、それを購入すればUE4のブループリントと同等の機能が使えるようになるそうです。

ではCocos2d-xは誰が使うのかというと、やはり本職プログラマの人が使ってる印象が強いです。

Cocosは名前の通り、2Dのゲーム開発に非常に特化しており、少ないコード量で豊富な2D表現を行うことができるのが魅力です。（余談ですが3Dゲームもバリバリ開発できます）

ですが、基本的な開発言語がC++であるため、習得難度が非常に高いと思われていることから、利用者が少ないし書籍も少なめというのが現状です。

今のCocosはC++11を採用しているので、かなり多様な表現ができるようになり、相当難易度は下がっているのですが、それでもC++というのはとっかかりにくい言語なのでしょう。

そうした状況を打破するためにCocosも「CocosCreator」というツールをリリースしました。

これがまたUnityを意識しまくりのツールにはなっているのですが、目指しているのはまさにUnityそのもので、プログラムや動きを含めた1セットをAssetという単位にまとめて、視覚的にゲーム開発が行えるツール（を想定している）ものとなっています。

いかんせんまだまだベータバージョンですので、実用には耐えませんが、プログラムがとっつきにくいという方の参入が易くなっていくのでは、と思えます。

今回はその辺の流れを一切合切無視しますが、Cocosはスクリプトを使った開発もサポートしています。

現在サポートしているのはJavaScriptとLuaScriptです。

Luaは海外では広く普及しているのですが、日本では利用が少ないように思います。(Pythonに似た感じです)

JavaScriptは利用者もめちゃくちゃ多いので、これが使えればゲーム開発も捗るのでは、と思います。

細かい仕組みは説明しませんが、JSで開発するといってもスマホアプリ内のブラウザでゲームが動くわけではなく、アプリ内にJavaScriptエンジンを組み込んであり、そこでJavaScriptの動作をシミュレートしてゲームに反映させます。(Bindingsという仕組み)

これがSpiderMonkeyというエンジンを利用しており、Firefoxが同じエンジンを利用しています。

ですので、ChromeやIEやSafariだと微妙に挙動が変わる部分がありますので、その点ご注意ください。

開発環境を整える

www.cocos2d-x.org

Cocos2d-xのサイトから「Cocos」をダウンロードしましょう。

mac環境で話は進めていきます。

たしか、これにCocos2d-xの最新フレームワークも統合されているはずなので、Cocos2d-xのダウンロードは必要ないはずですが、今クリーンなmac環境がないので真相は定かではありません。

動かないという声があれば、書き直します。

インストール後、Cocosを立ち上げて「New Project」を作成します。

ProjectNameとPathは任意に決めていただきます。

Engine Versionはおそらく1択なので、そのままcocos2d-x-3.10としましょう。

今後バージョンアップするか、Cocosフォルダ内にバージョンをいれていくと増えるのでしょう。

Engine Typeは Precompiled Libraryを選択しておくと早いです。

これはフレームワークを既にビルドした静的ライブラリにしたものをリンクするだけ、という選択肢です。

後にCocosフレームワーク自体に手をいれないといけないとかの場合には、SourceCodeを選択するはめになります。

LanguageはJavaScriptを選択してください。

作成すると、CocosStudioが起動されます。

起動毎に全画面にFITされるのでうざいです。これ変更できると嬉しいですが、やり方が存在しないのかわかりません。

ここで、ツールバーにある「Run on Mac」となっている箇所を

Run in browserに変更して

Run Projectボタンを押しましょう。

そうすると、Consoleとブラウザが起動して、画面が表示されます。

これで、ゲームが起動した状態となっています。

これはCocos2d-xで動いているわけではなく、実際にはCocos2d-html5という仕組みで動いており、上述した通りブラウザのエンジンに依存します。

さて、これらのWindowは残したまま、もう一度CocosStudioの方に戻ります。

画面に手を加えてみましょう。

左にあるObjectsリストから、「Button」を選択し、ドラッグ＆ドロップで画面上に配置してみましょう。

ツールバーにある、Publishボタン（上矢印ボタン）を押します。

Project publishedと表示されたら、更新が反映されています。

先ほどのゲーム画面のブラウザに戻り、再更新(F5)を行いましょう。

配置したボタンが反映されているのがわかります。

次にボタンをおした時の挙動を作りましょう。

作成したProjectフォルダを開き、srcフォルダの中にあるapp.jsをエディタで開きます。

HelloWorldLayerというClassとHelloWorldSceneというClassの２つが定義されています。

HelloWorldLayerはHelloWorldSceneの中でインスタンス化されており、

HelloWorldSceneはrootフォルダのmain.jsの中で呼び出されていますので、確認しておいてください。

ここにコードを追記していきます。

現在CocosStudioで編集しているファイルはMainScene.csdというファイルで、それを ccs.loadという行で読み込んで表示しています。

その際 res.MainScene_json という変数になっていますが、こちらは同じフォルダ内にある resource.js にて定義がされています。

これで、ゲーム初期化時にリソースの先読みをするようです。

また、CocosStudioのAnimationウィンドウにて画面に配置してあるオブジェクトの名前を確認しておきましょう。

画面全体に表示されている画像(Sprite）がDefaultという名前で、新たに配置したボタンがButton_1という名称になっています。

こんな感じで追記しました。

Defaultという名前のSpriteをimg変数へいれ、Button_1をbtnへ読み込みます。

ボタンに対するアクションへの処理はaddTouchEventListenerで定義します。

runActionで任意のアクションを実行できるので、とりあえず回転させてみました。

これでapp.jsを保存し、ゲーム画面のブラウザを再更新してみましょう。

ボタンを押すと、画像が回転するのがわかります。

このような感じで、Cocos2d-jsのメリットとしては、リビルド作業が不必要だという点が挙げられると思います。

必要なリソースと、プログラムを更新して、ブラウザを再読み込みすれば即プログラムが反映されるので、ステップが早いです。

Cocos2d-xのAPIは覚えるよりありませんが、大体は公式リファレンスを見れば良いかと思います。

Class Index | JsDoc Reference

また、コードはJavaScriptなので型の概念などある程度理解しなくても作れたり、既存のJavaScriptライブラリなども活用が利くのではないかと思われます。

ただし、実機で動作させると、エンジンの違いにより挙動が変わることがあったりするので、その点は注意です。

実機での確認方法

AndroidはCocosStudioで Run on Androidにして、

USBで実機を繋いで実行すればOKです。

実際にアプリをストアへリリースする段階では、これだけではダメなので、色々やる必要はあります。

iPhoneの場合ですが、Xcode必須です。

先ほどのProjectフォルダー内のiosフォルダまでいき、Xcodeプロジェクトを開きます。

USBでiPhoneをつなぎ、ビルドターゲットを実機にして、実行すればOKです。

Cocos2d-jsの場合だと、html5での公開も可能なので、ブラウザで動くゲームをそのままリリースもできます。

↓こんな感じです。

Cocos2d-html5 Hello World test

www.mokosoft.com

かなり走り書きできましたが、CocosStudioを利用することでかなりゲーム開発は楽になります。

使い方なども今後発信していければと思います。