我所理解的 UI Toolkit 启蒙阶段（一）

对于自己不会的新东西的学习，我认为最合适的路径就是：

实例教学视频 ---> 实操熟悉 ---> 官方文档查漏补缺 ---> 拟定思路实现功能

但这 4 步并非每一步都需要下 100% 的功夫，他们是一个互相补足的过程，也许你在做某一步的时候无法集中，不如换一个步骤进行学习，以此往复。

这是一个 UI Toolkit 新坑，想做游戏 UI 至关重要，是逃不掉的课题，甚至我们可以禁靠 UI 来完成一个交互式游戏，对吧。

本系列文章是我在学习过程中的一些总结和理解，在此记录方便回顾查看，并分享出来希望对你有所帮助。

启蒙

我找了一个启蒙视频帮助我快速了解使用 Unity UI Toolkit Beginner's Guide 讲的不错，感兴趣可以看看，当然，这个视频需要一点小小的帮助（你懂的）。

本文会基于本视频进行介绍，并进行一些讲解

那对于 UI Toolkit 如果你学过 Web ，有过构建 Web 前端应用的经验，上手起来会比较容易，它的很多思路和 H5 几近一致。

类似于这样的对应关系。

CSS 对应 USS 用于控制样式

HTML 对应 UXML 用于控制布局

JS 对应的是 C# 用于编写互动逻辑 & 实现复杂的动画交互效果

如果你学过 HTML 那这些似乎听起来让人兴奋，这似乎又进入到了我熟悉的领域，嗯我就有这样的感觉

实例中的所有图片可以在 blush design 这里找到

但是如果是我其实并不在意用哪个图片，重要的是效果，快速熟悉之后，你完全可以使用自己的素材来实现你自己想要的交互特效。

首先构建设置你的 UI

在你的 Assets 文件夹下创建一个 UI Document，一般来说我的分包习惯会给 UI 单独创建一个文件夹，这个就是 UXML 文件，他是后面用于构建组织我们整个界面排版的

然后在你的场景中创建一个空的 Object ，作为 UI 习惯上我会把他也命名为 UI，并为其添加脚本 UI Document，那据我不完全观察，2020 版本是没有这个系统自带的 UI Document 脚本的，所以如果是新的项目，建议用比较新的版本，但是不建议 2023 或之后的版本（至少本文发布的时候不建议，毕竟 Unity 收费问题搞的真是鬼屎）

这里可以看到有三个可配置项

Panel Settings
Source Asset
Sort Order

Source Asset 需要关联对应的 UXML 也就是我们刚刚创建的文件。

还有一个必须的文件 Panel Settings

同样创建一个 Settings 文件，该文件用于定义你的 UI 如何在屏幕上渲染，其中会有很多定制化参数

比如你可能需要调整缩放模式是恒定大小还是随屏幕大小缩放

将此文件关联到刚刚创建的 UI Document 中就完成了基本的初始化

回顾一下我们做了什么

创建 UXML 即 UI Document ，在场景中创建空物体来承载 UI 脚本，挂载 UI Document ，关联 UXML 和 Panel Setting。

这个时候我们可以双击 UXML 文件进入 UI Builder 中进行可视化编辑了。

UI Builder 简单 UI 编辑

你会看到类似这样的一个界面

这里会列出 UI 的根路径，如图就是 Sample.uxml 这个类似于 <html>

Library 中列出了所有可用的组件，我们可以通过这些组件定制 UI ，这里你需要确定一个事情，设置 Theme 为默认的 Runtime Theme

当你选中根对象时，可以通过 Size 设置画布的大小，可以勾选 Match Game View 选项，这将使你的画布同游戏画面大小保持一致。

当你把 Camera 设置为你游戏中的 Camera 时，你的 UI 视图会展示在游戏视图前面

Visual Element

Visual Element 是构建 UI 界面的最基本的元素，它类似于 H5 的 <div> 如官网介绍，这些元素排序构成的具有父子关系的结构就是视觉树 （官网上来整什么名词视觉树，说这么高大上让人搞不懂其实就是个列表吗）Introduction to visual elements and the visual tree

在操作面板，你甚至可以配置 Visual Element 的位置、布局模式、大小、背景模式等等