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

Unity 中 UI 系统的对比

Unity 打算让 UI 工具包成为新 UI 开发项目的推荐 UI 系统,但它仍然缺少 Unity UI (uGUI) 和 IMGUI 中的一些功能。这些较旧的系统更适合特定用例,并且需要支持旧版项目。

本页面提供了 UI 工具包、Unity UI 和 IMGUI 的高级功能比较,以及有关它们各自的 UI 设计方法的说明。使用该内容可帮助确定哪种 UI 系统适合您的项目。

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

一般考虑因素

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

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

UI 的类型 UI 工具包 Unity UI(uGUI) IMGUI 注意事项
运行时(调试) ✔ * 这指用于调试用途的临时运行时 UI。
运行时(游戏内) ✔ * 不推荐 出于性能原因,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 开发

无法使用 Unity UI 为 Unity 编辑器开发用户界面。

工作流程

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

UGUI 基于游戏对象,支持标准 Unity 预制件。
所见即所得的创作 Unity UI 和 UI 工具包提供非常不同的所见即所得创作体验。

由于 Unity UI 基于游戏对象,因此可以设置 Scene 视图以便进行所见即所得创作。

UI 工具包提供 UI Builder 包(当前处于预览版),用于通过类似于 Web 的工作流程进行基于文档的所见即所得 UI 创作。
主题化 计划 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 支持伪状态
富文本标签 计划 UI 工具包中的富文本标签支持计划作为 Unity 文本渲染后端更新的一部分。

Unity UI 在默认情况下支持一组基本的富文本标签,并通过 TextMesh Pro 包支持更大的一组标签。
SDF 文本 计划 UI 工具包中的 SDF 文本支持计划作为 Unity 文本渲染后端大幅修改的一部分。

Unity UI 通过 TextMesh Pro 包支持 SDF 文本。
字体后备 计划 UI 工具包中的字体资源和后备字体支持计划作为 Unity 文本渲染后端大幅修改的一部分。

Unity UI 通过 TextMesh Pro 包支持后备字体。

布局

虽然 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 工具包目前支持的功能集较小,但更易于针对渲染性能进行优化。它基于文档、由数据驱动并使用单一着色器、材质和纹理图集来绘制元素层级视图。对于包含复杂元素层级视图的简单屏幕空间 UI(例如,菜单或抬头显示)而言,它是一个不错的选择,并且在任何平台上都表现良好。

Unity UI 的功能更多,并支持高级渲染和文本功能。可以使用自定义材质设置任何视觉元素,并利用高级裁剪和遮罩功能。但是,这些功能可能会使得难以在性能预算内保持更复杂的 UI。

功能 UI 工具包 UGUI+TMP 注意事项
支持内置渲染管线
支持通用渲染管线 (URP)
支持高清渲染管线 (HDRP)
屏幕空间 (2D) 渲染
世界空间 (3D) 渲染 计划
自定义材质和着色器 计划
Shader Graph 集成 计划
SVG 集成 计划 计划 com.unity.vectorgraphics 包为 Unity UI 提供 SVG 支持。但是,该包当前处于预览版,不建议用于生产。
抗锯齿 计划 部分支持 Unity UI 的屏幕空间 - 摄像机世界空间渲染模式使用应用抗锯齿的摄像机。
2D 旋转(对象保持在 UI 平面上)
3D 旋转 计划
矩形裁剪 部分支持 UI 工具包支持不带旋转的矩形裁剪。矩形必须轴对齐。
遮罩裁剪 部分支持 UI 工具包支持带 2D 旋转的遮罩裁剪。

Unity UI 支持 3D 遮罩旋转。
嵌套遮罩 部分支持/计划 UI 工具包的嵌套遮罩仅限于一个级别,但不影响绘制调用批处理。多级嵌套遮罩已在计划中。

Unity UI 最多支持八个级别的嵌套遮罩,但每个第二级会中断绘制调用批处理。

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 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 工具包 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 注意事项
内联样式
层叠样式
伪状态(例如,悬停或激活) 部分支持
富文本标签 计划 UI 工具包中的富文本标签支持计划作为 Unity 文本渲染后端更新的一部分。
SDF 文本 计划 UI 工具包中的 SDF 文本支持计划作为 Unity 文本渲染后端更新的一部分。
字体后备 计划

布局

虽然 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) 渲染 计划 虽然在技术上可以使用 GUI.matrix 在 IMGUI 中创建 3D UI,但不建议这样做。
自定义材质和着色器 计划
Shader Graph 集成 计划
SVG 集成 计划
抗锯齿 计划

Animation

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

可定制性

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

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