デコシノニッキ

ホロレンジャーの戦いの記録

UniFlowとHoloLensでたわむれる

UniFlow とは

原文

UniFlow is a library that can connect various Unity components without writing any C# script. You can implement easily processes such as "Tutorial that accepts user interaction" and "Waiting for the end of playback of Animation, Audio, Timeline, etc.".

Google 翻訳まま

UniFlowは、C#スクリプトを記述せずにさまざまなUnityコンポーネントを接続できるライブラリです。 「ユーザーインタラクションを受け入れるチュートリアル」や「アニメーション、オーディオ、タイムラインなどの再生の終了を待つ」などのプロセスを簡単に実装できます。

下図のようにノードで、コンポーネントを接続することができます。 f:id:haikage1755:20191104202801p:plain

スクリプトと違い、編集してもいちいちコンパイルが走らないのでさくさくと処理を組めるのがとても魅力的です。

HoloLensはまだまだテックデモとしての需要がある(?)っぽいですが、できればそういったものは手早く作りたいものです。なので、MRアプリの開発を加速させるツールである Mixed Reality Toolkit と組み合わせてなんか作ってみようというのが今回の趣旨です。

アプリケーションの流れはこんな感じを想定しました。

  1. アプリを起動する
  2. AirTap to Start ! と表示される
  3. Air Tap する
    • AirTap to Start !が消える
  4. メニューが1.5秒後にでる
    • メニューがアニメーションしながら現れる
  5. メニューからアイテムを選択する
  6. アイテムが1.5m 先に配置される
    • 配置されると音が鳴る
  7. アイテムをジェスチャーで動かす

作ってみる

まずはシーンを簡単に構築します。 ヒエラルキーは次のようになっています。

f:id:haikage1755:20191104202851p:plain

メニューにはNearMenuExample3x1を使います。

f:id:haikage1755:20191104202900p:plain

準備

今回、MRTKのイベントを受け取るためのノードを独自に拡張しています。 UnityPackageを事前にここから落としてください。

ノードを組み立てる

  1. AirTap to Start ! と表示される
  2. Air Tap する
  3. AirTap to Start !が消える

の部分から始めます。表示される部分はあらかじめActiveで文字を配置しているので特に何もしないです。 Air Tap したら文字が消える部分を考えます。

Text のオブジェクトにInput Action をアタッチします。これは、グローバルに入力イベントを受け取れるハンドラで、MRTK v1 では、InputManager.Instance.AddGlobalListener() と呼ばれていたものをコンポーネント化して利用を簡便化したものです。

f:id:haikage1755:20191104202910p:plain

TopのタブからUniFlowを展開します。

f:id:haikage1755:20191104202919p:plain Input Action Event Trigger ノードを生成し、BaseGameObjectにInputActionをアタッチしたものをドロップします。Event Handler Type は Input Action Started そのままでOKです。

f:id:haikage1755:20191104202934p:plain

さて、これでAir-Tapすると、このノードがトリガーされるようになりました。続いて、"AirTap to Start !が消える" 処理ですが、単純にGameObjectをdeactivateします。

Activation Controller を作成し、先ほどのノードと接続します。 Target GameObject には文字を表示するCanvasを指定します。これで、Air-Tapをすると文字が消えます。 f:id:haikage1755:20191104202943p:plain

続いては 3. メニューが1.5秒後にでる - メニューがアニメーションしながら現れる

1.5 秒後に何かしたい、という時は Timer ノードを使います。指定秒数後トリガーします。

f:id:haikage1755:20191104203006p:plain

指定秒数後に行う、アニメーションを指定します。SimpleAnimationController を使ってアニメーションを再生します。 (※ Simple Animation についてはこちら)

f:id:haikage1755:20191104203015p:plain

再生するとこんな感じ f:id:haikage1755:20191104203750g:plain

続いてボタンを押したときの処理を組み立てます。 InteractableEventTriggerを使います。MRTKのボタンにはInteractableというスクリプトがアタッチされており、Clickイベントを公開しています。それをノードで受け取って処理を行います。

f:id:haikage1755:20191104203041p:plain

Vector3 Provider の初期化用にInteractableからVector3Providerにノードを渡します(合っているのかびみょい)。続けて、Instantiated Game Object には生成したいObject を渡します。 f:id:haikage1755:20191104203052p:plain

Transform Injector に生成したオブジェクト、位置座標を渡してAudioControllerから音を再生すれば一連の流れは完成です。
f:id:haikage1755:20191104203102p:plain

これを4オブジェクト分生成します。

f:id:haikage1755:20191104203116p:plain

再生してみます。 f:id:haikage1755:20191104203638g:plain

実機でもちゃんと動きます

所感

UnityEventやスクリプトを組み合わせていけば同じことはできますが、ノードを使うとEventの流れが追いやすく、ストーリーの流れを意識しやすかったのがとてもよかったです。 今回はノードのみで組み立てるという制約のもとアプリをつくりましたが、ZenjectとUniRxを基盤に作られているのでViewとの作業分離がしやすそうだなーという新たな沼が見えました。拡張も割と簡単で自作ノードを作業ゲーのように作っていくのもたのしー。今後更に期待です(‘ω‘ )

参考

www.youtube.com

speakerdeck.com

[デコシノニッキ]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」