夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

PressableButtonExample ~MixedRealityToolkitExamplesを触ってみる~ その③PianoPrefab

本日は昨日に引き続きMRTKのExamples枠です。

MRTKでは機能のサンプルとしてExamplesのシーンでデモとして公開しています。

現在PressableButtonExamplesシーンを読み解いています。

その1ではUnityのプリミティブ3Dオブジェクト(Unity内で作成できる3Dモデル)のCubeを用いてゼロからボタンを作成する過程をみました。

redhologerbera.hatenablog.com

その2ではPressableRoundButtonを見ました。

redhologerbera.hatenablog.com

今回はPianoを読み解きます。

f:id:Holomoto-Sumire:20200625093548j:plain

〇CustomButtonExamples

●Pianoの構成

[Piano]プレファブはMRTK/Examples/Demo/HandTracking/Prefabsにあるようです。

f:id:Holomoto-Sumire:20200625093904j:plain

Pianoプレファブは、[DebugText][Velvet]と[C][D][E][F][G][A][B]の白鍵(白い鍵盤)と[CSharp][EFlat][FSharp][GSharp][BFlat]の黒鍵で構成されています。

このアルファベットとは音名を意味して日本でよく使われているイタリア名に直すと[ド][レ][ミ][ファ][ソ][ラ][シ]と[ド#][ミ♭][ファ#][ソ#][シ♭]に当たります。

つまり各音の鍵盤のオブジェクトを指します。

f:id:Holomoto-Sumire:20200625094207j:plain

●鍵盤の中身

鍵盤にはコンポーネントが付いた親オブジェクトと[MovingKey]という名前の3Dオブジェクトの子オブジェクトで構成されます。

各親オブジェクトには[Interactable][BoxCollider][PressableButon][NearInteractionTouchable][AudioSource][DebutTextOutPut]がアタッチされています。

f:id:Holomoto-Sumire:20200625095211j:plain

HandTrackingでユーザーの指先が鍵盤のBoxColliderに触れたときにPressableButtonとNearInteractionTouchableコンポーネントでタッチを検出し、touchの処理を実行すると同時にInteractableコンポーネントのイベントも発火させています。

PressableButtonでは[Moving Button Visuals]にMovingKeyを設定し、[PressSetings]で設定を行うことでボタンを押している指に合わせてキーが動くようになっています。

f:id:Holomoto-Sumire:20200625100022j:plain

Eventsの[Touch Bigin()]ではボタンに触れた瞬間のイベントを指定します。

f:id:Holomoto-Sumire:20200625100951j:plain

ここでボタン触れたとき[DebugText]に[TouchBegin]と表示されます。

f:id:Holomoto-Sumire:20200625101542j:plain

[Touch End()]ではキーから手が離れたPress終了時のイベントを指定します。

f:id:Holomoto-Sumire:20200625101648j:plain

TouchBeginと同様にTouchEndと表示されます。

f:id:Holomoto-Sumire:20200625101633j:plain

[Touch Bigin()]はキーに指が触れた時発火するイベントです。[Button Pressed()]はキーに指が触れある程度キーが押し込まれたときに発火するイベントになります。

f:id:Holomoto-Sumire:20200625101906j:plain

ここでは各キーに対応する音を流すこととButton Preesedと[DebugText]に表示される設定になっています。

f:id:Holomoto-Sumire:20200625102414j:plain

[Button Released()]はPressedとEndの間、ボタンを押し終えて指をボタンから放している間に発火します。

f:id:Holomoto-Sumire:20200625102518j:plain

ここでは他と同じく[DebugText]にButtonReleasedと表示されます。

f:id:Holomoto-Sumire:20200625102809j:plain

まとめると

①ユーザーがボタンに触れると[Touch Bigin()]イベントが発動する

f:id:Holomoto-Sumire:20200625103016j:plain

②ユーザーがボタンを押すと[Button Pressed()]イベントが発動する

f:id:Holomoto-Sumire:20200625103055j:plain

③ユーザーがボタンを押すのをやめようとすると[Button Released()]イベントが発動する

f:id:Holomoto-Sumire:20200625103126j:plain

④ユーザーが一連のボタンを押す動作を終えると[Touch End()]イベントが発動する。

f:id:Holomoto-Sumire:20200625103214j:plain

●Interactableコンポーネントで状態によって見た目を変える。

 Pianoプレファブではキーの色が変化しています。

 これはInteractableコンポーネントのThemeで行っています。

 f:id:Holomoto-Sumire:20200625103755j:plain

 Interactableコンポーネントの[Profiles]ではThemeが指定されており、そのターゲットとしてMovingKeyが指定されています。

 f:id:Holomoto-Sumire:20200625103927j:plain

 ここでは状態によって色が変化するThameが使用されており、キーにカーソルが当たっている場合(Forcus)クリーム色に、キーが押されている場合(Pressed)水色に色が変化します。

InteractableコンポーネントがあることでAirTapを使用して遠隔でキーをたたくこともできます。    この場合PressedのOffsetのzで0.2が指定されていることでキーが外れたような挙動をします。

 f:id:Holomoto-Sumire:20200625104729j:plain

 また、OnClick()でイベントが指定されていることもありこの場合も各キーに対応する音が鳴ります。

f:id:Holomoto-Sumire:20200625104758j:plain

 以上がPianoプレファブです。