Unity3D:UI Toolkit下一代UI系统?

大腿Plus Unity3D项目开发评论2,112阅读模式

在UGUI出现之前,Unity的UI系统主要使用OnGUI去实现UI的显示,在我接触Unity的时候,最初也是使用OnGUI去实现游戏的UI界面的,这也是Unity的UI系统最初的样子。后来Unity出现NGUI插件,这也是UGUI出现之前,最好用的UI系统,具体就不详细说明NGUI和UGUI了。再后来也就是在Unity2021版本中内置的UI Toolkit,这将是Unity下一代UI系统吗?就UI Toolkit的更新情况来看,有可能。不过目前也只能是和UGUI混合使用。

一、UI Toolkit到底是什么?文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

UI Toolkit 是一种基于 Web 技术的 GUI 框架,是为了解决 UGUI 效率问题而设计的新一代 UI 系统(UGUI 的介绍详见→UGUI概述)。与 UGUI 不同,UI Toolkit 没有采用 GameObject 的方式,而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据,而不是整个界面状态,这使得它具有更高的效率。文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

UI Toolkit 的历史可以追溯到 Unity 2018 年发布的 UIElement,起初主要用于 Editor 编辑面板中的 UI 开发,自 Unity 2019 起,它开始支持运行时 UI,并更名为 UIToolkit,它以 Package 包(com.unity.ui)的形式存在,并在 Unity 2021.2 版本中,被官方内置在 Unity 中,与 UGUI 的地位相同。文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

二、UI Toolkit 的优点:文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

  1. 跨平台
  2. 高性能(一个 Draw Call 绘制所有 UI)
  3. 自定义样式应用到任何元素
  4. 复用性、灵活性更好
  5. 配套的 UI 编辑工具(UI Builder)
  6. 同使支持 Editor 和 Runtime

三、UI Toolkit 的缺点:文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

  1. 不依赖 GameObject,难以制作放置在 3D 世界中的可互动 UI
  2. 不支持 Shader,难以制作特效
  3. 不支持 Animator 组件,无法制作实时循环动画(但有 Transition 动画系统)

四、UI Toolkit 简单使用:文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

  1. 创建 UI Document 对象

在 Hierarchy 窗口右键,依次选择【UI Toolkit→UI Document】,创建 UI Document 对象,如下。文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

Unity3D:UI Toolkit下一代UI系统?-图片1文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

  • Panel Settings:定义一些全局的配置,比如字体、样式等信息,在创建 UI Document 对象时,会自动创建 PanelSettings.asset 文件;
  • Source Asset:待显示的页面资源
  • Sort Order:排序顺序,当有多个 UIDocument 对象时,序号越小的越先显示(在底部),序号越大的越后显示(在顶部);

2. 创建 uxml 资源文件文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

在 Assets 窗口右键,依次选择【Create→UI Toolkit→UI Document】,会生成一个 uxml 文件,重命名为 TestUXMLTemplate,并在 UIDocument 对象的 Inspector 窗口将 Source Asset 设置为 TestUXMLTemplate,如下。文章源自大腿Plus-https://www.zhaoshijun.com/archives/1959

Unity3D:UI Toolkit下一代UI系统?-图片2

3. 编辑 uxml 文件

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

Unity3D:UI Toolkit下一代UI系统?-图片3

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

Unity3D:UI Toolkit下一代UI系统?-图片4

4. 查看效果

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

Unity3D:UI Toolkit下一代UI系统?-图片5

五、UI Builder 窗口介绍

在 Unity 2021.2 版本之前,需要在 Package Manager 窗口中安装 UI Builder,自 Unity 2021.2 版本开始 UI Builder 已内置在 Unity Editor 中。UI Builder 官方介绍见→UI Builder。

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

Unity3D:UI Toolkit下一代UI系统?-图片6

  • StyleSheets:样式窗口,用于管理元素样式;
  • Hierarchy:元素层级窗口,用于管理元素;
  • Library:容器和元素库;
  • Inspector:监视器窗口,用于配置容器和元素属性。

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

Unity3D:UI Toolkit下一代UI系统?-图片7

我的微信
微信扫一扫
weinxin
shijun_z
我的QQ
QQ扫一扫
weinxin
846207670
 最后更新:2023-11-17
大腿Plus
  • 本文由 大腿Plus 发表于 2023年11月16日 15:16:29
  • 转载请务必保留本文链接:https://www.zhaoshijun.com/archives/1959

发表评论