全新的UI Toolkit样例，现已在资源商店开放下载

Unity 2021 LTS的UI Toolkit提供了一系列的功能、资源和工具，可帮助你为各类游戏应用和编辑器扩展制作和调试自适应的运行时UI。其直观的工作流程能让美术、程序和设计师等不同的Unity创作者尽快开始UI开发。

你可以在我们先前的博文里了解UI Toolkit更强的可扩展性和性能等主要优点，该工具已经被Mechanistry等工作室用在游戏《Timberborn》中。

尽管Unity UI仍是在3D世界里摆放和照亮UI的首选方案，但自Unity 2021 LTS起，我们更推荐使用UI Toolkit制作运行时UI。它非常适合用在Screen Space – Overlay UI（屏幕空间—覆盖UI）上，可在各种分辨率的屏幕上缩放。

并且，我们很高兴地宣布两款新学习资源，以更好地支持UI Toolkit的UI开发：

• “UI Toolkit Sample - Dragon Crashers”：该演示目前已在资源商店上开放免费下载。
• “User interface design and implementation in Unity”：这本免费的电子书将于几周内发布。在这里注册来第一时间获取本指南。

请在下文了解UI Toolkit样例项目的几个关键特色。

UI Toolkit样本演示了怎样在应用中使用该工具。“Dragon Crashers”2D小型RPG游戏片段包含了一个功能全面的界面，其运行时使用了Unity 2021 LTS的UI Toolkit工作流。

样例项目中的一些操作将向你展示如何：

• 选取Unity样式表（USS）文件中的风格，使用UXML模板
• 创建圆形表盘或标签视图等自定义控件
• 自定义滑块和勾选按钮等元素的外观
• 使用Render Texture制作覆盖型UI、USS动画、季节性主题等。

在导入项目到资产库后，请进入Play模式来运行它。注意，UI Toolkit的界面并不会出现在Scene场景视图内。你可以在Game游戏视图或UI Builder中查看它们。

左侧的菜单可帮助你浏览主菜单屏幕模块。这列垂直按钮能让你访问主菜单的五个模块（各模块在被切换时仍会保持激活状态）。

尽管你可以完成一定的互动，比如拖动药水来治疗角色，但项目的游戏性已经被保持在最低限度，以保证所有注意力都在UI示例上。

我们来仔细看一下菜单栏中的UI：

• 主页界面是应用启动时的初始界面。j 你可以在该屏进入游戏或接收模拟的聊天信息。

• 角色界面则混合了GameObject和UI元素。你可以在这里分别了解四位“屠龙者”。用数据统计、技能和人物简介来了解具体的角色细节，并点击物品栏来添加或删去物品。预览区域则在一块铺开的背景上展示了接收2D光照且绑定了动画的角色。

• 资源界面包含了文档、论坛及其他资源的链接，让你能充分起利用UI Toolkit

• 商店界面模仿了一个游戏商店，你可以在这里购买硬货币（金币）和软货币（宝石），以及虚拟商品（如治疗药水）。商店界面中的每一个物品都是一个独立的VisualTreeAsset。UI Toolkit会在运行时实例化这些资产；每个Resources/GameData里的ScriptableObject可编程对象都包含一个这样的资产。

• 消息界面是一个邮件前端阅读器，它采用标签菜单来划分收件箱和已删除消息。

• 游戏界面是精简版的“Dragon Crashers”放置游戏。在项目中，你会注意到部分修改过的UI Toolkit元素，比如暂停按钮、血量条，外加角色受伤时可以拖动的治疗药水元素。

UI Toolkit支持为整个项目创建稳定和风格统一的UI。它还提供了灵活的工具来让你添加自己的设计亮点和细节，进一步充实游戏的主题和风格。

我们再来看看用于完善样例UI设计的一些功能。

