Button (ボタン)
Button (ボタン) を使うと、ユーザは即座にアクションを引き起こすことができます。Mixed Reality の最も基本的なコンポーネントの１つです。MRTK は、様々なタイプのボタン プレハブを提供しています。
MRTK のボタン プレハブ
MixedRealityToolkit.SDK/Features/UX/Interactable/Prefabs フォルダ下のボタン プレハブのサンプル
Unity UI の 画像/グラフィック ベースのボタン
UnityUIInteractableButton.prefabPressableButtonUnityUI.prefabPressableButtonUnityUICircular.prefabPressableButtonHoloLens2UnityUI.prefab
Collider（コライダー） ベースのボタン
 PressableButtonHoloLens2 |
 PressableButtonHoloLens2Unplated |
 PressableButtonHoloLens2Circular |
|---|---|---|
| HoloLens 2 のバック プレート付きのシェル スタイル ボタンは、Border light (ボーダー ライト)、Proximity light (近接ライト)、Compressed front plate (扁平なフロント プレート) などの様々な視覚フィードバックをサポートします。 | バックプレートのない HoloLens 2 のシェル スタイル ボタン | HoloLens 2 の円形シェル スタイル ボタン |
 PressableButtonHoloLens2_32x96 |
 PressableButtonHoloLens2Bar3H |
 PressableButtonHoloLens2Bar3V |
| ワイドな HoloLens 2 のシェル スタイル ボタン 32x96mm | バック プレートを共有する水平な HoloLens 2 ボタン バー | バック プレートを共有する垂直な HoloLens 2 ボタン バー |
 Radial |
 Checkbox |
 ToggleSwitch |
| Radial button | Checkbox | Toggle switch |
 ButtonHoloLens1 |
 PressableRoundButton |
 Button |
