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

Unity の UI システムの比較

Unity は、UI Toolkit が新しい UI 開発プロジェクトの推奨 UI システムになることを意図していますが、Unity UI (uGUI) や IMGUI にあるいくつかの機能がまだ欠けています。これらの古いシステムは、特定のユースケースではより適当で、古いプロジェクトをサポートするために必要です。

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

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

一般的な検討事項

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

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

UI の種類 UI Toolkit Unity UI (uGUI) IMGUI ノート
ランタイム (デバッグ) ✔ * ✔ ✔ これは、デバッグ目的で使用される一時的なランタイム UI を意味します。
ランタイム (ゲーム内) ✔ * ✔ 非推奨 パフォーマンス上の理由から、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 開発

Unity UI を使って Unity エディターのユーザーインターフェースを開発することはできません。

ワークフロー

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

UGUI はゲームオブジェクトベースで、標準の Unity プレハブをサポートします。
WYSIWYG オーサリング ✔ ✔ Unity UI と UI Toolkit では、WYSIWYG オーサリング体験が大きく異なります。

Unity UI はゲームオブジェクトベースなので、WYSIWYG オーサリング用にシーンビューを設定することができます。

UI Toolkit では、ウェブに似たワークフローでドキュメントベースの WYSIWYG UI オーサリングを行うために、UI Builder パッケージ (現在プレビュー版) を提供しています。
テーマ 計画中 ❌ 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 でサポートしています。
リッチテキストタグ 計画中 ✔ UI Toolkit でのリッチテキストタグのサポートは、Unity のテキストレンダリングバックエンドの更新の一部として計画されています。

Unity UI は、デフォルトでリッチテキストタグの基本的なセットをサポートしており、TextMesh Pro パッケージを通してより多くのセットをサポートします。
SDF テキスト 計画中 ✔ UI Toolkit における SDF テキストのサポートは、Unity のテキストレンダリングバックエンドのオーバーホールの一部として計画されています。

Unity UI は TextMesh Pro パッケージを通して SDF テキストをサポートします。
フォントのフォールバック 計画中 ✔ UI Toolkit でのフォントアセットとフォールバックフォントのサポートは、Unity のテキストレンダリングバックエンドのオーバーホールの一部として計画されています。

Unity UI は TextMesh Pro パッケージを通してフォールバックフォントに対応しています。

レイアウト

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 は現在、より小さな機能セットをサポートしていますが、レンダリングパフォーマンスの最適化が容易です。UI Toolkit はドキュメントベースのデータ駆動型で、単一のシェーダー、マテリアル、テクスチャアトラスを使用して要素の階層を描画します。複雑な階層を持つ要素を含む、シンプルなスクリーンスペース UI (メニューや注意喚起ディスプレイなど) に適しており、どのようなプラットフォームでも高いパフォーマンスを発揮します。

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

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

Unity UI は、3D マスクの回転をサポートします。
ネスト状のマスキング 部分的/計画中 ✔ UI ツールキットのネスト状のマスクは 1 レベルに制限されていますが、ドローコールのバッチングには影響しません。

Unity UI は、最大 8 レベルのネスト状のマスクをサポートしますが、2 レベルごとにドローコールのバッチ処理は中断されます。

アニメーション

機能 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 backend 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 ノート
インラインスタイル ✔ ✔
カスケードスタイル ✔ ❌
疑似状態 (例えば、ホバーやアクティブなど) ✔ 部分的
リッチテキストタグ 計画中 ✔ UI Toolkit でのリッチテキストタグのサポートは、Unity のテキストレンダリングバックエンドの更新の一環として計画されています。
SDF テキスト 計画中 ❌ UI Toolkit での SDF テキストのサポートは、Unity のテキストレンダリングバックエンドの更新の一環として計画されています。
フォントのフォールバック 計画中 ✔

レイアウト

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) レンダリング 計画中 ❌ GUI.matrix を使用して IMGUI で 3D UI を作成することは技術的に可能ですが、推奨されません。
カスタムマテリアルとシェーダー 計画中 ❌
シェーダーグラフのインテグレーション 計画中 ❌
SVG のインテグレーション 計画中 ❌
アンチエイリアス 計画中 ❌

アニメーション

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

カスタム性

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

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