ボタン — MRTK2

ボタンを使用すると、ユーザーは即時アクションをトリガーできます。 これは、Mixed Reality の最も基本的なコンポーネントの 1 つです。 MRTK には、さまざまな種類のボタン プレハブが用意されています。

MRTK のボタン プレハブ

MRTK/SDK/Features/UX/Interactable/Prefabs フォルダーの下にあるボタン プレハブの例

UNITY UI イメージ/グラフィック ベースのボタン

• UnityUIInteractableButton.prefab
• PressableButtonUnityUI.prefab
• PressableButtonUnityUICircular.prefab
• PressableButtonHoloLens2UnityUI.prefab

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

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) は、ボタンやその他の種類の対話型サーフェスに簡単な UI コントロールを提供するための Interactable 概念に基づいています。 ベースライン ボタンは、近距離の操作に対する多関節ハンド入力や、遠距離操作の視線入力 + エアタップなど、使用可能なすべての入力方法をサポートします。 音声コマンドを使用してボタンをトリガーすることもできます。

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) は、直接手追跡入力のボタンの正確な移動をサポートするHoloLens 2のシェル スタイル ボタンです。 スクリプトとPressableButtonスクリプトInteractable組み合わせています。

HoloLens 2の場合は、不透明なバックプレートを持つボタンを使用することをお勧めします。 次の使いやすさと安定性の問題のため、透明ボタンはお勧めしません。

• アイコンとテキストは物理環境では読みにくい
• イベントがトリガーされるタイミングを理解するのは困難です
• 透明な平面を介して表示されるホログラムは、HoloLens 2の深度 LSR 安定化によって不安定になる可能性があります

押せるボタンの使用方法

UNITY UI ベースのボタン

シーンにキャンバスを作成します (GameObject -> UI -> Canvas)。 キャンバスの [インスペクター] パネルで、次の操作を行います。

• [MRTK キャンバスに変換] をクリックします
• [Add NearInteractionTouchableUnityUI] をクリックします
• Rect Transform コンポーネントの X、Y、Z スケールを 0.001 に設定する

次に、 PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab)、 PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs) をドラッグします。 /PressableButtonUnityUICircular.prefab)、または PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) をキャンバスに配置します。

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

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) または PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) をシーンにドラッグするだけです。 これらのボタン プレハブは、多関節ハンド入力や視線入力など、さまざまな種類の入力に対するオーディオ ビジュアル フィードバックを持つよう既に構成されています。

プレハブ自体と Interactable コンポーネントで公開されているイベントを使用して、追加のアクションをトリガーできます。  HandInteractionExample シーンの押しボタンは、Interactable の OnClick イベントを使用して、キューブの色の変更をトリガーします。 このイベントは、視線入力、エアタップ、ハンドレイ、押しボタン スクリプトを介した物理的なボタンの押しなど、さまざまな種類の入力メソッドに対してトリガーされます。

ボタンのPhysicalPressEventRouterを使用して、押せるボタンが OnClick イベントを発生するタイミングを構成できます。 たとえば、ボタンが最初に押されたときに OnClick を起動するように設定できます。押すと離されるのではなく、 Interactable On Click を [イベントを押す] に設定します。

特定の多関節ハンド入力状態情報を活用するには、押せるボタン イベント ( タッチ開始、 タッチ 終了、 ボタンの押下、 ボタンのリリース) を使用できます。 ただし、これらのイベントは、エアタップ、ハンドレイ、または目の入力に応答して発生しません。 近接操作と遠距離操作の両方をサポートするには、Interactable の OnClick イベントを使用することをお勧めします。

相互作用の状態

アイドル状態では、ボタンのフロント プレートは表示されません。 視線入力から指が近づくか、カーソルがサーフェスをターゲットにすると、前面プレートの光る境界線が表示されます。 前面プレートの表面に指先の位置の追加の強調表示があります。 指で押すと、フロントプレートは指先で動きます。 指先がフロントプレートの表面に触れると、タッチポイントの視覚的フィードバックを与えるために微妙なパルス効果を示します。

