本日はMRTKのExamples枠です。
MRTKでは機能のサンプルとしてExamplesのシーンでデモとして公開しています。
前回からPressableButtonExamplesシーンを読み解いています。
前回はUnityのプリミティブ3Dオブジェクト（Unity内で作成できる３Dモデル）のCubeを用いてゼロからボタンを作成する過程をみました。
今回はCustom Button Examplesを読み解きます。
〇Custom Button Examples
●PressableRoundButton
丸型のボタンで[PressableRoundButton]という名前でPrefabが存在します。
PressableRoundButtonは大きく２種類のパーツで構成されており、[ButtonContent]がボタン本体、[SeeItSayItLabel]がボタンの下部にあるラベルを構成します。
[ButtonContent]はさらに[Tube]、[FontPlate]、[TextMeshPro]、[CylinderContainer]がありますが、[FontPlate]、[TextMeshPro]はディアクティブで使用されておらず、実質ボタンの土台のオブジェクトの[Tube]とボタン本体の[CylinderContainer]で構成されています。
CylinderContainerは位置情報だけもつ空のオブジェクトで子オブジェクトのCylinderがボタンです。
このCylinderにはMRTKStandardShaderのマテリアルがアタッチされており、HoverLightによってカーソルが当たると光が付くようになっています。
様々なパーツで構成されているPressableRoundButtonですが、ボタンとしての機能はすべての親オブジェクトのPressableRoundButtonにまとめられています。
●PressableRoundButtonの構成
PressableRoundButtonは[BoxCollider]、[PressableButton]、[PhysicalPressEventRouter]、[Interactable]、[AudioSource]、[NearInteractionTouchable]で構成されています。
[PressableButton]はHoloLens2でのHandTrackingを用いたユーザーの手でボタンを押すことができるようにするコンポーネントです。
画像左側が[PressableButton]コンポーネントをオフにしたものです。 ボタンを指で押しても右に比べ反応しなくなっています。
[Interactable]コンポーネントはユーザーのアクションに対してリアクションを返すコンポーネントです。
Interactableコンポーネントの[Profiles]ではオブジェクトの持つ状態ごとに様々なアクションを返す[Theme]とそのターゲットを指定できます。
ここでは[SeeItSayItLabel]と[Cylinder]がターゲットとして指定されており、それぞれのThemeが指定されています。
SeeItSayItLabelには[HolographicButtonSeeItSayItLabel]という名前のThemeで状態によって[Scale]が変化するThemeが使用されています。
[Forcus]の状態ではScaleがx,y,zそれぞれ１、それ以外の状態では０が指定されており、ボタンにForcusがあっている状態のみSeeItSayItLabelが現れてそれ以外では見えなくなる設定がされています。
同様に[Cylinder]にもThemeが設定されておりこちらは状態によって色とOffset（位置）が変わるようになっています。
Pressed（押された）状態でOffsetのzが0.24変位することでボタンが押されるアニメーションが行われます。
このThemeによってユーザーがより押したことを知覚しやすいデザインが実現されています。
[PhysicalPressEventRouter][NearInteractionTouchable]は遠距離からのAirTap操作でのボタンを押すことと、近距離からのHandTrackingでのtouch動作を紐づけてどちらも使用できるようにしています。
以上がPressableRoundButtonの中身です。
ボタンを押した後のイベントはInteractableコンポーネントのEvents,OnClick()内で指定することで実装できます。
