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 を定義します。
• Controls: A library of standard UI controls such as buttons, popups, list views, and color pickers. You can use them as is, customize them, or create your own controls.
• Data binding system: A system links properties to the controls that modify their values.
• レイアウトエンジン: CSS Flexbox モデルに基づいたレイアウトシステムです。レイアウトやスタイリングのプロパティに基づいて要素を配置します。
• イベントシステム: 入力、タッチ、ポインターの操作、ドラッグアンドドロップ操作、その他のイベントタイプなどのユーザーインタラクションを要素に伝達するシステムです。このシステムには、ディスパッチャー、ハンドラー、シンセサイザー、イベントタイプのライブラリが含まれています。
• UI レンダラー: Unity のグラフィックスデバイスレイヤーの上に直接構築されたレンダリングシステムです。
• エディター UI サポート: エディター UI を作成するための一揃いのコンポーネント。
• ランタイム UI サポート: ランタイム 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 デバッガー: UI デバッガーは、ウェブブラウザーのデバッグビューに似た診断ツールです。これを使って、要素の階層を探索し、その基礎となる UXML 構造や USS スタイルに関する情報を得ることができます。エディターでは、Window > UI Toolkit > Debugger で開くことができます。
• UI Builder: UXML や USS ファイルなどの UI Toolkit のアセットを視覚的に作成編集できるUIツールです。
• UI Samples: UI コントロールのコードサンプルのライブラリで、エディターの Window > UI Toolkit > Samples で見ることができます。