Version: 2021.2
言語: 日本語
ユーザーインターフェース (UI) の作成
UI Toolkit

Unity の UI システムの比較

Unity intends for UI Toolkit to become the recommended UI system for new UI development projects, but it’s still missing some features found in Unity UI (uGUI) and IMGUI. These older systems are more appropriate for certain use cases, and are required to support legacy projects.

このページでは、UI Toolkit、Unity UI、IMGUI のハイレベルな機能比較と、UI デザインへの各アプローチに関する注意点を説明します。プロジェクトにどの UI システムが適しているかを判断するために利用してください。

重要
UI Toolkit は現在開発中です。このページは、機能の開発に応じて頻繁に更新されます。

一般的な検討事項

UI のタイプ: エディターまたはランタイム

UI システムの選択は、Unity エディター用の UI を開発するか、ゲームやアプリケーションのランタイム UI を開発するのかによって異なります。

UI の種類 UI Toolkit Unity UI (uGUI) IMGUI ノート
ランタイム (ゲーム内) ✔ * 非推奨 パフォーマンス上の理由から、Unity ではインゲームのランタイム UI に IMGUI を推奨していません。
Unity エディター Unity UI を使って Unity エディターの UI を作ることはできません。

* 現在、プレビュー版の UI Toolkit パッケージ が必要です。

ランタイム UI を作成するには、UI Toolkit と Unity UI (uGUI) のどちらかを選択します。機能比較: UI Toolkit 対 Unity UI (uGUI)を参照してください。

Unity エディターの UI を作成するには、UI Toolkit と IMGUI のどちらかを選択します。機能比較: UI Toolkit 対 IMGUI を参照してください。

役割とスキルセット

チームのスキルセットやさまざまなテクノロジーへの対応レベルも重要な検討事項です。

ユーザーのタイプ UI Toolkit Unity UI
(uGUI)
IMGUI ノート
プログラマー プログラマーは、あらゆるゲーム開発ツールや API を使用できます。
テクニカルアーティスト 部分的 Unity のゲームオブジェクトベースのツールやワークフローに慣れているテクニカルアーティストは、ゲームオブジェクト、コンポーネント、シーンビューを使って快適に作業できるだろうと考えられます。

UI Toolkit のウェブに似たアプローチや、IMGUI の純粋な C# アプローチには馴染めないかもしれません。
UI デザイナー 部分的 UI ツールに慣れている UI デザイナーは、UI Toolkit のドキュメントベースのアプローチに慣れていると考えられます。

ゲームオブジェクトベースのワークフローに慣れていない場合は、プログラマーやレベルデザイナーの助けが必要かもしれません。

イノベーションと開発

UI Toolkit は現在開発中です。Unity は、リリースごとに新しい機能を追加しています。Unity UI と IMGUI は、本番環境で使用できる確立された UI システムですが、あまり更新されていません。

Unity UI や IMGUI は、UI Toolkit ではまだ利用できない機能を必要としている場合や、古い UI コンテンツのサポートや再利用を計画している場合に、より適した選択であるといえます。

機能比較: UI Toolkit 対 Unity UI (uGUI)

このセクションでは、ゲームやアプリケーションのランタイム UI を開発するための UI Toolkit と Unity UI (および TextMesh Pro パッケージ) を比較します。

Unity エディター UI 開発

It’s not possible to develop user interfaces for the Unity Editor using Unity UI.

ワークフロー

機能 UI Toolkit UGUI+TMP ノート
#ネスト状のプレハブ 部分的 UI Toolkit の UXML テンプレートは、属性のオーバーライド をサポートします。これは、Unity プレハブシステムの変更されたプロパティに似ています。

UGUI はゲームオブジェクトベースで、標準の Unity プレハブをサポートします。
WYSIWYG オーサリング Unity UI and UI Toolkit offer different WYSIWYG authoring experiences.

Because Unity UI is GameObject-based, you can set up the Scene view for WYSIWYG authoring.

UI Toolkit provides the UI Builder package (currently in preview) for document-based WYSIWYG UI authoring with a web-like workflow.
テーマ 計画中 UI Toolkit のロードマップには、UI Builder と USS インポートによるテーマ設定機能のサポートが含まれています。
レイアウト & スタイルデバッガー Unity の UI インターフェースは Inspector ウィンドウでデバッグできます。

