目录

UIToolkit一

目录

UIToolkit(一)

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

https://i-blog.csdnimg.cn/direct/ff98590546c04533bd651921f047e3fd.png

二 在 Assets 窗口右键,依次选择【Create→UI Toolkit→UI Document】,会生成一个 uxml 文件

  • StyleSheets:样式窗口,用于管理元素样式;

  • Hierarchy:元素层级窗口,用于管理元素;

  • Library:容器和元素库;

  • Inspector:监视器窗口,用于配置容器和元素属性

    滚动鼠标滑轮可以放大和缩小预览窗口大小;按鼠标中键拖拽,可以调整预览窗口的位置。点击 Viewport 窗口右上角的 Preview 按钮,可以查看运行态的 UI 界面。

    创建UI document 对象

    在 Hierarchy 窗口右键,依次选择【UI Toolkit→UI Document】,创建 UI Document 对象,如下。

    https://i-blog.csdnimg.cn/direct/6fc7c1f1faf74ffba4e007cab763b807.png

    Panel Settings:定义一些全局的配置,比如字体、样式等信息,在创建 UI Document 对象时,会自动创建 PanelSettings.asset 文件;

    Source Asset:待显示的页面资源

    Sort Order:排序顺序,当有多个 UIDocument 对象时,序号越小的越先显示(在底部),序号越大的越后显示(在顶部);

    编辑uxml

    在 Assets 窗口双击 TestUXMLTemplate.uxml 文件,会打开 UI Builder 窗口,或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】,也可以打开 UI Builder 窗口。

    https://i-blog.csdnimg.cn/direct/7f858540ace947618dd1a320c4e12c3d.png

    选中 Hierarchy 窗口 中的 VisualElement,在 Inspector 窗口配置 Flex 和 Background,如下,按 Ctrl + S 键保存。

    https://i-blog.csdnimg.cn/direct/a7a039b7a93e419286ca62231905123e.png

回到 Game 窗口,显示效果如下。中间的立方体是事先添加的 Cube 对象,半透明的黄色是 UI Document 显示的效果。

![在这里插入图片描述](

https://i-blog.csdnimg.cn/direct/48a337f20dfe40b3b9b6c1d54b968c56.png

3 使用IED 打开创建的uxml

可以在uxml文件里边动态修改UI 界面

例如 动态添加<engine:Button text=“Button” />

<engine:Toggle text=“Toggle” />

https://i-blog.csdnimg.cn/direct/9b2862762a9f4526bf80c9edde86ac06.png

UIBuilder 中显示

https://i-blog.csdnimg.cn/direct/730f0ba0ecbb4ae1bbae61f45e99690b.png