尝试新的UI工具包示例 – 现在在资产商店可用

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Sep 9, 2022|14 最低
尝试新的UI工具包示例 – 现在在资产商店可用
为方便起见,此网页已进行机器翻译。我们无法保证翻译内容的准确性或可靠性。如果您对翻译内容的准确性有疑问,请参阅此网页的官方英文版本。

在 Unity 2021 LTS 中,UI Toolkit 提供了一系列功能、资源和工具,帮助您在各种游戏应用程序和编辑器扩展上构建和调试自适应运行时 UI。其直观的工作流程使不同角色的 Unity 创作者——艺术家、程序员和设计师——能够尽快开始 UI 开发。

请参阅我们的 早期博客文章,了解 UI Toolkit 的主要优势,例如增强的可扩展性和性能,已经被像 Mechanistry 这样的工作室用于他们的游戏 Timberborn

虽然 Unity UI 仍然是 3D 世界中定位和照明 UI 或与其他 Unity 系统集成的首选解决方案,但从 Unity 2021 LTS 开始,运行时 UI 的 UI Toolkit 已经可以为寻求性能和可扩展性的游戏制作带来好处。它在屏幕空间 - 覆盖 UI 中特别有效,并且在各种屏幕分辨率上具有良好的缩放性。

这就是为什么我们很高兴宣布两个新的学习资源,以更好地支持使用 UI Toolkit 进行 UI 开发:

继续阅读以了解 UI Toolkit 示例项目的一些关键功能。

具有全功能 UI 设计的游戏玩法片段

UI Toolkit 示例演示了您如何利用 UI Toolkit 为自己的应用程序服务。该演示涉及在 2D 项目 Dragon Crashers, 一个迷你 RPG 上的全功能界面,使用 Unity 2021 LTS UI Toolkit 工作流程在运行时。

使用 UI Toolkit 演示项目 Dragon Crashers 的编辑器和 UI 构建器
使用 UI Toolkit 演示项目 Dragon Crashers 的编辑器和 UI 构建器

示例项目中展示的一些操作向您展示如何:

  • 在 Unity 样式表 (USS) 文件中使用选择器进行样式设置,并使用 UXML 模板
  • 创建自定义控件,例如圆形仪表或选项卡视图
  • 自定义滑块和切换按钮等元素的外观
  • 使用渲染纹理进行UI覆盖效果、USS动画、季节主题等

在将项目添加到您的素材资源后,尝试输入播放模式。请注意,UI工具包界面不会出现在场景视图中。相反,您可以在游戏视图UI构建器中查看它们。

左侧的菜单帮助您导航模态主菜单屏幕。这列垂直按钮提供访问五个模态屏幕的权限,这些屏幕构成了主菜单(在切换屏幕时保持活动状态)。

虽然某些互动是可能的,例如通过拖动场景中的可用药水来治疗角色,但游戏玩法保持在最低限度,以确保持续关注UI示例。

库存、角色、游戏内购买等的UI

让我们仔细看看菜单栏中的UI:

  • 主页屏幕在启动应用程序时充当着着陆垫。您可以使用此屏幕来玩游戏或接收模拟聊天消息。
UI工具包演示项目,龙崩溃者,主页屏幕
主页屏幕
  • 角色屏幕涉及游戏对象和UI元素的混合。在这里,您可以探索四个龙崩溃者角色中的每一个。使用统计、技能和生物标签阅读特定角色详细信息,并单击库存槽以添加或删除物品。预览区域显示一个2D照明和绑定的角色,背景为瓷砖状。
UI工具包演示项目,龙崩溃者,角色屏幕
角色屏幕
  • 资源屏幕链接到文档、论坛和其他资源,以充分利用UI工具包。
UI工具包演示项目,龙崩溃者,资源屏幕
资源屏幕
  • 商店屏幕模拟了一个游戏内商店,您可以在其中购买硬币和软币,例如金币或宝石,以及虚拟商品,如治疗药水。商店屏幕中的每个项目都是一个单独的视觉树资产。UI工具包在运行时实例化这些资产;每个资源/游戏数据中的ScriptableObject一个。
UI工具包演示项目,龙崩溃者,商店屏幕
商店屏幕
  • 邮件屏幕是虚构消息的前端阅读器,使用选项卡菜单将收件箱和已删除消息分开。
UI工具包演示项目,龙崩溃者,消息屏幕
邮件屏幕
  • 游戏屏幕是龙崩溃者项目的迷你版本,自动开始播放。在这个项目中,您会注意到一些使用UI工具包的修订元素,例如暂停按钮、生命值条,以及在角色受伤时将治疗药水元素拖到角色上的能力。
UI工具包演示项目,龙崩溃者,游戏屏幕
游戏屏幕
使用UI工具包增强UI

UI工具包使您能够为整个项目构建稳定且一致的UI。同时,它提供灵活的工具,以添加您自己的设计细节和装饰,以进一步丰富游戏的主题和风格。

让我们回顾一下用于完善示例中UI设计的一些功能:

  • 渲染纹理: UI工具包界面在渲染队列中最后渲染,这意味着您无法在UI工具包UI上叠加其他游戏图形。渲染纹理提供了一种解决此限制的方法,使得可以将游戏内效果集成到UI工具包的用户界面中。虽然基于渲染纹理的这些效果应谨慎使用,但您仍然可以在全屏用户界面的上下文中实现清晰的效果,而无需运行游戏玩法。以下图像展示了演示中的多个渲染纹理。
