夜風のMixedReality

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

MRTKのボタン(UI)に関して勉強した MRTKで提供されているボタンの種類

本日はMRTKのボタンに関しての記事です。

MRTKではプレファブとしていくつかのUIが提供されています。

本ブログでは調査を兼ねオリジナルのUIの作成に挑戦しています。

redhologerbera.hatenablog.com

今回はMRTKのボタンに関するドキュメントを読みながらさらなる理解を深めます。

microsoft.github.io

〇MRTKのボタンプレハブ

MRTK/SDK/Features/UX/Interactable/Prefabsに格納されています。

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

●コライダーベースのボタン

・PressableButtonHoloLens2

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

・PressableButtonHoloLens2Unplated

バックプレートがないタイプです。

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

・PressableButtonHoloLens2Circular

丸いタイプのボタンです。

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

・PressableButtonHoloLens2_32x96

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

・PressableButtonHoloLens2Bar3H

一つのプレートに3種のボタンが並んだプレファブです。

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

・PressableButtonHoloLens2Bar3V

PressableButtonHoloLens2Bar3Hの縦版です。 HはHorizontal、VはVerticalを意味していると思われます。

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

・PressableButtonHoloLens2ToggleCheckBox_32x32

チェックボックスタイプのボタンです。

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

inspectorからInteractableをみると[SelectionMode]が[Button]ではなく[Toggle]として使用されていることがわかります。

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

・PressableButtonHoloLens2ToggleSwitch_32x32

オンオフが可視的に理解できるSwitchタイプのボタンです。

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

PressableButtonHoloLens2ToggleCheckBox_32x32同様[Interactable]の[SelectionType]が[Toggle]になっています。

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

プレファブには[UIButtonToggleIconOn][UIButtonToggleIconOff]の二つのオブジェクトがあり、ボタンのアクションでアクティブ、ディアクティブが切り替わることでオンオフを実現しています。

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

f:id:Holomoto-Sumire:20200605092027j:plain
UIButtonToggleIconOn

・PressableButtonHoloLens2ToggleRadio_32x32

ラジオボタン型です。

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

こちらもディアクティブのアイコンオブジェクトがアクティブに変わることでオンオフを可視化しています。

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

・PressableButtonHoloLens2ToggleCheckBox_32x96

チェックボックスとテキストを横に並べることができるボタンです。(アンケートとかによくあるタイプ)

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

・PressableButtonHoloLens2ToggleSwitch_32x96

Switchタイプの横に長いボタンです。

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

・PressableButtonHoloLens2ToggleRadio_32x96

ラジオボタンタイプの横に長いボタンです。

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

・Radial

バックプレートがなく3Dオブジェクトとして独立しているラジオボタンです。

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

これは以前 MRTK ExamplesのInteractablesExamplesシーンで見ています。

redhologerbera.hatenablog.com

・Checkbox

3Dオブジェクトとして独立したチェックボックスです。

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

こちらも以前 MRTK ExamplesのInteractablesExamplesシーンで見ています。

redhologerbera.hatenablog.com

・ToggleSwitch

Switchが3Dオブジェクトとして独立したタイプです。

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

・ButtonHoloLens1

HoloLens1st から使用されているクラシックなタイプです。

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

・PressableRoundButton

現実でよく見る3Dオブジェクトのボタンです。

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

・Button

最もシンプルなボタンです。

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