夜風のMixedReality

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

PressableButtonExample ~MixedRealityToolkitExamplesを触ってみる~ その①

本日はMRTKのExamplesシーンの勉強枠です。

最近UIを取り組んでいることもありボタンのサンプルが並ぶPressableButtonExampleを見ていきます。

〇ゼロから作るボタン

PressableButtonExampleにはHoloLens 2用に[How to make a button from scratch?]と題してボタンの作り方が紹介されています。

●基本的なボタン(Basic Pressable Button (Near only)

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

①UnityのPrimitive3DObjectの[Cube]を作成し、[PressableButton.cs]と[NearInteractionTouchable.cs]をアタッチします。

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

2つのコンポーネントをアタッチすることでオブジェクトをtouchした時にアクションが起こるようになります。

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

②MRTKStandardシェーダを使用したHoverLightをつける。

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

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

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

[PressableButtonCube]のマテリアルに[MRTKStandardShader]をアタッチしています。

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

マテリアルのpropertyから[HoverLight]のチェックボックスにチェックを入れることでカーソルが当たると明るくなります。

③オーディオをアタッチする

[PressableButtonCube]に[AudioSource]をアタッチします。

f:id:Holomoto-Sumire:20200623100400j:plain [PressableButton.cs]の[Events],[Button Pressed()]と[Button Released()]にイベントを追加して自身の[AudioSource]をアタッチし[PlayOneShot]で[MRTK_Select_Main]を実行するように設定しています。

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

これでボタンをtouchした時、音が鳴るようになりました。

④Interactableのテーマで視覚的を行う。

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

[Interactable]コンポーネントをアタッチします。

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

[Interactable]コンポーネントの[Profiles]の[Target]に自分自身をアタッチします。これはthemeの実行対象を指します。

行う[Theme]をアタッチします。

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

ここでは[Scale Offset Color Theme]が使用されています。 これはターゲットオブジェクトの状態によって色や大きさを変化させるthemeです。

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

・default

デフォルト状態での色と大きさを指定します。 

・Forcus

カーソルが当たっているときの色と大きさを指定します。

・Pressed

 オブジェクトに触れているときの色と大きさを指定します。

・Disabled

オブジェクトの状態が不明な時の色と大きさを指定します。

⑤PhysicalPressを使用して、InteractableのOnClickイベントを近距離と遠距離の両方で使用できるようにします。

最後にPhysicalPressコンポーネントをアタッチします。

InteractableコンポーネントのEvent、OnClick()でボタンの選択時のアクションが指定できますが、AirTapのみ対応している状態になります。

PhysicalPressコンポーネントをアタッチすることでボタンをHoloLens2のHandTrackingでタッチすることでもイベントが発火するようになります。

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

PhysicalPressコンポーネントの[Routhing Target]に自身のInteractableコンポーネントを使用することでAirTapでの遠隔の選択動作とHandTrackingの近距離での選択動作が紐づきます。

以上がUnityのプリミティブ3DオブジェクトのCubeからボタンを作る流れになります。