5.1さらうどん

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

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

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

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

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

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

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

for iPhone / iPad

https://itunes.apple.com/jp/app/waveweaver/id841280819?at=10l8JW&ct=hatenablog

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』を最高レベルまでやり尽くした[twitter:@tcptr]さんが作り込んでくれたので本当に良いモノができました。

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

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

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

他の人の開発裏話

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

ゲーム開発したい方は

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

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

おまけ

ありがたい

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

GlobalGameJam札幌で48時間でゲーム10本開発した話

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

1月25日から27日までの3日間、48時間でゲームを作るお祭り、GlobalGameJamが世界同時に開催されました。

Global Game Jam 2013札幌開幕します - 5.1さらうどん

ルールは簡単。テーマに沿って48時間でゲームを作るだけ

僕がオーガナイザーを務めさせていただいた札幌会場では60名が9つのチームに分かれ、10本のゲームを開発しました。

2013年のテーマはこちら。

例年、動詞や画像だったテーマが史上初の音になり、大変着想しにくかったのではないでしょうか。

また、当日は、テーマの他に、ある要素を盛り込んだゲームを評価する「実績」が16種類発表されました。
Global Game Jam 2013 Diversifiers | Global Game Jam


以下、札幌会場で開発されたゲームを、当日の紹介順にお届けします!

チーム4『菌GDOM』

Game: Ritohyou Ryuutar Browser Game for GGJ2013 Sapporo (RRBG) | Global Game Jam

1番手はソーシャルゲー。サーバーサイドはRuby、クライアントサイドはCoffeeScriptで実装されています。

細菌パズルの『菌GDOM』。

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

白血球を操り、増え続ける細菌を撃破せよ。

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

スタートダッシュが決められず、企画会議が難航、そのため惜しくも上手く形にできなかったようです。

企画はおもしろい物が練り上がっていたと思うので、完成に期待。

チーム9『BEAT DETECTOR』、FC『かわずたん』

チームとは名ばかり。一人GGJに挑戦したチーム9。せっかく一人だから2本作ろうという発想に至ったようです。この時点で何かがおかしい。

1本目は『BEAT DETECTOR』。ゲームを4KB以内にする実績「ATARI AGE」の解除を狙って、アセンブラだけで実装されています。なんと僅か2.6KB

Game: BEAT DETECTOR | Global Game Jam

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

プレイヤーのやることは鳴り響くビープ音を1Hz単位で的中させるだけ。調律師を目指すためにオススメの作品。

ちなみにこのゲーム、黒、灰、白の3色のみ使用。「True Colors」の実績もまとめて解除されています。

2本目はFC『かわずたん』。なんと、完全なハンドアセンブルにより、1からファミコンゲーとして実装されています。

Game: FAMICOM-NES REGENERATION PROJECT | Global Game Jam

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

海外のオープンソースのFC向けコンパイラを利用した模様。実機やファミコンエミュレーターでしっかり動きます。変態だー。Kawazのマスコットキャラクター、「かわずたん」もファミコンパレットでしっかり再現。

ゲーム自体はランダムにやってくる弾を避けるだけのクソゲー(褒め言葉)。開発時間のほとんどが調べ物に費やされたようで、変態的技術力に頭が上がりません。

チーム1『団結!トロッコ君』

ソーシャルゲー、FCゲー、とまともじゃないプラットフォームの作品が続く中、なんとこのゲームはiPhone3台とiPad1台が必要なパーティーゲーム

タイトルは『団結!トロッコ君』。

Game: 団結!トロッコ君 | Global Game Jam

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

iPhoneで操るトロッコ役3台と、iPadを使ったナビゲーター役の4人に分かれて遊びます。

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

iPhone側の操る画面はご覧の通り。自分の周囲しか見ることができません。

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

その一方でiPad側の画面。マップ上の広い範囲を見渡すことが可能。さらにナビゲーター役はiPad上の岩をタップして破壊することで、トロッコの道を作ることも。上手く他のプレイヤーを誘導してたくさんコインを集めよう。

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

