5.1さらうどん

@giginetの技術ブログ。ゲーム開発、iOS開発、その他いろいろ

cocos2d-x 3.0でクロスプラットフォームなインディーゲームを開発した話

『Wave Weaver』リリースしました!

シンプル操作で脅威の中毒性。波をよけ続けるゲーム『Wave Weaver』をリリースしました!

詳しくは以下の記事とトレーラーをチェック!

波をかわして曲を紡ぐ、カジュアル中毒ゲー『Wave Weaver』をリリースしました - 5.1さらうどん

Google PlayApp Storeで大好評配布中です!非常に多くの方に遊んで頂けているようで驚いています。

for iPhone / iPad

WaveWeaver

WaveWeaver

  • gigi-net.net
  • ゲーム
  • 無料

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 WaveWeaver

for Android

Android app on Google Play

Wave Weaver - Android Apps on Google Play

この記事は

この記事はWave Weaverの開発話を交えて、cocos2d-xを使ったクロスプラットフォームなゲーム開発の知見をお伝えするつもりです。

Wave Weaverは、cocos2d-x 3.0のβ版を使用しており、国内では最速レベルのプロダクトだと思われます。そのため、今後使う人に使用感など含め、お伝えしていきたいと思います。

Global Game Jam Sapporo

f:id:gigi-net:20140323102644j:plain

このゲームのプロトタイプは、48時間でゲームを開発するハッカソン、GlobalGameJamの中で作られています。48時間で基本的なプロトタイプはできあがっていた!

詳しくは、gihyo.jpに僕が寄稿したイベントレポートをご参照ください。

ソーシャルゲーム,ボードゲーム,ファミコンまで!? Global Game Jam 2014参加レポート:レポート|gihyo.jp … 技術評論社

cocos2d-x 3.0を使ってみた

最終的に、本作ではcocos2d-x 3.0beta2を使っています。

現在ではRC版が出ているのですが、GGJ当時(1月末)の最新版はβ1でした。

lambda超便利

3.0最大の恩恵は、C++11で実装されたlambdaに完全対応しているところ!

特に、今作ではエンディングなど、逐次的な処理があったので、大体はAction + lambdaで、cocos2dのBlocksライクにかなりお手軽に記述できました。今まではわざわざコールバックを定義して、なんてことをやっていたので、非常に利便性が上がっています。

反面、lambdaを使いすぎると、コードの可読性が落ちて大変でした。特にGGJでは尚更。

さらにC++のlambda-captureと、cocos2d-xのautoreleaseが相性最悪な感じで、captureしたと思ったら、autoreleaseされててぬるぽ、みたいなことがよく起きたのもハマりどころでした

クロスプラットフォーム化が楽

3.0からプロジェクトを生成した時点で、全てのプラットフォーム用のテンプレートが生成されるので、クロスプラットフォーム化がかなり楽でした。ありがたい変更。

alpha, beta, rcで仕様が変わりまくった

まだリリース前なので、仕様がコロコロ変わって大変でした。

以前、alpha版を基準にスライドを作ったのですが、それからGGJで利用したbeta1は、ArrayやDictionaryが廃止されていたりと、結構大きな変更が。

cocos2d-x 3.0 + C++11で始めるゲーム開発超入門

最近リリースされた3.0のrc版ではプロジェクトの生成方法が変わっていたりして、あんまり原形を留めていない感じです。

開発スピードが速すぎて仕様が安定しなさすぎるので、正式リリース前のフレームワークを使うのは危険な感じ。

クロスプラットフォーム + Universal対応

今回はゲーム自体がシンプルだったのもあって、プラットフォーム別に4種類画面を作りました。

f:id:gigi-net:20140323104935p:plain

左からiPhone(4.0インチ)、 iPhone(3.5インチ)、iPadAndroid

iPhone / iPad

iPhone開発はノウハウがあったので、いつも通りこちらを基準に作りました。

iPhoneRetinaとNon Retinaの画像を用意する必要があるのですが、Retina版を基準に作り、Pythonで簡単なスクリプトを書いて、Non Retina用に自動変換をしていました。PIL便利。

4インチ対応は背景画像だけ別に用意して、あとは同じリソースを画面サイズから相対位置で配置するように切り替え。

iPad対応もほぼ同様。iPad版は実は実装上はiPhone版より画面が狭いです。反面、非常にボタンが押しやすくなっていて割と別ゲーに。

Retina iPad用にはSplash画像を別途用意しただけで特に何もしていません。意外と見た目は気にならない感じ。

Android

Android対応は初だったので、動けばいいや的な感じで、あまり機種ごとの最適化は行わずに、一律iPhone3.5インチのNon Retina版と同じ表示になるように作りました。Androidはこの辺が大変ですね。

