Unity3D

Unity3D ：从 Unity UI （uGUI） 迁移到 UI 工具包

ygtu

• 11 min read
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生

从 Unity UI （uGUI） 迁移到 UI 工具包

本页指导具有 Unity 经验的开发人员用户界面
（uGUI） 以过渡到新的 UI 工具包系统。它探讨了uGUI和UI工具包之间的异同。

由于 uGUI 是仅限运行时的 UI 系统，因此本页重点介绍运行时 UI。UI 工具包可以创建运行时和编辑器 UI。本指南适用于 UI 工具包的两个用例。

用户界面层次结构

uGUI 和 UI 工具包都在层次结构树结构中构建和维护 UI。在 uGUI 中，此层次结构中的所有元素都显示为单独的元素游戏对象
在“层次结构视图”面板中。在 UI 工具包中，视觉元素
组织成可视化树
.可视化树在面板中不可见。

若要在 UI 工具包中查看和调试 UI 层次结构，可以使用 UI 调试器。可以在编辑器工具栏的“窗口> UI 工具包”>“调试器”下找到“UI 调试器”。

UI 调试器
UI 调试器

主要区别

画布与用户界面

uGUI 中的组件类似于 UI 工具包中的组件。两者都是附加到游戏对象的单一行为。CanvasUIDocument

在 uGUI 中，组件位于 UI 树的根目录中。它与组件一起使用，以确定下面 UI 的排序顺序、呈现和缩放模式。CanvasCanvas Scaler

在 UI 工具包中，组件包含对对象的引用。包含 UI 的呈现设置，包括缩放模式和排序顺序。多个组件可以指向同一对象，从而优化在同一对象中使用多个 UI 屏幕时的性能UIDocumentPanelSettingsPanelSettingsUIDocumentPanelSettings现场
.

面板设置
面板设置

在 uGUI 中，UI 树层次结构位于保存组件的游戏对象下方。在 UI 工具包中，组件包含对可视化树根元素的引用。CanvasUIDocument

该组件还包含对 UXML 文件的引用，该文件定义在运行时从中生成可视化树的 UI 布局。有关详细信息，请参阅创建 UI 部分。UIDocument

注意：对于编辑器 UI，不需要任何组件。您可以从 派生自定义类，然后实现 。有关实际示例，请参阅有关创建自定义编辑器窗口的指南。UIDocumentEditorWindowCreateGUI()

游戏对象组件与视觉元素

UI 工具包将 UI 元素称为控件或可视元素。UI 元素的示例包括：

  • 控制
  • 按钮
  • 文本标签

uGUI 从游戏对象构建 UI 层次结构。添加新的 UI 元素需要将新的游戏对象添加到层次结构中。各个控件作为组件实现。MonoBehaviour

在 UI 工具包中，可视化树是虚拟的，不使用游戏对象。您无法再在层次结构视图中构建或查看 UI 层次结构，但它消除了为每个 UI 元素使用游戏对象的开销。

在 uGUI 中，UI 元素（直接或间接）派生自基类。同样，在 UI 工具包中，所有 UI 元素都派生自名为 的基类。主要区别在于类不是从 派生的。不能将可视元素附加到游戏对象。UIBehaviorVisualElementVisualElementMonoBehaviour

在脚本中使用 UI 工具包控件类似于使用 uGUI 控件。 下表显示了与 uGUI 中的 UI 控件及其 UI 工具包对应项的常见脚本交互。

行动uGUI用户界面工具包
将文本写入标签m_Label.text = "My Text";m_Label.text = "My Text";
读取切换的状态bool isToggleChecked = m_Toggle.isOn;bool isToggleChecked = m_Toggle.value;
为按钮分配回调m_Button.onClick.AddListener(MyCallbackFunc);m_Button.clicked += MyCallbackFunc_1;
或
m_Button.RegisterCallback<ClickEvent>(MyCallbackFunc_2);

若要了解有关控件及其属性和事件的详细信息，请参阅控件概述页。

访问用户界面元素

在uGUI中，有两种方式脚本
可以访问 UI 元素：

  • 在编辑器中分配对 UI 组件的引用。
  • 使用帮助程序函数（如 ）查找层次结构中的组件。GetComponentInChildren<T>()

由于 UI 工具包中没有游戏对象或组件，因此无法在编辑器中直接分配对控件的引用。必须在运行时使用查询函数解析它们。 相反，请通过组件访问可视化树。UIDocument

UIDocument是 ，因此您可以将其指定为引用并使其成为MonoBehaviour预 置
.该组件包含对根可视元素的引用。从根目录，脚本可以按类型或名称查找子元素，类似于 uGUI。UIDocument

下表显示了在 Unity UI 和 UI 工具包中访问 UI 控件的直接比较

行动uGUI用户界面工具包
按名称查找 UI 元素transform.FindChild("childName");rootVisualElement.Query("childName");
按类型查找 UI 元素transform.GetComponentInChildren<Button>();rootVisualElement.Query<Button>();
在编辑器中直接分配引用可能不可能

创建用户界面

uGUI和UI Toolkit之间最大的区别之一是用户界面的创建。

uGUI 和 UI 工具包都允许您直观地构建 UI 并在编辑器中预览它。在 uGUI 中，UI 与附加到各个 UI 控件的任何逻辑脚本一起保存在预制件中。

在 UI 工具包中，UI 布局在 UI 生成器中创建，然后另存为一个或多个 UXML 文件。在运行时，组件加载可视化树在内存中组装的 UXML 文件。UIDocument

对于类似于 uGUI 的方法，可以直接从脚本创建 UI 控件，然后在运行时将它们添加到可视化树中。

预制件