• Render Texture： UI Toolkit界面被安排在渲染队列的最后，意味着你不能在UI Toolkit界面上覆盖其他图形。Render Texture却为这样的限制提供了变通方法，让游戏内的效果也能整合到UI Toolkit的UI中。尽管Render Texture效果不应多用，但你还是能在全屏UI上负担起清晰的效果，不需要运行游戏。下方图片展示了演示内的部分Render Texture。

• 用主题样式表（Theme Style Sheets，TSS）制作的主题：TSS文件是一种类似普通USS文件的资产。你能以它为基础，借助USS选择器以及属性和变量设置来定义自定义主题。在演示中，我们复制了默认的主题文件，并修改出了季节性主题。

• 自定义UI元素：鉴于设计师们经常要跳出思维定式进行思考，我们为UI Toolkit留够了自定义和拓展的空间。该项目着重展示了标签菜单、滑动开关和下拉列表里的部分定制元素，以及一个弧形计数器，以显示UI艺术家与开发者合作时的创作力。

• 用于动画UI状态变化的USS转场：在菜单上添加转场可以使视效显得更加流畅。UI Toolkit的Transition Animations可让转场的制作更加直接，它位于UI Builder的检视器内。你可以通过调整属性（Property）、持续时间（Duration）、缓和（Easing）、延迟（Delay）等属性来设置动画。然后简单地改变UI Toolkit的样式，在运行时应用动画转场。

• 用后处理体积制作背景的模糊效果：在许多游戏里流行的这种效果会模糊拥挤的游戏场景，将玩家的注意力保持在一个特定的消息或会话弹窗上。你可以借助Volume框架（在URP中可用）的Depth of Field来实现这种效果。

我们为UI建立了高效的工作流，并且为你准备了以下几条保持项目井然有序的建议：

• 统一命名规则：采用与视觉元素和样式表相一致的命名规则。清晰的命名规则不仅有助于维持UI Builder的层级结构，还能方便其他团队成员理解层级，并保持代码的整洁度和可读性。 具体来说，我们建议为视觉元素和样式表采用 Block Element Modifier (BEM) 命名惯例。我们可以一眼从某个元素的BEM命名上看出它的作用、显现方式以及其与周围其他元素的关系。以下是几条BEM命名的例子：

• 响应式UI布局：类似于网页技术，UI Toolkit也可用于制作此类布局，即“子”元素会适应“父”元素的尺寸，而其他元素则固定在一个锚点的绝对位置上，类似于Unity UI系统。本样例同样使用了视觉元素应用了这两类UI。

• PSD Importer：PSD Importer是本演示制作过程中最有用工具之一，它允许美术直接使用一个主要文件，而不必手动一个个导出精灵。精灵还能在原PSD文件中直接修改，并自动更新到Unity。
• ScriptableObject：为了着重展示UI设计和实现，该示例项目使用了ScriptableObject模拟了应用内购和邮件消息等后台数据。你可以随时在Resources/GameData文件夹下修改这些数据，或据此创建类似的资产，比如物品栏和UI Toolkit中的角色或对话。

在使用UI Toolkit时，UI布局和样式与代码是不相关的。后端数据可以独立于UI设计改写。所以即便开发团队更换了后端系统，原界面应该也能继续工作。

演示中用到的其他工具还包括用Built-in Particle System（内置粒子系统）创建的特效粒子，以及2D工具集等等。你可以随时在检视器中了解各个元素如何发挥作用。

还可以在UI/Reference下找到由专业UI美术制作的UI Builder参考物。整个制作过程，从样板到界面线框，也都记录在电子书内。最后，你可以随意将样例中的内容添加到自己的Unity项目中。

你现在就能从资源商店下载“UI Toolkit sample - Dragon Crashers”。在探索万其中的UI设计后，欢迎到论坛上留下你的反馈意见。

然后不要忘了我们将于秋季推出的电子书，“User interface design and implementation in Unity”。在这里抢先注册，在指南书上线的第一时间收到邮件。