4人の団結力が物を言う作品。実際に遊んでみると、道案内をする方が必死なわりに、結局変な道に誘導してしまう、なかなか楽しい作品に仕上がったかと。

WiiUのような非対称のゲームプレイが流行なので、技術的にちょっとムリしてBluetoothによるP2P通信に挑戦。48時間でプレイ可能な領域に持っていくのはなかなか大変でスリリングでした。

4人以上のパーティーゲームにする実績、「More the Merrier」、2つ以上のデバイスを使う実績「Two Are Better Than One」もまとめて解除。

この作品のメインプログラマは僕なので、後日、詳細な開発レポートを上げたいと思います。

チーム4『イチの、みち』

Game: イチの、みち | Global Game Jam

紹介から5本目にしてようやくオーソドックスなゲームの登場。C++/DirectXで実装。

謎の生物、イチが音を集めるパズルゲーム。『イチの、みち』

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


プログラマが3人いるから単純に3本作ろう!ということで3種類の音を集めるパズルゲームが実装されています。

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

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

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


それぞれ、R,G,Bの三色が鍵となっており、色を手がかりに音を集めましょう。

主人公のイチがかわいい。幕間の絵本のようなシナリオも特徴的です。

チーム7『Encounter』

大量の3Dモデラーによって構成されたチーム。『Unfinished Swan』のような雰囲気を持ちつつ、『LSD』のようなシュールな探索ゲーを目指そう、というコンセプト。

Game: Encounter | Global Game Jam

心臓の鼓動から、出会いのときめきを発想。タイトルは『Encounter』。広い世界であなただけの出会いを。

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


初心者モデラーが多く、ローポリというのが功を奏して、広大なマップに様々なオブジェクトを配置することに成功。広い世界を演出できていたように思えます。

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


そしてエンディングのカワセミ。クォリティの高いカメラワーク。

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


GGJという過酷な環境で作られたとは思えない、とても心休まる作品に仕上がっています。

チーム3『MOMOTARO』

Game: MOMOTARO | Global Game Jam

期待のガチプロ班。本職の映像屋4名の他、プロのゲームサウンド屋、そして『ギルティギア』などを手がけたアークシステムワークスのCTO氏までが参戦したドリームチーム。

タイトルは誰もが認める日本のヒーロー『MOMOTARO』。墨絵のような色彩を捨てた質感が美しい。

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

ワンダと巨像』のような圧倒的な鬼の威圧感。高まる鼓動と絶望感。

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

攻撃範囲はマップの半分以上。桃太郎は鬼を打ち破れるのか。

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

日本の全作品でトップを取るのは通過点。ガチで世界を取りに行くような作品を作る!という目的で開発された本作ですが、惜しくも完成には至らず……!

もし、プログラマが一人増えていれば、世界に名を馳せる作品が完成していたかもしれません。

メイキングや事の顛末はこちらを参照のこと

GGJ2013、UnityとBlenderで世界に挑む。 - うしろぐ

チーム5『かくしんぼ』

Game: Kakushinbo | Global Game Jam

『かくしんぼ』。C# XNAで実装。隠す側と探す側に分かれて遊ぶ宝探しゲーム。

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

まず、隠す側が宝箱をマップ上のいずれかの穴に隠します。あとは探す側がどこに隠したかを当てるだけ。

右下のハートは、隠した側の心理状態で、隠れている穴に近づくと心拍数が上がってドキドキ。

少ない手数で上手く隠している場所を当てましょう。

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

隠した側と探す側との心理戦に発展するのもまた楽しい。

あえて意図的にチート可能な要素を含む実績「No cheating (please)」も解除。

チーム2『ETERNAL MARCH』

Game: Eternal March | Global Game Jam

チーム2の『Eternal March』。Javaで実装。

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

基本はオーソドックスなスネークゲームにスキルの概念を追加。

白雪姫やアリスなど、童話をモチーフにしたかわいらしい世界観が特徴です。

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

細かいですが、昔ながらのアルファベット3文字のネームエントリーを採用。こういう細かいこだわりがたまらない。

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

