Unity ID
UI Toolkit 上新 | 为程序员和艺术家准备的两个Demo

Unity技术博客
官方技术干货、社区动向、学习信息、活动资讯
阅读 2247
2023年12月18日
Unity 推出了两个新的教学示例，帮助开发者使用 UI Toolkit 构建内容丰富、反应灵敏的可扩展 UI。
UI Toolkit https://unity.com/features/ui-toolkit提供了一套工具 https://docs.unity3d.com/Manual/UIBuilder.html，用于为游戏和应用程序开发高性能可扩展的运行时 UI https://unity.com/case-study/timberborn，为 Unity 编辑器自定义拓展界面，以及定制运行时调试工具。
Unity 已经推出两个新的示例项目，以满足程序员和艺术家在使用 UI Toolkit 创建专业的游戏 UI 时的不同需求。
我们制作这些教学示例的目的是帮助开发者使用 UI Toolkit 构建内容丰富、反应灵敏的可扩展 UI。新的示例项目《QuizU》 https://assetstore.unity.com/packages/essentials/tutorial-projects/quizu-a-ui-toolkit-sample-268492是面向程序员的，更新后的《UI Toolkit Sample-Dragon Crashers》 https://assetstore.unity.com/packages/essentials/tutorial-projects/ui-toolkit-sample-dragon-crashers-231178是面向艺术家的。这是两个截然不同的项目，每个项目都配有辅助性教学内容。
*这是《UI Toolkit Sample – Dragon Crashers》中的一个角色画面，它展示了如何将 GameObjects 和 UI 元素相结合来为画面赋予动态性和趣味性

全新的 UI Toolkit 示例项目《QuizU》
*《QuizU》示例项目是一个基于 UI Toolkit 的游戏
《QuizU》 https://assetstore.unity.com/packages/essentials/tutorial-projects/quizu-a-ui-toolkit-sample-268492是一个以程序员为中心的交互式问答应用程序示例，展示了 UI Toolkit 组件如何利用各种设计模式，在一个规模小但功能强大的游戏中协同工作。这个游戏具有多个界面和游戏流程管理功能。
这个演示项目由两部分组成：10 个小巧易懂的示例，展示了 UI Toolkit 的不同方面；一个迷你问答游戏，将 10 个场景中的许多技术整合到了一个完整的项目中。
小游戏的极简视觉风格让开发者能专注于 UI 的实现机制，而不会迷失在设计细节中。
展示设计模式的交互式迷你游戏
这个问答游戏展示了如何使用游戏流程的状态模式、如何管理多个菜单屏幕、如何使用 Model View Presenter（MVP）模式，以及如何在 UI Toolkit 中实现事件处理等。游戏玩法是一个非常简单的问答游戏机制，但其目的是向开发者展示如何在自己的项目中使用这些实现方法。
*试玩《QuizU》来了解设计模式和 UI Toolkit 是如何协同工作的
通过将设计模式 https://blog.unity.com/games/level-up-your-code-with-game-programming-patterns持续集成到项目中，开发者可以提高代码的可读性，让代码库更加清晰。设计模式不仅可以减少重构和测试时间，还可以加快整个团队的开发进程。
此外，由事件驱动的架构（其中的游戏组件通过事件相互通信）有助于实现松散耦合，从而提高游戏的可扩展性和可测试性。
小巧的演示场景
*从 Demo Selection Screen（演示选择界面）选择一个演示场景
演示的第二部分由 10 个小型演示场景组成。每个演示场景代表某项特定的技术或功能。开发者可以将它们看作一套示例集，如果下一个项目考虑使用 UI Toolkit，可以用它寻找灵感或作为指南使用。下面是展示 UI Toolkit 功能和技术的演示场景简要示例：
1. UXML 和视觉树（Visual Trees） https://docs.unity3d.com/Manual/UIE-VisualTree.html：UXML 文件形成了 UI 元素的层级结构。这些视觉树是用户界面的蓝图。
2. Flexbox https://docs.unity3d.com/Manual/UIE-LayoutEngine.html：弹性框布局模型（Flexible Box Layout Model，简称 Flexbox）为在容器内动态排列 UI 元素提供了一种高效的布局方式。
3. Unity 样式表（Unity Style Sheets，简称 USS） https://docs.unity3d.com/Manual/UIE-about-uss.html：USS 让开发者能够使用预定义的样式自定义 UI 元素。重新设计 UI 只需更换样式表即可。
4. UQuery https://docs.unity3d.com/Manual/UIE-UQuery.html：UQuery 简化了在复杂的 UI 元素层次结构中进行搜索的过程，实现了在视觉树中导航到特定的 UI 组件。
5. 伪类（Pseudo-classes） https://docs.unity3d.com/Manual/UIE-USS-Selectors-Pseudo-Classes.html：伪类应用极少的额外代码，即可创建带有动画效果的交互式 UI 元素，如悬停在按钮上时将其放大或在选中后改变文本字段的颜色，从而让视觉界面变得生动有趣。
6. UI Toolkit 事件系统 https://docs.unity3d.com/Manual/UIE-Events-Dispatching.html：UI Toolkit 拥有自己的事件系统，可用于处理 UI 的点击、变化和指针输入，即使在复杂的层级结构中也能轻松应对。
7. 操纵器（Manipulator） https://docs.unity3d.com/Manual/UIE-Events-Handling.html#manipulator：操纵器将相关的事件回调封装到一个单独的类中，从而提高了可重用性，并使定义用户交互变得更加容易（例如，库存系统的点击拖动操纵器、捏合缩放效果的手势操纵器等）。
8. 自定义控件 https://docs.unity3d.com/Manual/UIB-structuring-ui-custom-elements.html：这个演示项目展示了如何通过 UxmlFactory 类和 UxmlTraits 类定义和实例化自定义的 VisualElement。这些自定义控件可以通过脚本或 UI Builder 重复使用。
建议大家下载《QuizU》 https://assetstore.unity.com/packages/essentials/tutorial-projects/quizu-a-ui-toolkit-sample-268492后，在 Unity 2022 LTS 版本中打开和运行它。我们准备了丰富的配套系列文章，列表如下：
欢迎使用全新的 UI Toolkit 示例工程《QuizU》 https://discussions.unity.com/t/welcome-to-the-new-ui-toolkit-sample-project-quizu/308607
《QuizU》游戏流程中的状态模式 https://discussions.unity.com/t/quizu-state-pattern-for-game-flow/309255
管理 UI Toolkit 中的菜单界面 https://discussions.unity.com/t/quizu-managing-menu-screens-in-ui-toolkit/310272
Model View Presenter（MVP）模式 https://discussions.unity.com/t/quizu-the-model-view-presenter-pattern/311043
UI Toolkit 中的事件处理 https://discussions.unity.com/t/quizu-event-handling-in-ui-toolkit/312447
UI Toolkit 性能技巧 https://discussions.unity.com/t/quizu-ui-toolkit-performance-tips/312451

