ボタン

ボタンのメイン

ボタンは、特定の操作を直ちに実行する手段をユーザーに提供します。 これは、Mixed Reality の最も重要なコンポーネントの 1 つです。 MRTK には、さまざまな種類のボタン プレハブが提供されています。

MRTK のボタン プレハブ

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

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

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

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

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2、近接光、圧縮されたフロント プレートなど、さまざまな視覚的フィードバックをサポートするバックプレートを備えたシェルスタイルのボタン

HoloLens 2を使用しないシェル スタイルのボタン

HoloLens 2を含むシェル スタイルのボタン

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V PressableButtonHoloLens2Bar3V

ワイド HoloLens 2のシェル スタイル のボタン 32x96mm

共有バックHoloLens 2付き水平ボタン バー

共有バックHoloLens 2付き垂直ボタン バー

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2のシェル スタイルのチェック ボックス 32x32mm

HoloLens 2のシェル スタイル スイッチ 32x32mm

HoloLens 2のシェル スタイルのラジオ 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2のシェル スタイルのチェック ボックス 32x96mm

HoloLens 2のシェル スタイル スイッチ 32x96mm

HoloLens 2のシェルスタイルのラジオ 32x96mm

放射状 放射状

チェックボックス チェックボックス

ToggleSwitch ToggleSwitch

放射状ボタン

Checkbox

トグル スイッチ

ButtonHoloLens1 ButtonHoloLens1

PressableRoundButton PressableRoundButton

ボタンの基本 ボタン

HoloLens第 1 世代のシェル スタイル ボタン

丸い形状のプッシュ ボタン

[基本] ボタン

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

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

たとえばHoloLens 2、不透明なバックプレートを含むボタンを使用する方法をお勧めします。 透過的なボタンは、次の使いやすさと安定性の問題のために推奨されません。

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

ボタンのプレート

押しボタンを使用する方法

Unity UI ベースのボタン

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

  • [CONVERT TO MRTK Canvas]をクリックします。
  • [Add NearInteractionTouchableUnityUI]をクリックします。
  • Rect Transform コンポーネントの X、Y、Z スケールを 0.001 に設定します

次に PressableButtonUnityUI PressableButtonUnityUICircular 、(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab)、(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 イベントを使用して、キューブの色の変更をトリガーします。 このイベントは、視線入力、エアタップ、手線などのさまざまな種類の入力方法に対してトリガーされます。また、押しボタン スクリプトを介した物理的なボタンの押下も可能です。

How to Use Interactable

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

How to use events

特定の多関節ハンド入力状態情報を活用するには、押しボタン イベント (Touch Begin、Touch End、Button Pressed、Button Released )を使用できます。 ただし、これらのイベントは、エアタップ、ハンドレイ、または目の入力に応答して発生します。 近い対話と遠く離れた相互作用の両方をサポートするには、Interactable の OnClick イベントを使用してください

How to use Pressable Buttons

相互作用の状態

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

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

近接ライト フォーカスの強調表示 圧縮用のケージ Pulse on トリガー
近接ライト フォーカスの強調表示 圧縮用のケージ Pulse on トリガー

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

インスペクターのプロパティ

ボタンの構造

Box コライダー Box Colliderボタンの前面のプレートの 。

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

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

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

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

NearInteractionTouchable.cs 多関節手入力で任意のオブジェクトをタッチ可能にする場合に必要です。

プレハブ レイアウト

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

ボタンのレイアウト

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

MRTK ボタンは、ボタンのアイコン、テキスト、ラベルを変更する場合に ButtonConfigHelper 便利なコンポーネントを使用します。 (選択したボタンに要素が存在しない場合は、一部のフィールドが存在しない場合があります)。

ボタン構成ヘルパー

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

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

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

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

アセット メニューを使用して新しいボタン アイコン セットを作成できます:[作成] > Mixed Reality Toolkit >アイコン セット。 quad アイコンとスプライト アイコンを追加するには、それらをそれぞれの配列にドラッグします。 Char アイコンを追加するには、まずフォントアセットを作成して割り当てる必要があります。

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

ボタンをアップグレードするには、Microsoft.MixedRealityToolkit.Unity.Tools パッケージをインポートする必要があります。

アップグレード ウィンドウのダイアログ

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

カスタム アイコン通知

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

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

次に、ウィンドウで TextMeshPro フォントアセット作成者を開> TextMeshPro > Font Asset Creator を選択します。 フォント atlas を使用して新しいフォントを生成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

ボタンの作成 1

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

ボタンの作成 3

ボタンの作成 2

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

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

ボタン アイコンの設定

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

HoloLens 2シェル スタイルのボタンのサイズは 32x32mm です。 ディメンションをカスタマイズするには、ボタン プレハブでこれらのオブジェクトのサイズを変更します。

  1. FrontPlate
  2. BackPlate の下の Quad
  3. ルート上の Box コ ライダー

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

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

Quad ボタン サイズのカスタマイズ  のサイズを更新する 2

Box コライダー ボタン のサイズのカスタマイズ  のサイズを更新する 3

[境界の修正] ボタン  サイズのカスタマイズ 4 をクリックします

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

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

Buttons Speech

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

Button speech 2

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

Button Speech 3

ボタンを最初から作成する方法

これらのボタンの例は 、PressableButtonExample シーンで確認 できます。

Pressable button cube 0

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

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

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

pressable button cube 3

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

Pressable Buton cube 1 Pressable button cube 2

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

Pressable button cube run 1

トラブルシューティング

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

[フロント プッシュの適用] プロパティが強調表示されている押しボタン スクリプト コンポーネント

近距離操作のタッチ可能な平面の前で開始プッシュ距離を移動するアニメーション化された例

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

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

Pressable button cube 4

[オプション Hover Light ] で と Proximity Light をFluentします。 これにより、近手 (近接光) と遠距離ポインター (ホバー ライト) の両方の相互作用に対する視覚的なフィードバックが可能になります。

pressable button cube 5 pressable button cube run 2

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

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

pressable button cube 7 Pressable Button Cube 6

4.ビジュアル状態を追加し、遠くの相互作用イベントを処理する

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

プロファイル テーマの選択

オブジェクトが遠く (手の光線または視線入力カーソル) と近い (手) の相互作用の両方に応答しているのが表示されます。

Pressable Button Cube Run 3 Pressable Button Cube Run 4

カスタム ボタンの例

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

Pressable Custom1 Pressable Custom2

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

Pressable Custom3

こちらもご覧ください