渋谷ヒカリエでインスタを展示しました – REAL INVADER –

6/11に1-10HOLDINGSとして「クリエイティブ・コミュニケーション・コンベンション2013」というセミナーを開催しました。

「デジタル施策が変えるクリエイティブとコミュニケーション」テーマにセミナー開く

その際、展示物として対面型バトルシューティングゲーム「REAL INVADER」を制作しました。

REAL INVADER

Kinect2台とAR.Droneを使ったインスタで、
プレイヤーは体を左右に傾ける事で機体を左右に移動、ジェスチャーで攻撃できます。
各2機の機体は攻撃のジェスチャーが異なり、片方の機体はボムを3回まで使えます。
AR.Droneはスクリーン表示上の機体の位置と同期するようになっています。

前回「DOORS OF TEN」というインスタを作ったのですが、
DOORS OF TEN
東京オフィス移転お披露目パーティでインスタを作りました。

そのインスタ終わりで即座に取り掛かり、またもや制作期間が2週間しか残されていないという状況に。
ですが、仕組みの大半を流用できたので今回は比較的ビジュアル部分に時間を割けたかなと思います。

以下、使用機材。

———————————————
WindowsPC x 1台
Kinect for Windows x 2個

MacBookPro x 1台
アミッドスクリーン x 2枚
HDMIケーブル x 2本
プロジェクター x 2台

WindowsノートPC x 1台
AR.Drone x 1台
Wiiリモコン x 1個

無線LANルーター x 1個
———————————————

弊社のアミッドスクリーン職人となった坪倉に前回インスタの「DOORS OF TEN」時より高さ2倍 x 2枚を作ってもらいました。
AR.Drone制御に関しても坪倉の方で担当しているので、
僕の担当はKinectでの操作とopenFrameworks製のシューティングゲーム。

技術的にどうこうというよりは、制作する上での僕なりの工数の省き方の話を。

openFrameworksはUI、イージングを作り込むのが凄く面倒ですよね。
Flashがいかに優れた制作ツールだったのかと思い知らされます。

今回は僕が以前から作り込んでいたopenFrameworks用の自作Flashフレームワークをフル活用して
独自UIと独自トゥイーンライブラリをフルスクラッチで自作してみました。

既存のopenFrameworks用のトゥイーンアドオンがどれもが自分の肌に合わず、
結局、僕がFlash制作でも愛用しているTweenMaxのAPIを参考に自作しました。
PaperVision3Dのクラス群を参考にopenFrameworksのAPIをラップしまくった3Dフレームワークも用意。
openFrameworksのビルドインクラスとの互換性も損なわない様、自作フレームワークと生のopenFrameworks
とのコードが混在できる様な設計に。

ここまでする必要あるのか?というくらい制作期間の半分はこのフレームワークの拡張に没頭していたのですが、
イベントドリブン、ディスプレイオブジェクトツリーの恩恵は凄まじく、
Flashライクなコーディングのおかげで工数を大幅に短縮でき、なんとか制作期間2週間以内におさめる事ができました。

僕は案件時、こうした汎用クラスやデバッグ用のUI作りに製作期間の半分くらい割いてしまっているのですが、
こうした積み重ねが案件の後半でデバッグ、ブラッシュアップ時間の大幅な短縮に繋がります。
(おかげでスロースターターになりがちですが)
また、汎用的なコードが次回のインスタ作成時にまるまるコピペできる事が大半なので案件を重ねる毎、
クオリティアップに時間を費やせるわけです。
常に意識しているのは「今書いているコードが、この案件の為だけのコードにならない様に!」です。
経験を積み重ねて得た効率の良いオブジェクト指向なプログラミングは言語が変わっても活きると思います。

通信周りは「DOORS OF TEN」の時とあまり変わらず、
今回はKinectが2台なのでWindow側でKinectのアプリが2つ同時起動している点と
UIを背景透過AIRアプリでごまかさずopenFrameworksで頑張ってみたくらい。
サウンドと同期したアニメーションが欲しかったので、サウンドスペクトラムのFFT解析も少しごにょごにょと。

このセミナー1日の為のインスタでもったいないので、他の場所での展示のご依頼、詳細が知りたい方は
是非弊社にお問い合わせください。

↓おまけ

開発段階

ty_20130827_01ty_20130827_02
ty_20130827_03ty_20130827_04ty_20130827_05ty_20130827_06

ty_20130827_10ty_20130827_07
ty_20130827_08ty_20130827_09

管理画面


related article