Cocos2d-JSはイケてる? イケてない?

Cocos2d-JSとは

• 大手なスマホアプリ用ゲームエンジン Cocos2d-x 。(主にC++使って書く)
• Javascriptでゲームを書いて、そのままブラウザゲーム・iOSアプリ・Androidアプリ として出力できる！！
• Cocos2d-xとは別物としてつくられていた、 Cocos-html5 が本体と統合され、シームレスに使えるようになった!

公式が出してるサンプル

• Fruit Attack (パズルゲーム)

• MoonWarriors (シューティング)

• Cocos2d-xの方は、Badlandとかブレフロとか、大ヒットゲームでの採用も多数

ひととおりの開発フロー

• cocosコマンドでひながたを作る

cocos new SampleGame -p com.example.samplegame -d . -l js

• Cocos2d-JSのフレームワークにのっとって、javascriptでゲームを書く

• ブラウザでプレイ・デバッグ

cocos run -p web

• いいところで、iOSやAndroid向けにビルド

cocos run -p ios

cocos run -p android

イケてるところ

「実装 → 動作確認」をすばやく繰り返しながらゲーム開発

• iOS・Android両OSに対応したゲームを、ブラウザで確認しながら実装できる。
• Cocos2d-xで実装する場合、動作確認をするたびにビルドをする必要があるが、こちらは即時プレビューが可能

jsのフレームワークとして

• scriptの遅延読み込みや依存解決、クラスの仕組みが普通によくできてる (独自っぽいけど)

Cocos2d-x自体との統合がかっこいい

Cocos2d-x本体ともシームレスに統合されていて、開発用のコマンドもインタフェースが共通になっている。

# Cocos2d-xのプロジェクト生成
cocos new MyGame -l cpp -d ~/Projects/ -p com.example.mygame

# Cocos2d-JSのプロジェクト生成
cocos new MyGame -l js -d ~/Projects/ -p com.example.mygame

イケてないところ

まだalpha版

• APIなどまだ変更される可能性がある
  • 実際、Cocos2d-xの2.x→3.xへの移行時は、いろいろ悲劇が起きている
• ネットワーク通信系のAPIがまだなさげ！！

ビルドに時間が掛かる (特にAndroid)

• 開発中、頻繁に実行する必要はないが、JSからCPP、CPPからOS側と、2段階にビルドがあるので、結構時間がかかる。暇。

Javascriptの全部のAPI使えるか定かじゃない

ざっと仕様

• ccというネームスペースに全部入ってる。
• 独自?のクラスフレームワークを採用している (cc.Class)
  • cc.Layer.extend()で、Layerをextendしたものを作れる
  • this._superとかも生えてる
  • インスタンス化にはnewじゃなくKlass.create()を使う
    • これはcppの時点でもそうだったので、クラスフレームワークのルールというよりは、そちらに合わせたのかも
• デフォルトのサンプルでは、ぜんぶapp.jsに一緒くたに入れてある
  • htmlの編集入るとめんどくさいし、gruntとかで結合の仕組みをつくりたいところ
  • あるいは、けっこうモジュールの仕組みがしっかり作ってあるので、そちらに乗っかってもいい
• app.jsとは別にmain.jsもある。

• resources.js、resからリソースのURLをとってくるスタイル。g_resourcesは、main.jsの中でperloadしてた。

• 物理エンジン(chipmunk・box2d)やsocket.ioは、モジュールとして追加記述すれば利用できる。

HTML5系のみなさまに、手を出してみてほしい理由

今後のスマホゲーム市場は、

• 作りこまれた、体験がリッチなゲーム
• 軽量でちゃかちゃかしたゲーム

に2分化していく気がする。

後者をスピーディに作る上では、Cocos2d-JSの動作確認の速さは強そう。

Web屋さんの知見がアドバンテージを持っているうちに、手を出してみてはいかが?

参考

• 第十三回 Cocos2dの新パッケージCocos2d-JSについて（前編） - cocos2d javascript bindingsでマルチプラットフォーム開発 - Mobile Touch

  • Cocos2d-html5からCocos2d-JSになって何が起きたのか、まとめ

• cocos2d-js(cocos2d-html5) でchipmunkを使う - Qiita

  • chipmunk(物理エンジン)を使う場合のサンプル
  • モジュールのしくみがどうなってるのかもわかりやすい