ビルドにはGradleを使用。NDKの対応にはこちらの記事が大変参考になりました。

gradleでCocos2d-x3.0alpha1のアプリをbuildしてAndroidのapkを作成する - きょこみのーと

古い機種だと重たいという話も聞こえており、今後の課題ですね。

ちなみに、開発中は幻のOUYA版が存在してましたが、コントローラーへの対応が面倒だったので、リリースは見送りました。

Jenkins + TestFlight/DeployGateで高速テストプレイ

ゲームの質は、開発者が如何に遊びまくったかが全てなので、テストプレイ超重要です。

今作では、Jenkinsを用いて、コミットと同時に、各プラットフォーム向けに自動ビルドをしておりました。

f:id:gigi-net:20140323105404p:plain

コミッタはiPhone 4.0インチ環境で開発するだけで、あとはチームメンバーが勝手に確認したりテストしたりしてくれるので、非常にスピード感がありました。

今回のようなクロスプラットフォームの開発では、いちいち全機種ビルドして確認してられないので、CIは必須な感じがしますね。

gitは共通言語

f:id:gigi-net:20140323110020p:plain

ゲーム開発はプログラマの仕事が増えると大変なので、gitを共通言語にして、皆がリポジトリにコミットできる環境を作るべきだと感じました。

例えばデザイナーに「画像が差し替わったのでDropboxに上げましたー」とか言われると、わざわざ持ってきて、ファイル名を変えて、差し替えたのか差し替えてないのかわからずに面倒なことになります。

今回はgitを使えるメンバーが多かったので、その辺が非常に楽でした。プログラマ以外のデザイナーやコンポーザーもgitを使うべき。

辛かったところ

逆に今回の開発環境で上手く行かなかったところについて。

SpriteStudio for cocos2d-xが辛い

f:id:gigi-net:20140323111825p:plain

今回は演出を少しでもリッチにするために、アニメーション作成にSpriteStudioというソフトウェアを使用していました。

SpriteStudioはGGJのスポンサーも努めており、インディー開発者向けに、プロユースの物と同等の機能を持ったモノが無償で提供されています。ありがたい!

「超汎用」データ制作 あらゆるゲーム開発シーンに対応。2Dスプライトアニメーションデータ作成ツール「OPTPiX SpriteStudio」 | ウェブテクノロジ

しかも公式でもcocos2d-xをサポートしていたため、今回導入してみたのですが、標準で用意されてるものを再実装していたり、インターフェイスが独特だったりと、ライブラリのできがあまりよろしくなくて大変でした。

補助ツール・ライブラリ群・サンプルのダウンロード | OPTPiX Help Center

リリース前だったので、当然3.0には対応しておらず、動くように書き直したのですが、アルファブレンディングなどがちゃんと動かずに、そのまま使えない自体が多発。

結局、SpriteStudioで作ってもらったアニメーションを目コピーして、コードで実装したりしていました。

さらに、現在Mavericksで動かないのも辛いところ。わざわざVM立ち上げて作業してました。

ライブラリも1000行ぐらいあって、読み解いたり修正が大変な感じだったので泣く泣くそのまま使用。今後とも使っていくのであれば、しっかりと書き直したい感じですね。

とはいえ、今回のように趣味で開発する場合は、SpriteStudioは無償で使えるという点でかなり魅力的。

お金があるのであれば、標準でサポートしているSpineなどを買うのが良いと思いますが・・・・・・。

CocosDenshion::SimpleAudioEngineが辛い

cocos2d-xの音周りは、SimpleAudioEngineってのがついているんですが、必要最低限の機能しかついていない上に、なぜか実装がいろいろと酷い

などなど。

そのため、ゲーム途中でアプリをバックグラウンドに送ったときの音周りの挙動などに苦労しました。

前作の『VOXCHRONICLE』はサウンドを動的に操作する必要があったので、自前でOpenALをガリガリ書いていたため、音周りの混乱はありませんでした。iOS版のみのリリースであったことも幸いして、クロスプラットフォームを意識せずに設計できたのも楽な点。

もう少し時間があればガッチリと手を入れていきたいところ。結構基本的な機能も揃っていないので、割とみんな困ってると思うんですけど、みなさまどうしてるんでしょうね。何かご存じでしたら教えてください。

ビルド時間が長すぎて辛い

cocos2d-x 3.0は2.xに比べて、かなりビルド時間が長くなっているように感じました。

特にiOS版はObjective-C++を使っている関係で、ビルドがタダでさえ遅いのに加え、本プロジェクトではboostを使っていたため、さらにビルド時間が長くなりました。

特にMacBook Airでは、クリーンビルドだと5分以上待たされることもザラ。48時間しかないGGJでは致命的な感じでした。