HoloLens 2シェルスタイルのボタンには、多くの視覚的な手掛かりとアフォーダンスがあり、ユーザーの対話に対する信頼度を高めます。

近接照明	フォーカスの強調表示	ケージの圧縮	トリガー上のパルス

微妙なパルス効果は、押し可能なボタンによってトリガーされ、現在対話しているポインターに存在する ProximityLight を 探します。 近接ライトが見つかった場合は、 ProximityLight.Pulse メソッドが呼び出され、シェーダー パラメーターが自動的にアニメーション化されてパルスが表示されます。

Inspector プロパティ

Box コライダーBox Collider ボタンのフロント プレート用。

押せるボタン 手押し操作によるボタンの動きのロジック。

物理プレス イベント ルーター このスクリプトは、手押し操作から Interactable にイベントを送信します。

Interactable Interactableは 、さまざまな種類の対話状態とイベントを処理します。 HoloLens の視線入力、ジェスチャ、音声入力、イマーシブ ヘッドセットモーション コントローラーの入力は、このスクリプトによって直接処理されます。

オーディオ ソース Unityオーディオ フィードバック クリップのオーディオ ソースです。

NearInteractionTouchable.cs 多関節ハンド入力でオブジェクトをタッチ可能にするために必要です。

プレハブ レイアウト

ButtonContent オブジェクトには、フロント プレート、テキスト ラベル、アイコンが含まれています。 FrontPlate は、Button_Box シェーダーを使用してインデックス指先の近接性に応答します。 これは、光る境界線、近接光、タッチにパルス効果を示しています。 テキスト ラベルは TextMesh Pro で作成されます。 SeeItSayItLabel の可視性は 、Interactable のテーマによって制御されます。

アイコンとテキストを変更する方法

MRTK ボタンは、ボタンのアイコン、テキスト、ラベルを変更するのに役立つ ButtonConfigHelper コンポーネントを使用します。 (選択したボタンに要素が存在しない場合、一部のフィールドが存在しない場合があることに注意してください)。

アイコン セットの作成と変更

アイコン セットは、ButtonConfigHelper コンポーネントによって使用されるアイコン 資産の共有セットです。 3 つのアイコン スタイル がサポートされています。

• クワッド アイコンは、 MeshRendererを使用してクワッドにレンダリングされます。 これは既定のアイコン スタイルです。
• スプライト アイコンは、 SpriteRendererを使用してレンダリングされます。 これは、アイコンをスプライト シートとしてインポートする場合、またはアイコンアセットをUnity UI コンポーネントと共有する場合に便利です。 このスタイルを使用するには、スプライト エディター パッケージ (Windows -> パッケージ マネージャー -> 2D スプライト) をインストールする必要があります
• 文字 アイコンは、 TextMeshPro コンポーネントを使用してレンダリングされます。 これは、アイコン フォントを使用する場合に便利です。 HoloLens アイコン フォントを使用するには、 TextMeshPro フォントアセットを作成する必要があります。

ボタンで使用するスタイルを変更するには、ButtonConfigHelper の [ アイコン ] ドロップダウンを展開し、[ アイコン スタイル ] ドロップダウンから選択します。

新しいボタン アイコンを作成するには:

1. [ プロジェクト ] ウィンドウで、[ アセット ] を右クリックしてコンテキスト メニューを開きます。 ( Assets フォルダーまたはそのサブフォルダーの 1 つ内の空白を右クリックすることもできます)。

2. [Create > Mixed Reality > Toolkit > Icon Set] を選択します。

   

クワッド アイコンとスプライト アイコンを追加するには、それらをそれぞれの配列にドラッグするだけです。 Char アイコンを追加するには、まずフォントアセットを作成して割り当てる必要があります。

