【ソース有り】初心者がJSでAndroidアプリをリリースしてみた話【cocos2d-JS】

cocos2d-JSを使えば、JSでiOS・Androidアプリがつくれると聞きつけ試してみました。Andoirdのみですが作ったアプリをリリースしましたのでcocos2d-JSと合わせて紹介したいと思います。

どんなアプリよ？

相も変わらず音ゲーです。音源はクリエイティブ・コモンズのものを使用しています。先日記事にした無料音ゲー flavabeatsのAndroid版です。PC版はenchant.jsで、Android版はcocos2d-JSで作成してます。実はcocos2d-JSの方を先に作り始めたんですが、ハマりにハマって先にPC版の方ができてしまいました。拙作ですが、隙間時間で遊べると思うのでぜひ遊んでみてください。

ちなみにPCに版の記事は以下。

<a href="http://blog.bokuweb.me/entry/game-angularjs-enchant">AngularJS+enchant.js+CoffeeScriptで音ゲーを作ってGitHubPages上で公開しました - bokuweb.me</a>blog.bokuweb.me

cocos2d-JSって?

cocos2dはオープンソースの2Dゲームフレームワークです。一番メジャーなのはcocos2d-xでC++でiOS、Android、Windowsなど様々なプラットフォームに対応しています。ドラゴンクエストモンスターズやFINAL FANTASY Record Keeperなど採用実績も非常に多いようです。

　cocos2d-JSはその名の通りJavaScript版です。JavaScriptでiOS、Androidの両方に対応したアプリが作れます。またJavaScriptですので、WEB用にビルドすることでブラウザ上で動作するアプリを作ることも可能です。以下は公式のデモですが、スマホのブラウザ上でもヌルヌル動くことが確認できると思います。

Cocos2d-html5 Show Case - MoonWarriors

今回はcocos2d-JSのv3.3を使用しています。(現時点での最新は3.5)

　蛇足ですが、cocos2d-JSにはiOSやAndoirdに対応したFullとブラウザ上での動作のみに限定したLiteが存在します。LiteであればjQueryなどの既存のフレームワークが使用できます。PhoneGapと組み合わせればアプリ化もできるでしょうし、enchant.jsのような立ち位置になります。(ちなみにenchant.jsとcocos2d-JS Liteとのパフォ−マンス比較はCocosjslite vs enchant by bokuwebにまとめています。参考まで。）

どんな風に書くんだってばよ？

上記のパフォーマンステストで使用したコードですが、以下のような感じです。『シーン』という単位に『スプライト』を追加していき、一定周期で『スプライト』を移動させたり、音楽を鳴らしたりフレーム処理を行います。enchant.jsを触ったことがある人は、記述量は増えるものの基本概念は同じです。

上記のコードは"test1.png"という画像（この場合グレーの正方形）を貼り付けたスプライトを7500個作成し、ランダムに動かすサンプルです。以下が実際の動作です。

Hello Cocos2d-JS

スプライト数が7500だとさすがに処理落ちするので上記リンクはスプライト数を1000に減らしています。

環境構築・HelloWorldまでは以前記事にて紹介しています。

<a href="http://blog.bokuweb.me/entry/2014/12/17/210559">cocos2d-JSをインストールする - bokuweb.me</a>blog.bokuweb.me

環境構築からアプリ完成までの流れや詳細は余力のあるときに記事にしたいと考えています。今回は感じを掴んでいただければと思います。

参考になった書籍とか

残念ながら古いバージョンなんですが、参考になる箇所も多いです。あと価格も安いです。

Cocos2d-html5ではじめるモバイルゲーム開発

作者: フニゲ
発売日: 2014/01/09
メディア: Kindle版
この商品を含むブログを見る

フニゲの開発日記、著者ブログでは新刊準備中とありますので期待したいです。

英語ですが、3.x系に対応しています。こちらも参考になります。

Learning Cocos2d-JS Game Development

作者: Emanuele Feronato
出版社/メーカー: Packt Publishing
発売日: 2015/01/12
メディア: Kindle版
この商品を含むブログを見る

こちらはcocos2d-JSではなくてcocos2d-xなんですが、共通の部分も多く参考になりました。説明もわかりやすいのでオススメです。cocos2d-JSでも使用できそうなツール類の紹介も充実しています。

cocos2d-xではじめるスマートフォンゲーム開発 [cocos2d-x Ver.3対応] for iOS/Android

作者: 三木康暉
出版社/メーカー: 技術評論社
発売日: 2014/12/27
メディア: 大型本
この商品を含むブログを見る

この本のサンプルをJSで実装した方がいるようです。以下の記事です。こちらも合わせて参考になります。

<a href="http://qiita.com/niku/items/2a637b740a2671f773fe">cocos2d-JSではじめるブラウザゲーム開発 - Qiita</a>qiita.com

開発工数どんなもんよ？

管理していたわけではないのでざっくりですが50〜60時間くらいでしょうか？大半がレイアウトやアニメーション調整、譜面作成だったのでゲーム自身の実装は（enchant.js版が先行したこともあり）10〜20時間ってとこです。あと、レイアウト調整などに差し掛かると一気にモチベーションと効率が下がります。大枠のロジックを組んでるときが一番楽しいよね。

感想とか、困ったこととか

以下羅列します。

cocos2d-JSはまだまだ情報が少ない。
アップデートも頻繁でAPIも結構カオスなことになっている。(つい最近まで　cc.point(x,y)だったのにいつの間にかcc.p(x,y)になってたりってことがよくある）
IDEが用意されているけど使いかたがよくわからん。
ネイティブのデバッグ方法がわからん(これはcocos2dが悪いわけではないが）
WEBビルドでは動いたのに、Androidでは動かん！とかAndroidでは動いたのにiOSでは..（ry ということが多い。1ソースで様々なプラットフォームに対応しようとすると結局プラットフォーム判定して処理を分けるということが必要になる。現時点では。
それでもWEB技術でここまでできるのは利点。プラットフォーム非依存部のテストはmocha-pantomJSとかでできそう。（今回はテストのテの字もないですが・・・。ごめんなさい。）
JSでレイアウト調整すんのしんどい。
なんか稀に音がずれる気がするけど~~見てみないふりしとく~~わかったら治す。