レベルデザイン

『Super Hexagon』を意識しまくった

f:id:gigi-net:20140323110707p:plain

このゲームは、『Super Hexagon』というインディーゲームに強くインスパイアされています。

『Super Hexagon』の中毒性を踏襲すべく、以下のような仕組みでレベルデザインを行いました。

  • 波の排出や、数秒間待機するなどの命令をOrderと呼ぶ
  • 各Orderには排出開始位置や、波の色、Easingなどが設定されている
  • 一連のOrderのまとまりをPatternと呼び、レベル毎にPatternを何種類か定義し、ランダムに出現順を変えている

このように、毎回適当に波を出すのではなく、ある程度のパターンをデザインし、ランダムで出すような仕様になっています。

これによって、一見突破不可能な波であっても、何度も遊ぶことで記録が伸びていき、中毒性の高いゲームに仕上がっています。

レベルデザインについては様々な声を頂いています。ありがとうございます。

レベルデザインや、波のエミッター周りの実装は、『Super Hexagon』を最高レベルまでやり尽くした@さんが作り込んでくれたので本当に良いモノができました。

ちなみに、だいたい1時間ぐらいでエンディングを見れるように調整してみたのですが、概ねそんな感じになっているようで何よりです。

タダでもここまでできる!

最近はゲーム開発用の環境もだいたいはOSSで揃うようになってきたので、お金をかけずにここまでの開発が個人でできます。良い時代ですね!

他の人の開発裏話

デザインや音楽などにも、細かなところに工夫が生きています。ご興味のある方は是非。

ゲーム開発したい方は

f:id:gigi-net:20140323111018p:plain

札幌ゲーム製作者コミュニティKawazでは、プロアマ交えて楽しくストイックにインディーゲーム開発をしています。是非ご参加ください!

おまけ

ありがたい

*1:最初はTestFlightを使っていたが、サービス終了に伴い移行した

波をかわして曲を紡ぐ、カジュアル中毒ゲー『Wave Weaver』をリリースしました

ダウンロードはこちらから!(無料)

for iPhone / iPad

WaveWeaver

WaveWeaver

  • gigi-net.net
  • ゲーム
  • 無料

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 WaveWeaver

for Android

Android app on Google Play

Wave Weaver - Android Apps on Google Play

どんなゲーム?

やってくる波と同じ色を選び続けて、ひたすら波を避けるゲームです。

簡単操作ですが、なかなか手応えのある調整になっています。

1レベルはわずか15秒。レベルが上がるに従って、だんだんと難易度が上がっていきます。

f:id:gigi-net:20140320060919p:plain

f:id:gigi-net:20140320060915p:plain

ユーザーの反応

攻略

最初は始めて5秒ぐらいで死んでしまうでしょう。しかし、波の出現パターンは完全なランダムではなく、ある程度は一定です。

そのため、一見すると困難に見える場所でも、何度かやれば必ず突破できます。続けていればスコアがみるみる伸びていくのを実感できるでしょう。

画面下方のカラーバーは、スライドでも動かすことができますが、断然タップ操作がオススメ!遊びやすいスタイルでプレイしてみてくださいね!

そして、航海の果てに待つものとは・・・・・・

f:id:gigi-net:20140322093425p:plain

開発の話

ようやっとリリースできました!

このゲームは、今年1月末に行われたGlobalGameJamという48時間でゲームを作るハッカソンでプロトタイプが製作されました。

f:id:gigi-net:20140320060630j:plain

f:id:gigi-net:20140320060637j:plain

f:id:gigi-net:20140320060657j:plain

WaveWeaver | Global Game Jam

僅か48時間で、ゲームの核となる機能はできあがっていたのですが、その後、レベルデザインを何度もやり直したり、エンディングなど、演出を強化したりと、リリースまでなかなか時間が取られてしまいました。

GGJ当日の製作の様子はgihyo.jpに掲載されているイベントレポートをご覧ください!

ソーシャルゲーム,ボードゲーム,ファミコンまで!? Global Game Jam 2014参加レポート:レポート|gihyo.jp … 技術評論社

技術的な話

このゲームは、cocos2d-x 3.0のβ版で実装されました。おそらく日本国内最速レベルのプロダクトかと。

そして、前作『VOXCHRONICLE』はiPhone向けにしか提供しなかったのですが、今作はiPadAndroidにも対応。慣れないクロスプラットフォーム開発となりました。

シンプルなゲームだったのが幸いし、移植は割とすんなり行えました。Androidの開発ノウハウも得られてよかった。

開発の詳しい話は、後日別記事にまとめたいと思うのでお楽しみに!

まとめ

