UI Toolkit

UI Toolkit は、ユーザーインターフェース (UI) を開発するための機能、リソース、ツールを集めたものです。UI Toolkit を使用して、Unity エディターのカスタム UI や拡張機能、ランタイムデバッグツール、ゲームやアプリケーションのランタイム UI を開発することができます。

UI Toolkit は、標準的なウェブ技術に触発されています。ウェブページやアプリケーションを開発した経験があれば、その知識を応用でき、主要なコンセプトの多くが馴染み深いものです。

ノート: Unity は、新しい UI 開発プロジェクトに UI Toolkit を使用することを推奨しています。しかし、Unity UI (uGUI) と IMGUI は特定のユースケースに適しており、非推奨のプロジェクトをサポートするために必要とされます。詳細については、Unity の UI システムの比較 を参照してください。

UI システム

UI Toolkit のコアは、認知されたウェブ技術に基づいた保持モードの UI システムです。スタイルシートや、動的でコンテキスト依存なイベント処理をサポートしいます。

UI システムには以下のような機能があります。

• ビジュアルツリー: ビジュアルツリーは、軽量ノードで構成されたオブジェクトグラフで、ウィンドウやパネル内のすべての要素を保持します。UI ツールキットを使用して構築するすべての UI を定義します。
• コントロール: ボタン、ポップアップ、リストビュー、カラーピッカーなどの標準的な UI コントロールのライブラリです。そのまま使ったり、カスタマイズしたり、独自のコントロールを作成することができます。
• データバインディングシステム: プロパティを、その値を変更するコントロールに紐づけるシステムリンクです。
• レイアウトエンジン: CSS Flexbox モデルに基づいたレイアウトシステムです。レイアウトやスタイリングのプロパティに基づいて要素を配置します。
• イベントシステム: 入力、タッチ、ポインターの操作、ドラッグアンドドロップ操作、その他のイベントタイプなどのユーザーインタラクションを要素に伝達するシステムです。このシステムには、ディスパッチャー、ハンドラー、シンセサイザー、イベントタイプのライブラリが含まれています。
• UI レンダラー: Unity のグラフィックスデバイスレイヤーの上に直接構築されたレンダリングシステムです。
• UI Toolkit Runtime Support: A set of components to create runtime UI.

UI アセット

以下のアセットタイプを使用して、ウェブアプリケーションの開発方法と同様に UI を構築します。

• UXML ドキュメント: HTML と XML に発想を得たマークアップ言語は、UI と再利用可能な UI テンプレートの構造を定義します。C# ファイルで直接インターフェースを構築することもできますが、Unity では可能な限り UXML ドキュメントを使用することを推奨します。
• Unity スタイルシート (USS): スタイルシートは、UI に視覚的なスタイルや動作を適用します。スタイルシートは、ウェブで使用されているカスケーディングスタイルシート (Cascading Style Sheets, CSS) に似ており、標準的な CSS プロパティのサブセットをサポートしています。C# ファイルで直接スタイルを適用することもできますが、Unity では、可能な場合は USS ファイルの使用を推奨しています。

UI ツールとリソース

以下のツールを使用して、インターフェースの作成とデバッグを行い、UI Toolkit の使用方法を学びます。

• UI Debugger: A diagnostic tool that resembles a web browser’s debugging view. Use it to explore a hierarchy of elements and get information about its underlying UXML structure and USS styles. You can find it in the Editor under Window > UI Toolkit > Debugger.
• UI Builder: UXML や USS ファイルなどの UI Toolkit のアセットを視覚的に作成編集できるUIツールです。
• UI Samples: A library of code samples for UI controls that you can view in the Editor under Window > UI Toolkit > Samples.