もしWeb系のエンジニアが「アイカツ！」のゲームを作るなら

ということを考えてみた（ネタです）

実際、データカードダス アイカツ！はWindowsマシンらしいので何か既存ゲームエンジンを用いて開発されているんだろうとは思うんだけど、もしWeb技術だけで同じようなものを開発しようとするとどういう感じになるかなーという小ネタ。

マシンは何を使うか

Web技術で開発する以上、最終的にはブラウザもしくはWebView的なコンポーネント上にレンダリングすることになるから、OSは特に問わないと思う。

まぁコンパクトな筐体だから、Intel HD Graphics 4000が載ってるMac miniとかでも処理は可能そう。

Apple Mac mini/2.3GHz Core i5/2GB/500GB/NO ODD MC815J/A

ていうか、グレア液晶だからiMacをそのままはめ込んでしまえばそれでOKな気もする。

インターフェースが面倒そう

アイカツのメインインターフェースは、3つの矢印ボタンx2セット。

さらにバーコードリーダーとコイン投入口。

当然ながらブラウザからこれらにアクセスするAPIなどあるわけ無いから、WebSocket APIでソケット通信を行うのが一番いいと思う。

Hanwha タッチ式 CCD バーコードリーダー USBインターフェース [USB接続] UMA-BR-02

ビジコム バーコードリーダー 二アレンジCCD USB 黒 BC-BR900L-B

USB接続のバーコードリーダーは結構出てる。

あと、こういったデバイスを使わずに、手元のデバイスでなんとかするならやっぱりiPhoneとかスマートフォンを経由する方法が一番現実的かも。

JavaScriptでiOSネイティブアプリが開発出来るTitanium mobileで、Tibarというライブラリがある。

tibar - ZBar integration module for Titanium Mobile - Google Project Hosting

ZbarというバーコードリードライブラリをObjective-Cに移植した感じのもので、結構精度が良かった。

iPhoneのカメラでカードのバーコードをスキャンして、WiFi経由でソケットサーバー（まぁNode.jsのSocketIOが一番手でしょう）にデータを送信し、ブラウザが受信するという手段で行けそうですね。

ボタンもiPadでバーチャルボタンとして再現したら良いのでは。

iPadでjubeatやるような感覚でプレイ出来る（かも）

iPadでユビート！ - YouTube

肝心の描画部分は？

アイカツ！プレイ動画・新ステージ・フレッシュガールズカップ決勝 - YouTube

この3DCGをやるには、WebGLかActionScriptのStage3Dの2択しか無いでしょう。

現状WebGLでシーンを読み込んでモデルを配置して、ボーンアニメーションに物理演算にモーフィングまでやれるか？ と言われると、Three.jsをもってしても厳しいと言わざるをえない。

…と思っていたのですが、Three.jsでMMDを再生している猛者が居ました。

three.jsで遊んでみる（17） « Everyday Pieces ::

上記のデモがこれ

Three.jsのJSONエクスポータなどを使わず、バイナリのPMXデータをそのままロードしてデコーディングするという凄いことをやってらっしゃいました。ネットは広大だわ……

しかし、多分ここにパーティクルを加えたり背景モデルを読み込んでライティングを施したりすると、かなり厳しくなってきそうな感じです。

あと、リズムゲームプレイ中にスペシャルアピールを出すと、別のシーンが上から重なるようになっているので大変そうです。

となるとWebGLとりAway3Dかな？ となり、やっぱりFlashはすごいなーというところに傾きますな。

[Stage3D] Away3D と Starling を統合するサンプル集 | romatica : Blog : Archive

リズムゲームの譜面や2Dのユーザーインターフェースと、ボタンを押した際のパーティクル表現はStarlingで描画というふうに割り切れば、かなり現実味を帯びてくるんじゃないでしょうか。

Away3D_Starling_Layering_Demo

サウンド表現は？

リズムゲームなので、音声との同期処理が大事になってくるんですが、ここもFlashじゃないと33ms以下の遅延に抑えるのは難しいと思います。

最近、Web Audio APIというサウンドの波形自体を編集出来るAPIがモダンブラウザ（っていうかChrome）に搭載されたんですが、データをメモリ上に展開するので、短いSEくらいのものじゃないと無理です。

ActionScript 3にはサウンド系のクラスがたくさんありますし、十分可能そうです。

まぁ本当にWebコンテンツとしてこういうゲームを作るなら

バックグラウンドの3DCGがプリレンダムービーであれば、残りはほぼ同等のものを作れると思います。

ただ、アイカツで着せ替えが出来ないってそれなんの意味が？ という感じなので、もし皆さんが「次の商品のキャンペーンだが、データカードダス アイカツ！のようなゲームを取り入れてみてはどうか？」という意見の出た会議に居合わせたら「さすがにリアルタイムレンダリングで3DCGモデルを躍らせるのは難しいと思いますが、そこさえプリレンダになっていれば可能ではないでしょうか」と答えてみてはいかがでしょうか。

ていうか

Unityでやれ。

ちなみに今日のアイカツ

ブルーミングスカートきましたわー！

あとトップスが出ればブルーミングコーデ揃う！