とても難しいゲームですが、短くテンポよく遊べ、音や演出も気持ちいいので、なかなか中毒性のある作品に仕上がりました。60秒突破後のエンディングは必見です。

ぜひクリアしてみてくださいね!

for iPhone / iPad

WaveWeaver

WaveWeaver

  • gigi-net.net
  • ゲーム
  • 無料

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 WaveWeaver

for Android

Android app on Google Play

Wave Weaver - Android Apps on Google Play

『VOXCHRONICLE』も好評配信中

行動と音が同期する、コマンド選択型奥スクロールRPG、『VOXCHRONICLE』も大好評配信中!

是非遊んでね。

アーケード愛溢れるドキュメンタリー映画『100 Yen The Japanese Arcade Experience』を見ました

海外のアーケードゲーム狂が、3年かけて日本のゲームセンターを取材して撮影したドキュメンタリー映画、『100 Yen』を見ました。

100 Yen: The Japanese Arcade Experience | Insert coin. Blow your mind.

どんな映画?

上手くまとまらなかったので以下の記事を参照のこと

日米のゲーセン文化を外国人が描くドキュメンタリー映画『100YEN』がDVDでついにリリース : Kotaku JAPAN

見てみた

アーケードゲームの歴史とゲームセンター今昔

アーケードの歴史の章では「スペースインベーダー」、「ストリートファイターⅡ」、「Dance Dance Revolution」の3作品はゲームセンターのビジネス構造すらを変えたパラダイムシフトを引き起こした作品と述べられていたのが印象的でした。

これら3つの時代を対称的に描いていて、時代の遷移によるゲームセンターの移り変わりの描写が上手かった。

平成生まれの僕は、どの作品もリアルタイムの世代ではないのだけど、当時の熱狂というのはどれも凄まじかったんだなあと片鱗を味わえました。 00年代以降、ゲームセンターの規模は縮小し続けていて、まだ第4のパラダイムシフトは訪れていないみたい。最近は基本無料のアーケードゲームが出てきたりと、アーケード業界も変化し続けているけれど、紹介されていた時代のような、社会現象になる域まで来る変化というのはもう訪れなさそう。

ゲームセンターの社会的役割

ストリートファイターⅡ』以降のゲームセンターは、ゲームを通したコミュニティを形成し、サロンのような役割を果たしている、という考察がされていて、ゲームというのは、社会と関わりを持つための潤滑油という側面が強いなあと感じました。

ゲーム自体が楽しい以上に、ゲームを通じて誰かと交流したり、あれこれ話しあったり、そういった環境全体こそがゲームのもたらす重要な体験だというのは今も昔も変わらず。 昨今のソーシャルゲームブームも、一見アーケードとは対極の位置にいるように見えるけど、こういった系譜を受け継いでいるんだなあと考えると、なにかインスピレーションが沸く感じがしますね。

北米と日本のゲームセンター

劇中では始終、「北米ではゲームというのは子供の遊びで一般層に受け居られていない」「日本ではゲームセンターを軸に国民皆が楽しんでいて、文化の一つになっている」と言われていました。

日本人からすると、評価されて嬉しい一方で、果たして日本では一般にゲームが受け入れられているのだろうかと違和感を覚えざるを得なかった。

日本のゲームセンターは確かにライト層にも入りやすいような企業努力がなされているのだけど、それ以上にゲームなんて眼中にない層が多数存在しているので、まだ文化と言えるレベルには達していないのでは、という感想を持った。やはりゲームセンターはまだまだ敷居が高い感じが否めない。

総評

僕はゲームはタダの暇つぶしではないと考えてゲームを作り続けているけど、劇中でも作り手としても、遊び手としても、ゲームに人生を捧げている人がたくさん登場して、自分はまだまだだなあ、という気になりました。

最近、『幸せな未来は「ゲーム」が創る』という本を読んでいて、その中でも述べられているのだけど、ゲームはタダの余暇ではなく、人類そのものを幸福にする可能性を秘めてるという主張はステキな感じがしますね。

幸せな未来は「ゲーム」が創る

幸せな未来は「ゲーム」が創る

見たい!という方は

以下の公式ショップでカナダから輸入できます。DVDと送料で39.98カナダドル。約4000円。

100 Yen Film

リージョンフリーの日本語字幕付きなので、問題なく楽しめます。

わざわざ輸入するのは敷居が高い感じあるのでダウンロード販売あるといいですね、って書こうと思ったら、iTunesでも販売されているみたい。

iTunes - Movies - 100 Yen: The Japanese Arcade Experience

これ、米国版のiTunesでしか販売してないんですけど、字幕とかちゃんと付いてるんですかね。不安な方はDVDを輸入することをオススメします。

Thanks to WPZOOM about nice icon sets.