夜風のMixedReality

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

InteractablesExamples/UnityUIRadialButtonGroup ~MixedRealityToolkit v2 Examplesを触ってみる。 その⑩~

 MixedRealityToolKit(以下MRTK)にはExamplesというデモサンプル集が含まれています。

 Examplesを理解すればMRTKの機能の使い方を学習することやノンコーディングでのアプリ開発が可能になります。  

 前回からUX/Interactables/InteractablesExamplesを見ています。

f:id:Holomoto-Sumire:20200217085227g:plain

 前回はUnityUiInteractableを見ていました。

redhologerbera.hatenablog.com

 今回はUnityUIRadialButtonを見ていきます。

〇UnityUIRadialButton

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

 [UnityUIRadialButton]は前回の[UnityUIInteractableButton]同様従来のUnityでのUIを基にしたUIになります。

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

 テキストに当たる[Label]、RadialButtonでのDotに当たる[SelectionState]、選択状態、非選択状態で色が変化する[ForeGround]で構成されています。

 f:id:Holomoto-Sumire:20200219083116g:plain

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

 [UnityUIRadialButton]オブジェクトにはUnityの[canvas]と同時に[Interactable.cs]、HoloLens 2でのHandTracking機能によってtouch動作を可能にする[Touch Handler]、UnityUIでMixedRealityのUI機能を使用できる[Near Interaction Touchable UnityUI]がアタッチされています。

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

[Interactable.cs]の[General]の[Selection Mode]には[Toggle]が設定されており、選択状態である[Selected]と非選択状態である[Deselected]のProfileが設定できるようになっています。

 この辺りは[RadialButton]と同様の仕組みです。

redhologerbera.hatenablog.com

 一つの[RadialButton]を選択した場合ほかの選択が外れる機能は[RadialButton]の親オブジェクトである[UnityUIRadialButtonGroup]にアタッチされている[Interactable Toggle Collection] で行っています。

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

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

 [Size]に使用するRadialButtonの数を設定し、[Interactable.cs]がアタッチされている子オブジェクトを[ToggleList]に設定します。

 以上でUnityUIRadialButtonが使用可能になります。

 イベントを指定するためには[Interactable.cs]の[Event]の[OnClick()]に設定します。