Version: 2021.2
创建用户界面 (UI)
UI 工具包

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 工具包、Unity UI 和 IMGUI 的高级功能比较,以及有关它们各自的 UI 设计方法的说明。使用该内容可帮助确定哪种 UI 系统适合您的项目。

重要
UI 工具包正在积极开发中。本页面将随着功能集的发展而频繁更新。

一般考虑因素

UI 的类型:编辑器或运行时

对 UI 系统的选择取决于是为 Unity 编辑器开发 UI,还是为游戏或应用程序开发运行时 UI。

UI 的类型 UI 工具包 Unity UI(uGUI) IMGUI 注意事项
运行时(游戏内) ✔ * 不推荐 出于性能原因,Unity 不推荐将 IMGUI 用于游戏内运行时 UI。
Unity Editor 不能使用 Unity UI 为 Unity 编辑器创建 UI。

* 需要 UI 工具包软件包(当前处于预览版)。

若要创建运行时 UI,可在 UI 工具包与 Unity UI (uGUI) 之间进行选择。请参阅功能比较:UI 工具包与 Unity UI (uGUI)

若要为 Unity 编辑器创建 UI,可在 UI 工具包与 IMGUI 之间进行选择。请参阅功能比较:UI 工具包与 IMGUI

角色和技能集

团队的技能集以及对不同技术的习惯程度也是一个重要的考虑因素。

用户的类型 UI 工具包 Unity UI
(uGUI)
IMGUI 注意事项
程序员 程序员可以使用任何游戏开发工具或 API。
技术美术师 部分支持 熟悉 Unity 基于游戏对象的工具和工作流程的技术美术师可能会习惯使用游戏对象、组件和 Scene 视图。

他们可能不习惯 UI 工具包类似于 Web 的方法或 IMGUI 的纯 C# 方法。
UI 设计师 部分支持 熟悉 UI 创建工具的 UI 设计师可能会习惯 UI 工具包基于文档的方法。

如果他们不熟悉基于游戏对象的工作流程,则可能需要程序员和/或关卡设计师提供帮助。

创新和开发

UI 工具包正在积极开发中。Unity 会在每个版本中添加新功能。Unity UI 和 IMGUI 是成熟的 UI 系统,它们已经过生产验证,不过很少更新。

如果需要 UI 工具包中尚未提供的功能,或者计划支持或重用较旧的 UI 内容,则 Unity UI 和 IMGUI 可能是更好的选择。

功能比较:UI 工具包与 Unity UI (uGUI)

此部分将 UI 工具包与 Unity UI(以及 TextMesh Pro 包)进行比较,以便为游戏和应用程序开发运行时 UI。

Unity 编辑器 UI 开发

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

工作流程

功能 UI 工具包 UGUI+TMP 注意事项
嵌套预制件 部分支持 UI 工具包的 UXML 模板支持属性覆盖,类似于 Unity 预制件系统中的已修改属性。

UGUI 基于游戏对象,支持标准 Unity 预制件。
所见即所得的创作 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 工具包路线图包括通过 UI Builder 和 USS 导入支持主题功能。
布局和样式调试器 可以在 Inspector 窗口中调试 Unity UI 界面。

UI 工具包提供一个专用的调试器(菜单:Window > UI Toolkit > Debugger),类似于主要 Web 浏览器中的调试工具。
场景集成 Unity UI 游戏对象在 Scene 视图和 Game 视图中可见。

可以通过运行时组件集成使用 UI 工具包软件包(当前处于预览版)创建的运行时 UI,并将它显示在游戏视图中。

样式

功能 UI 工具包 UGUI+TMP 注意事项
内联样式
层叠样式
伪状态(例如,悬停或激活) Unity UI 提供简单的伪状态,您可以使用 Unity 的动画图为其创建复杂的伪状态。

UI 工具包通过 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 工具包提供相同的布局可能性,但其布局系统大不相同。

  • 借助 Unity UI,可以使用 RectTransForm 组件在游戏对象级别上控制布局。
  • 借助 UI 工具包,可以在 USS 样式表中定义布局,使用更类似于 Web 的基于 Flexbox 的布局系统。
功能 UI 工具包 UGUI+TMP 注意事项
手动布局(绝对或相对于父项)
一维(水平和垂直)
二维(网格) 研究 Unity UI 提供 GridLayoutGroup 组件。

对于 UI 工具包,Unity 在研究在 USS 中实现 CSS 样式网格的可能性。

事件

功能 UI 工具包 UGUI+TMP 注意事项
与 Unity 新输入系统集成 计划
序列化事件 计划 UI 工具包只能在 C# 中将事件绑定到元素。

Unity UI 可以序列化事件绑定。
事件的可视化脚本 研究

Rendering

在 UI 工具包与 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 工具包 UGUI+TMP 注意事项
支持内置渲染管线
支持通用渲染管线 (URP)
支持高清渲染管线 (HDRP)
屏幕空间 (2D) 渲染
世界空间 (3D) 渲染 计划
自定义材质和着色器 计划
Shader Graph 集成 计划
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.

Animation

功能 UI 工具包 UGUI+TMP 注意事项
补间工作流程 Experimental 部分支持
与动画剪辑和时间轴集成 计划

可定制性

功能 UI 工具包 UGUI+TMP 注意
开源/可定制 计划 UI 工具包软件包(当前处于预览版)可定制。

功能比较:UI 工具包与 IMGUI

此部分将 UI 工具包与 IMGUI 进行比较,以便为 Unity 编辑器开发用户界面。

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 工具包 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 工具包 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 工具包使用更类似于 Web 的基于 Flexbox 的布局系统。可以通过 USS 样式控制布局。
功能 UI 工具包 IMGUI 注意事项
手动布局(绝对或相对于父项)
一维(水平和垂直)
二维(网格) 研究中 对于 UI 工具包,Unity 在研究在 USS 中实现 CSS 样式网格的可能性。

事件

功能 UI 工具包 IMGUI 注意事项
与 Unity 新输入系统集成 计划
序列化事件 计划
事件的可视化脚本 研究

Rendering

功能 UI 工具包 IMGUI 注意事项
支持内置渲染管线
支持通用渲染管线 (URP)
支持高清渲染管线 (HDRP)
屏幕空间 (2D) 渲染
世界空间 (3D) 渲染 计划 While it’s technically possible to create 3D UI in IMGUI using GUI.matrix, it’s not recommended.
自定义材质和着色器 计划
Shader Graph 集成 计划
SVG 集成 计划
抗锯齿 计划

Animation

功能 UI 工具包 IMGUI 注意事项
补间工作流程 Experimental
与动画剪辑和时间轴集成 计划

可定制性

功能 UI 工具包 IMGUI 注意事项
开源/可定制 计划 UI 工具包软件包(当前处于预览版)可定制。

创建用户界面 (UI)
UI 工具包