ボタンを使用すると、ユーザーは即時アクションをトリガーできます。 これは Mixed Reality の最も基本的なコンポーネントの 1 つであり、高品質の Mixed Reality エクスペリエンスには満足のいく信頼性の高いボタン操作を提供することが不可欠です。 MRTK には、キャンバス ベースと非キャンバス ベースの 2 つのカテゴリのボタン プレハブが用意されています。 どちらの構成でも、ボタンに固有の動作を含むように拡張StatefulInteractableのサブクラスである PressableButton スクリプトが使用されます。
ハイブリッドキャンバス UI システムのしくみの詳細については、こちらをご覧ください。
シーンの例
開発テンプレート プロジェクトを使用している場合は、使用可能なボタン プレハブを示すいくつかのサンプル シーンを使用できます。
CanvasUITearSheet.unity には、MRTK で使用可能なすべてのキャンバス ベースのボタン プレハブバリアントが表示されます。
CanvasExample.unity は、Canvas ベースのコンポーネントを使用して大きなレイアウトを構築する例をいくつか示しています。
プレハブ
キャンバスベースの ボタンは柔軟で構成可能で、任意の次元または比率にサイズ変更できます。 そのため、いくつかのボタン プレハブのみが提供されます。
- EmptyButton は、押し込み可能なサーフェス/フロントプレート、ホログラフィック バックプレート、光彩効果を提供します。 テキスト、アイコン、ラベル、その他のコンテンツはありません。 これは、テキストやアイコンの内容を妨げることなく、より抽象的なボタンのようなコントロールをこのプレハブのバリアントとして構築できます。
- ActionButton は、アイコン、テキスト、ラベルを含む単純なボタンです。 これらの個々のコンポーネントは有効または無効にすることができ、レイアウト システムはそれに応じて適応します。
トグル スイッチ インジケーターなど、その他の拡張機能をボタンに追加できます。 フロントプレートを使用して移動することを意図していない機能は、バックプレート コンポーネントにアタッチする必要があります。
構造
ActionButton のさまざまな部分をオンまたはオフにして、ボタンの外観と動作をカスタマイズできます。 ボタン プレハブのさまざまな部分を表示するために、2 つの異なる構成を解剖しました。 ボタンがアクティブに押されていないため、これらのスクリーンショットには "バックグロー" が表示されません。
最初に、メインの Text オブジェクトがアクティブで、インライン スタイルを使用してヘッダーとサブテキストの両方を表示する大きな構成です。
2 つ目は、 がアクティブな小さな構成で、アイコンの下にアクションの説明が表示されます。 メインの Text オブジェクトが無効になっています。
PressableButton クラス
PressableButton クラスは、ボタンに固有の新しいオーバーライドされた関数を持つStatefulInteractableから派生します。
インスペクターでは、StatefulInteractableから構成できるその他のすべての設定に加えて、ボリュームプレスに関連する設定を構成できます。
ボタンを使用した UI の構築
複数のボタンを使用してメニューまたは UI パネルを作成する場合は、共有バックプレート ジオメトリを使用することをお勧めします。 共有バックプレートを使用することで、視覚的なノイズを減らし、使いやすさを向上させることができます。 共有バックプレートの上にボタンをレイアウトする例をいくつか次に示します。
その他のコンポーネント
参考までに、ボタンビジュアルと機能の側面を処理する追加コンポーネントを次に示します。
- ボタンが選択されたときに観察される視覚的なフロントプレートパルスは、
InteractablePulseコンポーネントによって処理されます。 - ボタン アイコンは、
FontIconSelectorを使用して MRTK アイコンに設定できます。 -
RectTransformColliderFitterは、必要に応じて Canvas ボタンで使用して、BoxColliderをRectTransformに合わせて使用できます。 これは、パフォーマンスのためにコンポーネントが既定で無効になっています。