UI Toolkit には、主要なウェブブラウザーに備わるデバッグツールと同様の専用デバッガー (メニュー: Window > UI Toolkit > Debugger) が搭載されています。
シーンのインテグレーション Unity UI ゲームオブジェクトは、シーンビューとゲームビューに表示されます。

UI Toolkit パッケージ](UIE-UITK-package.html) (現在プレビュー版) で作成したランタイム UI を、ランタイムコンポーネント経由で統合し、ゲームビューに表示することができます。

スタイル

機能 UI Toolkit UGUI+TMP ノート
インラインスタイル
カスケードスタイル
疑似状態 (例えば、ホバーやアクティブなど) Unity UI には単純な擬似状態が用意されており、Unity の Animation グラフを使って複雑な擬似状態を作ることができます。

UI Toolkit は、擬似状態 を USS でサポートしています。
リッチテキストタグ 計画中 Rich text tag support in UI Toolkit is planned as part of an update to Unity’s text rendering back end.

Unity UI supports a basic set of rich text tags by default, and a larger set via the TextMesh Pro package.
SDF テキスト 計画中 SDF text support in UI Toolkit is planned as part of an overhaul of Unity’s text rendering back end.

Unity UI supports SDF text via the TextMesh Pro package.
フォントのフォールバック 計画中 Support for font Assets and fallback fonts in UI Toolkit is planned as part of an overhaul of Unity’s text rendering back end.

Unity UI supports fallback fonts via the TextMesh Pro package.

レイアウト

Unity UI と UI Toolkit は、同じようにレイアウトが可能ですが、そのレイアウトシステムは全く異なります。

  • Unity UI では、RectTransForm コンポーネントを使って、ゲームオブジェクトレベルでレイアウトを制御します。
  • UI Toolkit では、USS スタイルシートでレイアウトを定義し、よりウェブに近い Flexbox ベースのレイアウトシステムを使用します。
機能 UI Toolkit UGUI+TMP ノート
マニュアルレイアウト(絶対、または親に対して相対的)
一次元 (水平と垂直)
2 次元 (グリッド) リサーチ Unity UI には、GridLayoutGroup コンポーネントが備えられています。

UI Toolkit に関して、USS に CSS スタイルのグリッドを実装する可能性を調査しています。

イベント

機能 UI Toolkit UGUI+TMP ノート
Unity の新しい Input System とのインテグレーション 計画中
シリアル化されたイベント 計画中 UI Toolkit は #C でのみ、イベントを要素にバインドできます。

Unity UI はイベントバインディングをシリアライズできます。
イベントのビジュアルスクリプティング リサーチ

レンダリング

UI Toolkit と Unity UI の選択は、ハイパフォーマンスと汎用性/適応機能のトレードオフになります。

UI Toolkit currently supports a smaller set of capabilities, but is easier to optimize for rendering performance. It’s document-based, data driven, and uses a single shader, material, and texture atlas to draw element hierarchies. It’s a good choice for simple, screen space UI (for example, menus or heads-up displays) that includes complex hierarchies of elements, and performs well on any platform.

Unity UI はより汎用性が高く、高度なレンダリングやテキスト機能をサポートしています。任意のビジュアル要素にカスタムマテリアルを設定したり、高度なクリッピングやマスキング機能を利用することができます。ただし、これらの機能は、より複雑な UI を許容できるパフォーマンスの内に収めることを難しくするかもしれません。

機能 UI Toolkit UGUI+TMP ノート
ビルトインレンダーパイプライン に対応
ユニバーサルレンダーパイプライン (URP) に対応
HD レンダーパイプライン (HDRP) に対応
スクリーンスペース (2D) レンダリング
ワールド空間 (3D) レンダリング 計画中
カスタムマテリアルとシェーダー 計画中
シェーダーグラフのインテグレーション 計画中
SVG のインテグレーション 計画中 計画中 com.unity.vectorgraphics パッケージは、Unity UI の SVG サポートを提供します。ただし、このパッケージは現在プレビュー版であり、本番運用では推奨されません。
Antialiasing 計画中 部分的 Unity UI の スクリーンスペースカメラワールド空間 のレンダリングモードは、アンチエイリスを適用するカメラを使用しています。
2D 回転 (オブジェクトは UI 平面上)
3D 回転 計画中
矩形クリッピング 部分的 UI ツールキットでは、回転以外で矩形のクリッピングをサポートします。矩形は軸に沿って配置されていなければなりません。
マスククリッピング 部分的 UI ツールキットは、2D 回転のマスククリッピングをサポートします。

