夜風のMixedReality

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

InteractablesExamples/Traditional Style ~MixedRealityToolkit v2 Examplesを触ってみる。 その⑤~

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

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

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

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

 今回はTraditional Styleを見ていきます。

redhologerbera.hatenablog.com

〇Traditional Style

 [Traditional Style]は前回見た[Button]に含まれているボタンです。

 [Button]は[Interactable.cs]を用いた様々なスタイルのボタンのサンプルを見ることができます。

f:id:Holomoto-Sumire:20200214090343j:plain その名の通りWebなどでよく見るクラシックなデザインです。こちらもこれまで見たInteractablesExamplesのオブジェクト同様[Interactable.cs]がアタッチされています。

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

●Button

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

 クラシックなボタンです。Unityのprimitive3DObjectにも見える[Plane]オブジェクトに[Interactable.cs]がアタッチされており、ボタンとして機能しています。

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

 デザインとしてはシンプルですが、前回見たHoloLens 1st Style、HoloLens 2 Styleといったすべてのボタンの中で最もシンプルな形状をしています。

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

 構造を見てみるとTextが張り付けられている[Label]、ボタンのメインとなるメッシュの[FrontPlate]、そして装飾に当たる[Borders]というオブジェクトがあります。

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

●ToggleButton

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

 [ToggleButton] は[Button]と同じように動作しますが、一度AirTap、touchするとFrontPlateのマテリアルが青く変化します。

 [Interactable.cs]の[Profiles]の[Theme]として[DeSelected(非選択状態)]、[Selected(選択状態)]と二つ用意されており[ScaleOffsetColorTheme]として状態に応じて色が変化する仕組みとなっています。

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

[ToggleButton]の[Selection Mode]が設定されています。

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

●AnimatorButton

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

 [AnimatorButton]には[Profiles]の[Theme]に[Animation]としてAnimatorのtoggleを変える仕組みが用意されています。

f:id:Holomoto-Sumire:20200214094115j:plain   オブジェクトにAnimatorをアタッチし、toggleを設定することでボタンを押すことでAnimationを行うことができます。

 

redhologerbera.hatenablog.com