1 前言
UI Toolkit 是一种基于 Web 技术的 GUI 框架,是为了解决 UGUI 效率问题而设计的新一代 UI 系统(UGUI 的介绍详见→UGUI概述)。与 UGUI 不同,UI Toolkit 没有采用 GameObject 的方式,而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据,而不是整个界面状态,这使得它具有更高的效率。
UI Toolkit 的历史可以追溯到 Unity 2018 年发布的 UIElement,起初主要用于 Editor 编辑面板中的 UI 开发,自 Unity 2019 起,它开始支持运行时 UI,并更名为 UIToolkit,它以 Package 包(com.unity.ui)的形式存在,并在 Unity 2021.2 版本中,被官方内置在 Unity 中,与 UGUI 的地位相同。
UI Toolkit 的优点:
跨平台
高性能(一个 Draw Call 绘制所有 UI)
自定义样式应用到任何元素
复用性、灵活性更好
配套的 UI 编辑工具(UI Builder)
同使支持 Editor 和 Runtime
UI Toolkit 的缺点:
不依赖 GameObject,难以制作放置在 3D 世界中的可互动 UI
不支持 Shader,难以制作特效
不支持 Animator 组件,无法制作实时循环动画(但有 Transition 动画系统)
UI Toolkit 内置案例见:【Window→UI Toolkit→Samples】,UI Tooolkit 容器介绍见→UI Toolkit容器 ,UI Tooolkit 元素介绍见→UI Toolkit元素,UI Tooolkit 样式选择器介绍见→UI Toolkit样式选择器。
2 UI Toolkit简单使用
创建uxml 文件
一 Windows -> UI Toolkit -> UIBuilder
二 在 Assets 窗口右键,依次选择【Create→UI Toolkit→UI Document】,会生成一个 uxml 文件
-
StyleSheets:样式窗口,用于管理元素样式;
-
Hierarchy:元素层级窗口,用于管理元素;
-
Library:容器和元素库;
-
Inspector:监视器窗口,用于配置容器和元素属性
滚动鼠标滑轮可以放大和缩小预览窗口大小;按鼠标中键拖拽,可以调整预览窗口的位置。点击 Viewport 窗口右上角的 Preview 按钮,可以查看运行态的 UI 界面。
创建UI document 对象
在 Hierarchy 窗口右键,依次选择【UI Toolkit→UI Document】,创建 UI Document 对象,如下。
Panel Settings:定义一些全局的配置,比如字体、样式等信息,在创建 UI Document 对象时,会自动创建 PanelSettings.asset 文件;
Source Asset:待显示的页面资源
Sort Order:排序顺序,当有多个 UIDocument 对象时,序号越小的越先显示(在底部),序号越大的越后显示(在顶部);
编辑uxml
在 Assets 窗口双击 TestUXMLTemplate.uxml 文件,会打开 UI Builder 窗口,或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】,也可以打开 UI Builder 窗口。
选中 Hierarchy 窗口 中的 VisualElement,在 Inspector 窗口配置 Flex 和 Background,如下,按 Ctrl + S 键保存。
回到 Game 窗口,显示效果如下。中间的立方体是事先添加的 Cube 对象,半透明的黄色是 UI Document 显示的效果。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bfc11062c5f14eb7b1fb5c52abdba869.png
3 使用IED 打开创建的uxml
可以在uxml文件里边动态修改UI 界面
例如 动态添加<engine:Button text=“Button” />
<engine:Toggle text=“Toggle” />
UIBuilder 中显示