undefined

bokuweb.me

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


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

どんなアプリよ?

flavabeats - Google Play の Android アプリ

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

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

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までは以前記事にて紹介しています。

blog.bokuweb.me

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

参考になった書籍とか

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

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


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

Learning Cocos2d-JS Game Development

Learning Cocos2d-JS Game Development


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

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

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

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

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でレイアウト調整すんのしんどい。
  • なんか稀に音がずれる気がするけど見てみないふりしとくわかったら治す。

ソース

GitHubで公開しています。MITライセンスで公開しますのでご自由にどうぞ。注意事項は以下。

  • 音楽ファイルはCreativeCommonsライセンスですのでご注意ください。
  • 書き散らかしてます。ごめんなさい。(次回作もしくは詳細エントリを書く場合はもう少し頑張ります。)
  • cocos2d-JSのバグなのか、よくわからないとこがいくつかあり臭いものに蓋してます。
  • それでも折角なので公開しておきます。

github.com

おわりに

最初は楽しかったんですが、レイアウト調整くらいから苦行以外の何者でもなくなりました。どういう形であれひとまずリリースしてペンディグになっているプロジェクトに取り掛かろうと思い頑張りました。