MRTK 2.4 以降では、カスタム アイコン テクスチャを IconSet に移動することをお勧めします。 プロジェクト内のすべてのボタンのアセットを新しい推奨形式にアップグレードするには、ButtonConfigHelperMigrationHandler を使用します。 (Mixed Reality Toolkit -> Utilities -> 移行ウィンドウ -> 移行ハンドラーの選択 -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Microsoft.MixedRealityToolkit のインポート。Unity。ボタンをアップグレードするために必要なツール パッケージ。

移行中に既定のアイコン セットにアイコンが見つからない場合は、MixedRealityToolkit.Generated/CustomIconSets にカスタム アイコン セットが作成されます。 ダイアログは、これが行われたことを示します。

HoloLens アイコンフォントアセットの作成

まず、アイコンフォントをUnityにインポートします。 Windows マシンでは、Windows /Fonts/holomdl2.ttf で既定の HoloLens フォントを見つけることができます。このファイルをコピーして Assets フォルダーに貼り付けます。

次に、TextMeshPro > Font Asset Creator >ウィンドウから TextMeshPro フォント アセットの作成者を開きます。HoloLens フォント アトラスを生成するための推奨設定を次に示します。 すべてのアイコンを含める場合は、次の Unicode 範囲を [文字シーケンス ] フィールドに貼り付けます。

E700-E702,E706,E70D-E70E,E710-E714,E718,E71A,E71D-E71E,E720,E722,E728,E72A-E72E,E736,E738,E73F,E74A-E74B,E74D,E74F-E752,E760-E761,E765,E767-E769,E76B-E76C,E770,E772,E774,E777,E779-E77B,E782-E783,E785-E786,E799,E7A9-E7AB,E7AF-E7B1,E7B4,E7C8,E7E8-E7E9,E7FC,E80F,E821,E83F,E850-E859,E872-E874,E894-E895,E8A7,E8B2,E8B7,E8B9,E8D5,E8EC,E8FB,E909,E91B,E92C,E942,E95B,E992-E995,E9E9-E9EA,EA37,EA40,EA4A,EA55,EA96,EB51-EB52,EB65,EB9D-EBB5,EBCB-EBCC,EBCF-EBD3,EC03,EC19,EC3F,EC7A,EC8E-EC98,ECA2,ECD8-ECDA,ECE0,ECE7-ECEB,ED17,EE93,EFA9,F114-F120,F132,F181,F183-F186

フォント アセットが生成されたら、プロジェクトに保存し、アイコン セットの Char アイコン フォント フィールドに割り当てます。 [ 使用可能なアイコン] ドロップダウンが設定されます。 アイコンをボタンで使用できるようにするには、アイコンをクリックします。 [ 選択したアイコン ] ドロップダウンに追加され、必要に応じてアイコンにタグを付けることができます ButtonConfigHelper. に表示されます。 これにより、実行時にアイコンを設定できます。

public void SetButtonToAdjust()
{
    ButtonConfigHelper buttonConfigHelper = gameObject.GetComponent<ButtonConfigHelper>();
    buttonConfigHelper.SetCharIconByName("AppBarAdjust");
}

アイコン セットを使用するには、ボタンを選択し、 ButtonConfigHelper の [アイコン] ドロップダウンを展開し 、[アイコン セット ] フィールドに割り当てます。

ボタンのサイズを変更する方法

HoloLens 2のシェルスタイルのボタンのサイズは32x32mmです。 寸法をカスタマイズするには、ボタン プレハブで次のオブジェクトのサイズを変更します。

1. FrontPlate
2. BackPlate の下のクワッド
3. ルート上の Box コライダー

次に、ボタンのルートにある NearInteractionTouchable スクリプトの [ 境界の修正 ] ボタンをクリックします。

FrontPlate ボタンサイズのカスタマイズのサイズを更新

クワッド ボタンのサイズのカスタマイズのサイズを更新

Box Collider ボタンのサイズの

[境界の修正]

音声コマンド ('see-it, say-it')

音声入力ハンドラー Pressable Button の Interactable スクリプトには、既に IMixedRealitySpeechHandlerが実装されています。 音声コマンドキーワード (keyword)は、ここで設定できます。

音声入力プロファイルさらに、グローバル音声コマンド プロファイルに音声コマンド キーワード (keyword)を登録する必要があります。

See-it、Say-it ラベル 押せるボタン プレハブには、 SeeItSayItLabel オブジェクトの下に TextMesh Pro ラベルのプレースホルダーがあります。 このラベルを使用して、ボタンの音声コマンドキーワード (keyword)をユーザーに伝えることができます。

ボタンをゼロから作成する方法

これらのボタンの例は、 PressableButtonExample シーンにあります。

1. キューブを使用して押せるボタンを作成する (ほぼ対話のみ)

1. Unity キューブを作成する (GameObject > 3D オブジェクト > キューブ)
2. スクリプト PressableButton.cs 追加する
3. スクリプト NearInteractionTouchable.cs 追加する

PressableButtonのインスペクター パネルで、キューブ オブジェクトを移動ボタン ビジュアルに割り当てます。

キューブを選択すると、オブジェクトに複数の色付きレイヤーが表示されます。 これにより、[ 設定を押す] の下の距離値が視覚化されます。 ハンドルを使用すると、押しを開始するタイミング (オブジェクトを移動する) とイベントをトリガーするタイミングを構成できます。

ボタンを押すと、TouchBegin()、TouchEnd()、ButtonPressed()、ButtonReleased() などの PressableButton.cs スクリプトで公開されている適切なイベントが移動して生成されます。

トラブルシューティング

ボタンが二重押しを実行している場合は、[ フロント プッシュを適用] プロパティがアクティブであり、[ プッシュ距離の開始 ] 平面が Near Interaction Touchable プレーンの前に配置されていることを確認します。 Near Interaction Touchable 平面は、下の gif の白い矢印の原点の前に配置された青い平面によって示されます。

2. 基本的なキューブ ボタンに視覚的なフィードバックを追加する

MRTK Standard シェーダーには、視覚的なフィードバックを簡単に追加できるさまざまな機能が用意されています。 マテリアルを作成し、シェーダー Mixed Reality Toolkit/Standardを選択します。 または、MRTK Standard Shader を使用する/SDK/StandardAssets/Materials/の下にある既存のマテリアルのいずれかを使用または複製できます。

[Fluent Options]\(流暢なオプション\) の下の [Hover LightとProximity Light] をオンにします。 これにより、ニアハンド(近接ライト)とファーポインター(ホバーライト)の両方の相互作用に視覚的なフィードバックが可能になります。

3. 基本的なキューブ ボタンにオーディオ フィードバックを追加する

PressableButton.csスクリプトは TouchBegin()、TouchEnd()、ButtonPressed()、ButtonReleased() などのイベントを公開するため、オーディオ フィードバックを簡単に割り当てることができます。 キューブ オブジェクトにUnityのAudio Sourceを追加し、AudioSource.PlayOneShot() を選択してオーディオ クリップを割り当てるだけです。 /SDK/StandardAssets/Audio/ フォルダーの下でMRTK_Select_Mainオーディオ クリップとMRTK_Select_Secondaryオーディオ クリップを使用できます。

4. 視覚的な状態を追加し、遠い相互作用イベントを処理する

Interactable は、さまざまな種類の入力操作の視覚的な状態を簡単に作成できるスクリプトです。 また、遠い相互作用イベントも処理します。 Interactable.csを追加し、[プロファイル] の [ターゲット] フィールドにキューブ オブジェクトをドラッグ アンド ドロップします。 次に、 ScaleOffsetColorTheme 型の新しいテーマを作成します。 このテーマでは、 フォーカス や 押されたなどの特定の相互作用状態のオブジェクトの色を指定できます。 スケールとオフセットも制御できます。 [ イージング] をオンにし、期間を設定して視覚的な切り替えをスムーズにします。

オブジェクトは、遠方 (ハンド レイカーソルまたは視線入力カーソル) と near(hand) の両方の相互作用に応答します。

カスタム ボタンの例

HandInteractionExample シーンで、PressableButtonを使用しているピアノと丸いボタンの例を参照してください。

各ピアノキーには、 PressableButton と NearInteractionTouchable スクリプトが割り当てられます。 NearInteractionTouchableのローカル転送方向が正しいことを確認することが重要です。 エディターの白い矢印で表されます。 矢印がボタンの前面から離れた位置にあることを確認します。

関連項目

• 対話可能
• ビジュアル テーマ