示例工程更新《UI Toolkit Sample – Dragon Crashers (2022 LTS)》
*为 Unity 2022 LTS 版本更新的部分：横向和纵向的响应式 UI
2022 年 9 月，我们推出了《UI Toolkit Sample - Dragon Crashers》 https://developer.unity.cn/projects/61109fcfedbc2a3e132c3c2c。这个具有完整功能的界面演示是基于 2D 迷你 RPG 项目《Dragon Crashers》 https://assetstore.unity.com/packages/essentials/tutorial-projects/dragon-crashers-2d-sample-project-190721中的一个片段，它展示了开发者在自己的应用程序中充分利用 UI Toolkit 的技巧。
开发者现在可以下载《UI Toolkit Sample – Dragon Crashers》针对 Unity 2022 LTS 更新后的版本。最新版本中的改进和更新包括：
通过主题和 UI Toolkit 中的 GeometryChangedEvent，支持运行时横向和纵向屏幕模式
实现了 SafeArea API，以便将 UI 功能限制在设备的可用屏幕区域内
将移动设备的帧率上限提高至 60 FPS
重新设计并简化了选择器和 USS 样式表
更高分辨率的图标
对于不同的屏幕比例，改进了固定的视觉效果生成位置，以及一些光标不一致的问题
对设计模式进行了重构，以实现更清晰的 UI 架构
在教程检视器（Tutorial Inspector）窗口中提供了新的学习内容
*这个演示项目在更新中使用了 SafeArea API，可以帮助开发者将 UI 功能限制在可用屏幕区域内
该示例项目的用户指南和视频教程
我们为更新后的项目添加了用户指南，以帮助大家更好地理解演示项目中使用的技术和功能。
我们还为该项目制作了一个视频教程，帮助开发者更好地查看和理解这个演示项目：

希望《QuizU》和更新版 《UI Toolkit Sample – Dragon Crashers》 这两个示例项目能帮助大家获得更多技巧。
官方示例
Demo
UI Toolkit
发布于Unity引擎