たるこすの日記

こんにちは、たるこすです。

今回は Unity 2017 の新機能である Timeline の勉強がてら、HoloLens でふわっとメニューウィンドウを表示させたいと思います。

ホーム画面で Bloom したときに出てくるメニュー画面のような感じで、アプリ内のメニュー画面を出すというイメージです。

この動きを Unity で Timeline 使って作ってる pic.twitter.com/q4Mayg1i40
— たるこす (@tarukosu) 2017年11月18日

ただし、アプリ内で Bloom を使うとアプリが終了してしまうため、アプリ内のメニュー画面には Bloom は使えません。そのため、ダブルタップ（Air-Tap を二連続で行うジェスチャ）を行うと、メニューを出すようにしてみます。

環境

Unity 2017.1.2f1
HoloToolkit 2017.1.2

プロジェクト設定

新規プロジェクトを作成し、HoloToolkit をインポートします。細かいところは省略しますが、HoloToolkit を使って HoloLens 用の設定を行います。

シーンに以下のプレハブを配置します。

HoloLensCamera
InputManager
DefaultCursor

メニューウィンドウの作成

メニューウィンドウは MRDesignLabs のボタンを使って作るのが良いかと思いますが、今回は一旦キューブの組み合わせで作ってみました。以下のような構成で、MenuWindow と MenuPanel は空のオブジェクト、Background と Button はキューブのサイズを調整して作成しました。

また、視線の向きにウィンドウが追従するよう、MenuWindow には Tagalong と Billboard を付けました。きれいに追従するように、BoxCollider のサイズと Tagalong の Minimum Horizontal/Vertical Overlap の値を少し変更しています。

Timeline を設定する

メニューができたところで、Timeline を使ってアニメーションを付けていきます。Timeline という機能の詳細について説明はしない（説明できるほど理解できていない）ので、知らない方は以下のサイトやスライドを見てみてください。

【Unity】今日から使えるTimeline from UnityTechnologiesJapan

www.slideshare.net

Hierarchy で MenuPanel を選択した状態で、Window > Timeline Editor を開き、Create ボタンを押します。

Playable オブジェクトの保存ウィンドウが出るので、名前を入力します。これで、Timeline が作成され、必要なコンポーネントがオブジェクトにアタッチされます。

Timeline が自動再生されないよう、 Play On Awake のチェックは外しておきます。

Timeline でメニューを開くアニメーションを作成

はじめは、Timeline の AnimationTrack（新しく Timeline を作成するとデフォルトで表示されている）を使って位置や回転のアニメーションを作ろうとしました。しかし、キーフレーム（ひし形マークが表示されているところ）を登録するところまではいいのですが、キーフレームの時刻を調整しアニメーション速度を変更する方法がわかりませんでした。

そこで AnimationTrack は一旦あきらめ、 PlayableTrack という Timeline からスクリプトを実行させる仕組みを使いました。PlayableTrack を使うには、PlayableBehaviour と PlayableAsset を継承したクラスをそれぞれ作成します。今回は、Position, Rotation, Scale, マテリアルのアルファ値を変更するスクリプトをそれぞれ作成しました。

PositionPlayableBehaviour.cs の ProcessFrame が Timeline で実行されたときに毎フレーム呼ばれるメソッドです。

こちらを参考に 3次関数で開始と終了のアニメーション速度をゆっくりにしています。 appleorbit.hatenablog.com

Rotation, Scale, マテリアルのアルファ値を変更するスクリプトもほぼ同じです。すべて表示すると長くなってしまうので、リンクをはっておきます。

次は作成したスクリプトを Timeline に追加していきます。PlayableAsset を Timeline にドラッグ&ドロップすると、Track が作成され PlayableAsset が追加された状態になります。Timeline 上で PlayableAsset を選択するとインスペクタに詳細が表示されます。GameObject にアタッチする通常のスクリプトと同じように、ここで GameObject を指定したりパラメータの調整を行います。

また、音声データを Timeline にドラッグ&ドロップすれば、Audio Track が作成されます。Audio Track ではどの Audio Source から音を再生するかを指定する必要があるので、MenuPanel に Audio Source をアタッチしそれを指定しています。

作成したタイムラインは以下のようなものです。

また、それぞれの Asset のパラメータは以下のように設定しました。

閉じるアニメーションの作成と Timeline の切り替え

次は、作成ウィンドウを開く Timeline を複製し、閉じるアニメーションの Timeline を作成しました。編集したい Timeline は Inspector で Playable Director の Playable で設定していないと Timeline のプレビューができないのでご注意ください。

閉じるアニメーションは開くアニメーションよりは短い時間で動作するようにしています。