次の方法で共有


ボタン — MRTK3

Button Main

ボタンは、特定の操作を直ちに実行する手段をユーザーに提供します。 これは Mixed Reality の最も基本的なコンポーネントの 1 つであり、高品質の Mixed Reality エクスペリエンスには、満足のいく信頼性の高いボタン操作を提供することが不可欠です。 MRTK には、キャンバスベースとキャンバスベース以外の 2 つのカテゴリのボタン プレハブが用意されています。 どちらの構成でも、ボタンに固有の動作を含めるために拡張された のStatefulInteractableサブクラスである スクリプトが使用PressableButtonされます。

ハイブリッド キャンバス UI システムのしくみの詳細を確認してください

シーンの例

開発テンプレート プロジェクトを使用している場合は、使用可能なボタン プレハブを示すいくつかのサンプル シーンを使用できます。

CanvasUITearSheet.unity には、MRTK で使用可能なすべてのキャンバス ベースのボタン プレハブ バリアントが表示されます。

キャンバスティアシート

CanvasExample.unity は、Canvas ベースのコンポーネントを使用して大きなレイアウトを構築する例をいくつか示しています。

キャンバスのシーンの例

プレハブ

キャンバスベースの ボタンは柔軟で構成可能で、サイズを任意のディメンションまたは比率に変更できます。 そのため、少数のボタン プレハブのみが提供されます。

  • EmptyButton は、押し付け可能なサーフェス/フロントプレート、ホログラフィック バックプレート、光彩効果を提供します。 テキスト、アイコン、ラベル、その他のコンテンツはありません。 これは、テキストやアイコンのコンテンツに干渉することなく、より抽象的なボタンのようなコントロールをこのプレハブのバリアントとして構築できます。
  • ActionButton は、アイコン、テキスト、ラベルを含む単純なボタンです。 これらの個々のコンポーネントは有効または無効にすることができ、それに応じてレイアウト システムが適合します。

トグル スイッチ インジケーターなど、その他の拡張機能をボタンに追加できます。 フロントプレートで移動することを意図していないフィーチャは、バックプレート コンポーネントにアタッチする必要があります。

トグル スイッチの追加

構造体

ActionButton のさまざまな部分をオンまたはオフにして、ボタンの外観と動作をカスタマイズできます。 ボタン プレハブのさまざまな部分を示すために、2 つの異なる構成を解剖しました。 ボタンがアクティブに押されていないため、これらのスクリーンショットには "バックグロウ" が表示されません。

まず、メイン Text オブジェクトがアクティブで、インライン スタイルを使用してヘッダーとサブテキストの両方を表示する大規模な構成です。 大きなキャンバス ボタンの構造 次に、 がアクティブな小さな構成で、アイコンの下にアクションの説明が表示されます。 メイン Text オブジェクトは無効になっています。 小さなキャンバス ボタンの構造

PressableButton クラス

クラスは PressableButton 、ボタンに固有の新しいオーバーライドされた関数を使用して から StatefulInteractable 派生します。 インスペクターでは、 からStatefulInteractable構成可能な他のすべての設定に加えて、ボリュームプレスに関連する設定を構成できます。 PressableButton インスペクターのスクリーンショット

ボタンを使用した UI の構築

複数のボタンを含むメニューまたは UI パネルを作成する場合は、共有バックプレート ジオメトリを使用することをお勧めします。 共有バックプレートを使用することで、視覚的なノイズを減らし、使いやすさを向上させることができます。 共有バックプレートの上にボタンをレイアウトする例をいくつか次に示します。

UI の構築 1

UI の構築 2

UI の構築 3

追加コンポーネント

参考までに、ボタン ビジュアルと機能の側面を処理する追加コンポーネントを次に示します。

  • ボタンが選択されたときに観察されるビジュアルフロントプレートパルスは、コンポーネントによって InteractablePulse 処理されます。
  • ボタン アイコンは、 を使用 FontIconSelectorして MRTK アイコンに設定できます。
  • RectTransformColliderFitter必要に応じて、キャンバス ボタンで を使用して、 BoxCollider を その RectTransformに合わせて使用できます。 これは、パフォーマンスのために既定で無効になっているコンポーネントです。