| HoloLens 1 のシェル スタイル ボタン | 丸型押しボタン | ベーシックなボタン |
Button.prefab は、 Interactable のコンセプトに基づいており、ボタンまたはその他のタイプのインタラクション可能な面に簡単な UI コントロールを提供します。 ベースライン ボタンは、近くのインタラクション要素に対して Articulated hand (多関節ハンド) で入力する場合や、遠くのインタラクション要素に対してゲイズ＋エアタップなど、利用可能な全ての入力方法をサポートします。音声コマンドを使用してボタンをトリガーすることもできます。
PressableButtonHoloLens2.prefab は、HoloLens 2 のシェル スタイル ボタンで、ダイレクト ハンド トラッキングの入力用に精密な動きをサポートします。 Interactable のスクリプトと PressableButton のスクリプトを組合わせています。
Pressable button (押しボタン) の使い方
Unity UI ベースのボタン
シーン上に Canvas を作成します (GameObject -> UI -> Canvas)。Canvas のインスペクター パネルにて以下を行います。
- "Convert to MRTK Canvas" をクリック
- "Add NearInteractionTouchableUnityUI" をクリック
- Rect Transform コンポーネントの X, Y, Z のスケールを 0.001 に設定
その後、PressableButtonUnityUI.prefab、 PressableButtonUnityUICircular.prefab、または PressableButtonHoloLens2UnityUI.prefab を Canvas にドラッグしてください。
コライダー ベースのボタン
単に PressableButtonHoloLens2.prefab またはPressableButtonHoloLens2Unplated.prefab をドラッグしてシーンに置くだけです。これらのボタン プレハブは、Articulated hand (多関節ハンド) 入力やゲイズなど、様々なタイプの入力に対して視聴覚フィードバックするように既に設定されています。
プレハブ自体と Interactable コンポーネントで公開されているイベントを使用して、追加のアクションをトリガーできます。 HandInteractionExample のシーンの pressable buttons は、Interactable の OnClick イベントを使って、キューブの色の変更をトリガーします。このイベントは、ゲイズ、エアタップ、ハンド レイ などの様々なタイプの入力メソッド、及び pressable button のスクリプトを介した物理的なボタンの押下に対してトリガーされます。
ボタンの PhysicalPressEventRouter を介して、Pressable button が OnClick イベントを発生させるタイミングを設定できます。例えば、Interactable On Click を Event On Press に設定することにより、OnClick をボタンを押して離した時ではなく、最初に押した時にトリガーするよう設定できます。
多関節ハンドの入力状態情報を活用するには、pressable button イベントの - Touch Begin, Touch End, Button Pressed, Button Released を使用できます。ただし、これらのイベントは、エアタップ、ハンド レイ、ゲイズ 入力には応答して発生はしません。
インタラクションの状態
アイドル状態では、ボタンの前面プレートは見えません。指が近づいたり、視線入力のカーソルが表面をターゲットすると、前面のプレートの光る境界線が現れます。前面プレートの表面には、指先の位置がさらにハイライトされます。指で押すと、前面プレートが指先で動きます。指先が前面プレートの表面に触れると、わずかにパルスのエフェクトが現れ、タッチ ポイントの視覚的なフィードバックが得られます。
このわずかなパルス エフェクトは、現在インタラクションしているポインター上に存在する ProximityLight(s) を探す、pressable button によってトリガーされます。近接ライトが見つかった場合、 ProximityLight.Pulse メソッドが呼び出され、シェーダー パラメーターを自動的にアニメーション化してパルスを表示します。
[Inspector] (インスペクター) プロパティ
Box Collider (ボックスコライダー)
ボタンの前面プレートのための Box Collider。
Pressable Button (押しボタン) ハンド プレス インタラクションでのボタン移動のロジック。
Physical Press Event Router (物理的なプレス イベントのルーター) ハンド プレス インタラクションから Interactable へイベントを送るスクリプト。
Interactable Interactable は様々なタイプのインタラクションの状態とイベントを処理します。HoloLens のゲイズ、ジェスチャ、及び音声入力と、没入型ヘッドセットのモーションコントローラーの入力は、このスクリプトによって直接処理されます。
オーディオ ソース 音声フィードバック クリップ用の Unity のオーディオ ソース。
NearInteractionTouchable.cs 多関節ハンドでオブジェクトをタッチ可能にするために必要です。
プレハブのレイアウト
ButtonContent オブジェクトには、フロント プレート、テキスト ラベル、およびアイコンが含まれています。 FrontPlateは、Button_Box シェーダーを使用して、人差し指の近接に応答します。 光る境界線、近接ライト、およびタッチのパルス エフェクトを示します。 テキスト ラベルは TextMesh Pro で作成されます。 SeeItSayItLabel の可視性は、Interactable のテーマによって制御されます。
アイコンとテキストの変更方法
ボタンのテキストを変更するには、IconAndText 配下の TextMeshPro オブジェクトの Text コンポーネントを更新します。アイコンを変更するには、UIButtonSquareIcon オブジェクトにアサインされているマテリアルを置き換えます。デフォルトでは、HolographicButtonIconFontMaterial がアサインされています。
新しいアイコンのマテリアルを作成するには、既存のアイコン マテリアルの1つを複製します。アイコン マテリアルはMixedRealityToolkit.SDK/Features/UX/Interactable/Materials フォルダー内にあります。
新しい PNG テクスチャを作成し、Unity にインポートします。既存の PNG ファイルのアイコンの例を参考にしてください。MixedRealityToolkit.SDK/Features/UX/Interactable/Textures
新しく作った PNG テクスチャを、マテリアルの Albedo プロパティにドラッグ アンド ドロップします。
マテリアルを UIButtonSquareIcon オブジェクトにアサインします。
音声コマンド ('See-it, Say-it')
Speech Input Handler (音声入力ハンドラー)
Pressable Buttonの Interactable スクリプトは、すでに IMixedRealitySpeechHandlerを実装しています。 ここで音声コマンドのキーワードを設定できます。
Speech Input Profile (音声入力プロファイル) さらに、グローバルな Speech Commands Profile に音声コマンド キーワードを登録する必要があります。
See-it, Say-it ラベル Pressable Button プレハブには、SeeItSayItLabel オブジェクトの下にプレースホルダー TextMesh Pro ラベルがあります。このラベルを使用して、ボタンの音声コマンド キーワードをユーザーに伝えることができます。
ボタンをゼロから作成する方法
これらのボタンの例は、PressableButtonExample のシーンにあります。
1. キューブで Pressable Button を作成する (ニア インタラクションのみ)
- Unity のキューブを作成します (GameObject > 3D Object > Cube)
PressableButton.csのスクリプトを追加しますNearInteractionTouchable.csのスクリプトを追加します
PressableButton の [Inspector] (インスペクター) パネルで、キューブ オブジェクトを Moving Button Visuals に割り当てます。
キューブを選択すると、オブジェクト上に複数の色付きのレイヤーが表示されます。 これにより、Press Settings 以下で設定されている距離の値が可視化されます。ハンドルを使用して、プレスを開始する (オブジェクトが動く) タイミングとイベントをトリガーするタイミングを設定できます。
ボタンを押すと、ボタンが移動し、TouchBegin()、TouchEnd()、ButtonPressed()、ButtonReleased() などの PressableButton.cs のスクリプトで公開されている適切なイベントが生成されます。
2. 視覚的なフィードバックをベーシックなキューブ ボタンに加える
MRTK Standard Shader は、視覚的なフィードバックを簡単に追加できるさまざまな機能を提供しています。 マテリアルを作成し、シェーダー Mixed Reality Toolkit/Standard を選択します。 または、MRTK 標準シェーダーを使用している /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 を追加し、キューブ オブジェクトを Profiles の下の Target フィールドにドラッグ アンド ドロップします。 次に、ScaleOffsetColorTheme タイプの新しいテーマを作成します。このテーマでは、Focus や Pressed などの特定のインタラクションの状態におけるオブジェクトの色を指定できます。スケールとオフセットも制御できます。Easing をチェックし、継続時間を設定して視覚的な変化をスムーズにします。
オブジェクトが遠く (ハンド レイ、またはゲイズ カーソル) と近く (ハンド) の両方のインタラクションに応答するのがわかります。
カスタム ボタンのサンプル
HandInteractionExample のシーン で、ピアノと丸ボタンの例を見てください。どちらも PressableButton を使用しています。
各ピアノのキーには、PressableButton と NearInteractionTouchable のスクリプトが割り当てられています。NearInteractionTouchable の Local Forward の方向が正しいことを確認することが重要です。エディターでは白い矢印で表されます。矢印がボタンの前面からその先を指していることを確認してください。