uGUI 将游戏对象用于包含视觉对象和逻辑的单个 UI 控件和预制件。UI 工具包采用不同的可重用性方法，因为它将逻辑和布局分开。可以通过 UXML 和自定义控件创建可重用的 UI 组件。

要在 UI 工具包中创建与预制件类似的模板，请执行以下操作：

  1. 为部分 UI 元素创建 UXML 文件。
  2. 创建包含组件的游戏对象。UIDocument
  3. 在游戏对象中引用 UXML 文件。
  4. 添加脚本以将 UI 组件逻辑处理到同一游戏对象。
  5. 将游戏对象另存为预制件。

用户界面布局

在 uGUI 中在屏幕上排列单个 UI 元素是一个手动过程。默认情况下，UI 控件是自由浮动的，仅受其直接父级的影响。同一父级下的其他 UI 控件不会影响其同级控件的位置或大小。透视和锚点控制元素的位置和大小。

UI 工具包布局系统受网页设计的影响，并基于自动生成布局。默认情况下，自动布局系统会影响所有元素，元素的大小和位置将影响同一父元素下的其他元素。

UI 工具包中的默认行为类似于将所有元素放在 uGUI 中，并为每个元素添加一个组件。VerticalLayoutGroupLayoutElement

可以通过更改可视元素的 IStyle 属性来禁用自动布局生成。所有可视元素都具有此属性。有关代码示例，请参阅可视化树。position

UI 工具包没有直接等效的 UI 元素的锚定和透视，因为与 uGUI 相比存在根本布局差异。

元素的大小和位置由布局引擎控制。有关详细信息，请参阅布局引擎和坐标和定位系统。

渲染顺序

在 uGUI 中，游戏对象在层次结构中的顺序决定了渲染顺序。层次结构中更靠后的对象最后呈现并显示在顶部。在具有多个画布的场景中，根组件确定各个 UI 树的呈现顺序。Sort OrderCanvas

UI 工具包中可视化树中的呈现顺序以相同的方式运行。父元素在其子元素之前呈现，子元素从第一个呈现到最后一个元素，以便最后一个元素显示在顶部。在具有多个 UI 文档的场景中，渲染顺序由根组件上的设置确定。Sort OrderUIDocument

要在 uGUI 中更改元素的渲染顺序（例如使元素显示在顶部），可以在游戏对象的组件上调用同级函数。该类提供了类似的函数来控制呈现顺序。由于所有 UI 工具包控件都派生自此类，因此所有控件都可以访问此函数。TransformVisualElement

下表显示了用于控制呈现顺序的 uGUI 函数和 UI 工具包中的等效函数：

行动uGUI用户界面工具包
使元素呈现在所有其他同级元素之下transform.SetAsFirstSibling();myVisualElement.SendToBack();
使元素呈现在所有其他同级之上transform.SetAsLastSibling();myVisualElement.BringToFront();
手动控制元素相对于其同级元素的渲染顺序transform.SetSiblingIndex(newIndex);myVisualElement.PlaceBehind(sibling);
myVisualElement.PlaceInFront(sibling);

事件

就像在 uGUI 中一样，UI 工具包中的用户交互会触发事件。代码可以订阅以接收事件的回调，例如按下按钮或移动滑块。

在uGUI中，所有UI元素都基于MonoBehavior，并且可以在编辑器中公开其事件。这允许与其他游戏对象设置逻辑，例如隐藏或显示其他 UI 元素，或分配回调函数。

uGUI 按钮点击检查器
uGUI 按钮点击检查器

在 UI 工具包中，逻辑和 UI 布局是分开存储的。回调不能再直接在游戏对象上设置或存储在预制件中。您必须在运行时设置所有回调，并通过脚本处理它们。

Button playButton = new Button("Play");
playButton.RegisterCallback<ClickEvent>(OnPlayButtonPressed);
...
private void OnPlayButtonPressed(ClickEvent evt)
{
  // Handle button press  
}

UI 工具包中的事件调度系统与 uGUI 中的事件不同。根据事件类型，事件不仅发送到目标 UI 控件，还发送到所有父控件。

若要了解有关此内容的详细信息，请参阅调度事件。

在同一项目中使用 uGUI 和 UI 工具包

您可以在同一项目中使用 uGUI 和 UI 工具包。

在当前版本中，UI 工具包不支持 3D 世界空间拾取和渲染。您应该使用UI Toolkit制作整个游戏菜单和网络管理器HUD，并使用uGUI制作3D世界空间。

您还可以使用 uGUI 制作整个项目，而只使用 UI 工具包制作一些菜单项。

可以将 UI 工具包或 uGUI 用于不在其自身边界之外进行交互的任何项。例如，对于运行时 UI，可以使用 uGUI 创建屏幕按钮（如移动设备的操纵杆），并使用 UI 工具包创建模式窗口。

但是，混合 UI 之间的高级交互不起作用：

  • 您不能只使用键盘在 UI 工具包中的焦点元素和 uGUI 选定对象之间自由导航。若要导航，必须使用 C# 脚本在边界元素上注册事件，并手动选择或聚焦其他域中的下一个元素。
  • 不能在 UI 工具包层次结构中嵌入 uGUI，也不能在 uGUI 层次结构中嵌入 UI 工具包。您可以使用 a 进行绘制，但事件不会赶上。RenderTexture
  • UI 工具包中的样式和事件约定与 uGUI 不同。如果你使用uGUI和UI Tookit的分散混合，很难制作一个具有统一的UI的项目。

由3D建模学习工作室整理翻译，转载请注明出处！

上一篇：Unity3D ：面板文本设置资源 (mvrlink.com)

下一篇：Unity3D ：从即时模式 GUI （IMGUI） 迁移到 UI 工具包 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号