Unity UI は、3D マスクの回転をサポートします。
ネスト状のマスキング 部分的/計画中 UI toolkit’s nested masking is limited to one level, but doesn’t affect draw-call batching. Multi-level nested masking is planned.

Unity UI supports up to eight levels of nested masking, but breaks draw call batching every second level.

アニメーション

機能 UI Toolkit UGUI+TMP ノート
トゥイーンのワークフロー 実験版 部分的
アニメーションクリップとタイムラインとのインテグレーション 計画中

カスタム性

機能 UI Toolkit UGUI+TMP ノート
オープンソース/カスタム性 計画中 UI Toolkit パッケージ (現在プレビュー版) は、カスタマイズが可能です。

機能比較: UI Toolkit 対 IMGUI

ここでは、Unity エディターのユーザーインターフェース開発に関して、UI Toolkit と IMGUI を比較します。

Inspector のインテグレーション

Feature UI Toolkit IMGUI Notes
Default Inspectors Planned UI Toolkit will become the default UI back end for Inspector windows (for when a type does not have custom editors).
Inspector: Edit custom object types
Inspector: Edit custom property types
Inspector: Mixed values (multi-editing) support Planned
Array / list-view control Planned

コントロールとデータバインディング

機能 UI Toolkit IMGUI ノート
ツリービュー 計画中
グリッドビュー 計画中
グラフビュー 計画中
データバインディング: シリアル化されたプロパティ
あらゆる C# タイプのデータバインディング 計画中
任意の属性やスタイル値へのデータバインディング 計画中

ワークフロー

Feature UI Toolkit IMGUI Notes
Nested Prefabs Partial UI Toolkit’s UXML templates support attribute overrides, which are similar to modified properties in the Unity Prefab system.
WYSIWYG authoring UI Toolkit provides the UI Builder package (currently in preview) for document-based WYSIWYG UI authoring with a web-like workflow.
Theming Planned
Layout & Styling Debugger IMGUI has a limited debugging tool for layouts and styles.

UI Toolkit provides a dedicated debugger (menu: Window > UI Toolkit > Debugger) that is similar to debug tools found in major web browsers.
Scene View integration

スタイル

機能 UI Toolkit IMGUI ノート
インラインスタイル
カスケードスタイル
疑似状態 (例えば、ホバーやアクティブなど) 部分的
リッチテキストタグ 計画中 Rich text tag support in UI Toolkit is planned as part of an update to Unity’s text rendering back end.
SDF テキスト 計画中 SDF text support in UI Toolkit is planned as part of an update to Unity’s text rendering back end.
フォントのフォールバック 計画中

レイアウト

Unity UI と IMGUI は同じようなレイアウト性がありますが、レイアウトシステムは全く異なります。

  • IMGUI は C# ベースの GUILayout システムを使用しています。
  • UI Toolkit では、よりウェブに近い Flexbox ベースのレイアウトシステムを使っています。USS スタイルでレイアウトを制御します。
機能 UI Toolkit IMGUI ノート
マニュアルレイアウト(絶対、または親に対して相対的)
一次元 (水平と垂直)
2 次元 (グリッド) 調査中 UI Toolkit に関して、CSS スタイルのグリッドを USS に実装する可能性を検討しています。

イベント

機能 UI Toolkit IMGUI ノート
Unity の新しい Input System とのインテグレーション 計画中
シリアル化されたイベント 計画中
イベントのビジュアルスクリプティング リサーチ

レンダリング

機能 UI Toolkit IMGUI ノート
ビルトインレンダーパイプライン に対応
ユニバーサルレンダーパイプライン (URP) に対応
HD レンダーパイプライン (HDRP) に対応
スクリーンスペース (2D) レンダリング
ワールド空間 (3D) レンダリング 計画中 While it’s technically possible to create 3D UI in IMGUI using GUI.matrix, it’s not recommended.
カスタムマテリアルとシェーダー 計画中
シェーダーグラフのインテグレーション 計画中
SVG のインテグレーション 計画中
Anti-aliasing 計画中

アニメーション

機能 UI Toolkit IMGUI ノート
トゥイーンのワークフロー 実験版
アニメーションクリップとタイムラインとのインテグレーション 計画中

カスタム性

機能 UI Toolkit IMGUI ノート
オープンソース/カスタム性 計画中 UI Toolkit パッケージ (現在プレビュー版) は、カスタマイズが可能です。

ユーザーインターフェース (UI) の作成
UI Toolkit