UnityとHTC VIVE/Trackerを使ってスプラトゥーンっぽいインタラクティブコンテンツを作った話
先日 DojoCon Japan 2017 で Inkind Sponsorとして「ふしぎマニューバー」 を 出展しました。
ほぼ表題で完結する話ですが、イベント当日は仕組みについて結構質問があったので、振り返りがてら解説したいと思います。
今年のわりと早い時期から、こざる さんから、相談を受けました。
きっかけは以前制作した 「さえ子のお人形」の仕組みを解説する勉強会を受けての事だったそう。
ご本人の記事「手作り！ふしぎマニューバー」に詳細が書かれています。
体験型のコンテンツを見てもらった結果、こういうお話が来たのは嬉しいことです。
イベントまでの流れ
5〜7月頃
ざっくり、「CoderDojoに参加される子どもたちに向けて、不思議な体験ができるコンテンツを出したい」という感じだったように記憶しています。
何を作ろうかなと思っていましたが、不可視彫像 や トラッキングデバイスを使った記事※1, ※2を見ていて、立体視をやりたいなとふんわり考えていました。
HTC VIVE を使うにしても子供向けとなるとVRとしての利用はありえないので、Traker のみを使う方向になりました。
ただし、その時私のUnityのレベル1、VIVEも一度体験しただけで所有はしておらず今考えるとなかなかチャレンジャーだったのでは。。。という感じがします。
何度か打ち合わせを重ねていくに従って、シューティングゲームを作る方向には定まりつつあり、せっかくなら銃もちゃんと作ろうという流れになりました。
このあたりがTrackerによるデバイス連携の仕組みがわかりやすいです
8月頃
この時期に Unityのアセット Ink Painter をピックアップしていたので、ハマっているスプラトゥーンのようなゲームを作ろうとしていたのだと思います。
// Ink Painter は色々あって最終的に利用しませんでした。
イカっぽいゲームなので色々各所に怒られる(意訳)のではないかと心配していましたが、こざるさんが著作権情報センターに相談してくれたりで 最終的にはいけるだろうという判断をしました。
この時期に水鉄砲マニューバー流用を検討し、3人同時プレイをするために都合3セット(計6本)購入していました。
とりあえずマニューバーを分解し、Trackerをつけてみた時の写真。
UnityとTracker間でのやり取りは SteamVR Plugin が補ってくれますが、
- Trackerから銃への振動フィードバック
- 銃からTrackerへトリガースイッチ起動
は自作しなければなりません。
トランジスタを使った振動モーター駆動の仕組みとトリガーからの配線取り出しに関して、制作をこざるさんに手伝って頂きました。(使用部品やスイッチの部品構成まわりのみアドバイスしました)
最終的にはこのような形になりました。
Trackerからの信号をトランジスタでスイッチング、電池とつなげた振動モーターを動作させ、一方で銃のトリガーに貼り付けたタクトスイッチでTrackerのTrigger信号を短絡させるという流れ。
9月頃
コンテンツ名が「ふしぎマニューバー」 GitHubのプロジェクトネームが「wonder-shooter」に決まる。
この月の末あたりにようやくVIVEとTracker購入
この時期に告知ページが展開される
ふしぎマニューバーでふかし体験！
焦るも10月頭までなにも着手できず
10月
11/4 までひたすら追い込む
VIVE+Unity構成
VRをするためのVIVEですが、実際このゲームでは頭に装着せずプロジェクタースクリーン横に据え付けてあります。
VIVEのシステムでTrackerの位置認識ができるので、Unity内でそのTracekr位置からスクリーンに向いた方向を銃口としてトラッキングしています。
プロジェクタに映る画面はVIVEのヘッドセット側ではなく、新規に追加したカメラオブジェクトをスクリーン前の立った位置に配置。
そこから、Unity内でRayCast オブジェクトを駆使して敵キャラに当たる判定を取る。という仕組みになっています。
あとは、Unity内部で完結するので実装に入りました。
過去3回ほど挑戦して挫折していた Unity ですが、やっぱりやりたいことが決まっていると強いようで、この勉強会 当時三色団子しか作れなかったのですが、最終的には動画のようなコンテンツを作ることが出来ていました。
とはいえ、難しかったのはシーンをまたぐ時のオブジェクトのライフサイクルなどで、Asset Storeで素材を購入し、細かい実装はゲーム実装のTipsを参考に作成していきました。
子供たちにはマインクラフトっぽいものも受けそうということで下記のアセットを利用しました。
自キャラ視点の移動と敵キャラの動きなどを合わせていき、こちらの記事 「Painting on objects in-game 」を参考にshaderにインクが滲む動きを付けていきました。
また、音素材、文字のフォントなどは下記を利用させていただきました。
ありがとうございます。
イベント開催 前日/当日
作りたい機能が全く追いついていない状態で、関連機材を設置する日が訪れてしましました。
設置したVIVE一式は当然その日回収できないので、朝のうちにヨドバシで2台目の
HTC VIVE を注文。
設営後受け取りに行き、家で続きを実装するという強行策。。。
一番の難敵はプレイするたびにTrackerの位置が安定しない。という部分がありそれを解決しないと機能を作れない。しかし機能を作らねば。。。という狭間で闘っていました。
キャラのアニメーションはこざるさんに一任し、実装していましたが、最終的に動くようになったのは イベント当日の開始10分前...
本当にギリギリで間に合いました。。。
その後、1日おかしな挙動を起こすこと無く終わることが出来ました。
イベント当日は 100組超える方に体験して頂きました。
スコアランキングサイト
これらに合わせて、Unityからユーザーの得点をPostするサーバを制作しました。
当然、サーバは Node.js一択ですが、せっかくなのでとやったことがない fastify で実装。
これをこざるさんに制作してもらったプレイ得点を表示する静的サイトと合わせて
DigitalOcean に設置しました。
私自身のプレイヤーとしてのベストスコアは Pink#026 の第７位でした。
総括
久しぶりに仕事をしながら新しいことに挑戦する難しさを体験しました（笑
終わってみればやりたかったことの半分ぐらいは実装できなかったですが、コンテンツとしては面白いものが出来たのではないかと思っています。
電子回路の実装、Unityのキャラアニメーション、世界観を作るグッズなど多くの部分を手伝って頂き1人では到底できなかったと思います。
こざるさん 本当にありがとうございました。
1日だけではもったいないのでまたどこかでやれたら良いなぁと思っています。