プロのプランナーさんがチームをまとめただけあって、シンプルながら完成度の高い作品に仕上がっています。

チーム8『カルテットウォーリア』

Game: カルテットウォーリアー~QuartetWarrior~ | Global Game Jam

トリを飾ったのはチーム9同様に一人チームによる『カルテットウォーリア』。「I wanna be the guy」などを産んだMultimediaFusionというプログラミング不要のゲームエンジンで開発されています。

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

心臓を舞台に、4つのゲームを選べます。いきなりボスにも挑戦可能。
f:id:gigi-net:20130130220601p:plain

オーソドックスな縦シューティング。上手くクリアして素材を集めよう。

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

素材が集まったらボスに挑戦。撃破できればゲームエンド。

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

総括

札幌会場では9チーム10本の作品が開発されました。

今年はUnityが大流行。世界的には、作られた作品3000本のうち、1000本以上がUnity製。一方で札幌会場はUnity作品は2本だけ。

iOSネイティブやソーシャルゲーム、MultimediaFusionやまさかのファミコンゲーまで、さまざまな開発環境で開発され、バラエティに富んだ会場になったと思います。

また、不可能と思われた実績が5種類も解除されたのも大変興味深かったです。

来年は期待のプラットフォームOUYAが一般発売されたりするので、新しいコンソールをどんどん取り入れていければなぁと思っています。

札幌会場は、運営の札幌ゲーム制作者コミュニティKawazの存在もあり、日頃からゲーム開発技術が共有されており、どのチームも完成度の高い作品に仕上がったと思います。

また、作品以外にも今年は北海道新聞に大きく取り上げられたりと、飛躍の年となりました。

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


この記事を読んで、少しでもGGJにご興味を持った方、是非とも来年ご参加ください。素晴らしい体験を約束します。

Global Game Jam 2013札幌開幕します

本日、1月25日から1月27日、48時間でゲームを開発するお祭り、GlobalGameJamが世界同時に開幕します。


2013年、日本の会場は過去最多の17会場!

http://www.igda.jp/modules/bulletin/index.php?page=article&storyid=915

その中で、札幌会場のオーガナイザーを僕がやらせていただいております。よろしくお願いします。


札幌会場は日本では古参の部類に入り今年で3年目。参加者は65名程度、
これは八王子に次ぐ規模で、福岡と同程度、日本で2番目の規模の会場です。



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


札幌会場の強みは、Kawazというバックボーン。一歩間違えると内輪受けに近い雰囲気になってしまうけれど、参加者それぞれの実力や得意分野を考え、それぞれのやりたいことがマッチングするようにチーム編成ができるのは他の会場にはない大きな強みだと思っています。

札幌市内へのハブも太く、今年は学生はもちろん、コンシューマーゲーム開発者、ソーシャルゲーム屋、イラストレーター、スマートフォンアプリ開発者、漫画家、映像屋、3Dモデラー、専門学校講師、と様々なクリエイターが参戦。お祭り感が漂っております。



元々はギーク向けのイベントだったGGJですが、近年はさまざまな業種の人があつまるようになり、会場によっては、事細かにスケジュールが組まれていたり、他会場との交流をしたりと、ゲーム開発以外の側面も色濃くなってきたように感じます。

だからこそ、札幌会場は今年も変わらずガチに開発したい人が集まる会場にしたいと思っています。余計なイベントは一切ナシ!48時間中、47時間半ぐらいは参加者が好きに使えて、快適に開発ができるような会場にしていきたいなぁと。



今年は、地元専門学校の協力もあって、かなり大々的なイベントにすることができました。


北海道新聞に掲載されたり、sapporo6hさんが特集番組を組んでくださったり、メディアへの露出も多め。取り上げて頂いた方、ありがとうございます。

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

発表会の様子は27日に下記ページからUstream配信されますので、ご興味のある方は是非!

USTREAM: sapporo6h: 2013年1月27日(日) 18:00~予定 Global Game Jam Sapporo 2013 「世界中のゲーム開発者が「2日間48時間」でゲームを制作!」