在UI构建器中使用渲染纹理创建效果
使用渲染纹理创建的效果:顶部图像显示了由粒子效果组成的动画帧是如何在UI构建器中捕获到渲染纹理中的,而左下角的图像显示了在角色升级时触发的效果,右下角的帧描绘了一个动画头像。
  • 主题与主题样式表(TSS):TSS文件是类似于常规USS文件的资产文件。它们作为通过USS选择器以及属性和变量设置定义您自己自定义主题的起点。在演示中,我们复制了默认主题文件并修改了副本以提供季节性变化。
UI工具包中的主题
从设置菜单中,您可以通过右上角的齿轮图标切换运行时项目的主题样式表为圣诞节或万圣节主题。
  • 自定义UI元素:由于设计师被训练成跳出框框思考,UI工具包为您提供了大量空间来自定义或扩展标准库。演示项目突出了选项卡菜单、滑动切换和下拉列表中的一些自定义构建元素,以及一个径向计数器,以展示UI艺术家与开发人员的能力。
UI工具包中的高级自定义
即将发布的电子书解释了这些控件是如何被自定义的。您还可以在Unity文档中找到有关如何创建自定义选项卡视图的详细信息。
  • USS过渡用于动画UI状态变化:为菜单屏幕添加过渡效果可以使您的视觉效果更加精致和平滑。UI 工具包通过 过渡动画 属性使这一过程更加简单,这是 UI 构建器的 检查器 的一部分。调整属性、持续时间、缓动和延迟属性以设置动画。然后只需更改样式,以便 UI 工具包在运行时应用动画过渡。
菜单栏按钮和图标会对指针点击事件进行动画处理。
菜单栏按钮和图标会对指针点击事件进行动画处理。
  • 背景模糊的后期处理音量:游戏中一个流行的效果是模糊拥挤的游戏场景,以吸引玩家注意特定的弹出消息或对话窗口。您可以通过在 景深 中启用 音量框架 来实现此效果(在通用渲染管线中可用)。
用户界面中的模糊效果
音量框架促进了在弹出窗口后创建这种模糊图像效果:后期处理可能会消耗大量资源,但如果您在游戏暂停期间启用此类效果,例如,它们不应影响游戏性能。
一个有组织的项目有助于激发创造力

我们确保使用高效的工作流程来加强用户界面。以下是保持项目良好组织的一些建议:

  • 一致的命名约定:采用与您的视觉元素和样式表一致的命名约定非常重要。清晰的命名约定不仅保持了 UI 构建器中层次结构的组织性,还使其对您的团队成员更易于访问,并保持代码的整洁和可读。更具体地说,我们建议使用 块元素修饰符 (BEM) 命名约定来命名视觉元素和样式表。一眼看去,元素的 BEM 命名可以告诉您它的功能、外观以及它与周围其他元素的关系。请参见以下 BEM 命名示例:
UI工具包演示项目,龙崩溃,建议的命名约定
建议的命名约定
  • 响应式UI布局:类似于Web技术,UI工具包提供了创建布局的可能性,其中“子”视觉元素适应其“父”视觉元素内部当前可用的大小,以及其他每个元素都有一个锚定到参考点的绝对位置,类似于Unity UI系统。该示例根据需要通过UI的视觉元素使用这两种选项。
捕获即将在UI工具包电子书中提供的布局。
电子书介绍了更响应式布局的基本要素,以及UI构建器中可用的其他功能。
  • PSD导入器:作为创建演示的最有效工具之一,PSD导入器允许艺术家在主文档中工作,而无需手动单独导出每个精灵。当需要更改时,可以在原始PSD文件中进行更改,并在Unity中自动更新。
  • 可脚本化对象:为了专注于UI设计和实现,示例项目使用可脚本化对象模拟后端数据,例如应用内购买和邮件消息。您可以方便地从资源/游戏数据文件夹自定义此替代数据,并使用该示例创建类似的数据资产,如库存项目和UI工具包中的角色或对话数据。
包含项目视图中显示的图标的PSD文件展开了文件中的所有精灵,这些精灵可以在任何其他Unity系统中用作2D精灵。
包含项目视图中显示的图标的PSD文件展开了文件中的所有精灵,这些精灵可以在任何其他Unity系统中用作2D精灵。

请记住,使用UI工具包时,UI布局和样式与代码解耦。这意味着重写后端数据可以独立于UI设计进行。如果您的开发团队替换这些系统,界面应该继续工作。

演示中使用的其他工具包括使用内置粒子系统创建的粒子系统用于特效,以及2D工具集等。请随时通过检查器查看项目,以了解这些不同元素如何发挥作用。

您可以在UI/Reference下找到由UI艺术家制作的参考艺术,如在UI Builder中复制的那样。整个过程,从模型到线框图,也记录在电子书中。最后,样本中的所有内容都可以添加到您自己的Unity项目中。

UI工具包示例的早期线框图
UI工具包示例的早期线框图
下载示例项目,为即将到来的电子书做好准备

您可以从资产商店下载UI工具包示例 – 龙崩溃者。一旦您探索了其不同的UI设计,请在论坛上提供您的反馈。

然后一定要查看我们的电子书,用户界面设计与Unity中的实现。下载