您想找什么?
Games

都在这里:在 Unity 中创建 UI 界面的终极指南

SHANTI ZACHARIAH / UNITY TECHNOLOGIESSenior content marketing manager
Dec 15, 2022|9 Min
都在这里:在 Unity 中创建 UI 界面的终极指南
为方便起见,此网页已进行机器翻译。我们无法保证翻译内容的准确性或可靠性。如果您对翻译内容的准确性有疑问,请参阅此网页的官方英文版本。
成千上万的人已经进行了预登记,现在它终于来了:我们最大的电子书、 Unity 中的用户界面设计与实现可供下载。准备好沐浴在超130页的高级UI设计里吧。

游戏的界面可能是开发者与玩家沟通、指引玩家最直接的方式了,它们就像一张地图,一路上为玩家揭开线索和关键细节,指明方向。无论您使用的是血量条或弹出消息等传统UI元素,还是嵌入到游戏世界的元素,比如位于玩家背部的状态信息,这种UI可以让玩家完全沉浸到游戏的故事、国度和美术世界中。

我们非常高兴地宣布,我们的最新技术电子书《Unity 中的用户界面设计与实现》即将出版、 Unity 中的用户界面设计与实现可免费下载。数以千计的人已经注册了它,同样多的人下载了它的配套项目--演示项目、 用户界面工具包示例 - 猛龙过江迄今为止,已经有数以千计的人注册了它。现在,你也能来下载啦。

了解 Unity 中的用户界面设计与实现
Unity电子书中 "用户界面设计与实现 "的内部视角
用户界面基础从艺术创作到最新工具集

这本电子书如此受欢迎并不让人意外。正如书中所说,“用户界面是任意一款游戏的关键部分……高质量的图形用户界面(GUI)是游戏视觉特色的延伸……现在的用户们希望GUI精细、易懂,可以无缝融入应用。”

本指南书首先介绍了UI设计与艺术创作的基础,接着深入讲解了用Unity开发UI的各环节。这本电子书由技术和 UI 艺术家(外部和 Unity 专业人士)撰写和审阅,同时解读了Unity UI 默认解决方案)和较新的UI 工具包

不过,重点在于后一种工具集,因为 UI 工具包现在可以为具有复杂的全屏界面的项目提供许多好处。想想那些需要可扩展且性能良好的运行时用户界面系统的项目。为了帮助您选择适合您项目的解决方案,请参考 Unity 手册的这一部分

线框图、内容来回、灰盒测试等等
 UI Toolkit样板项目,使用了《Dragon Crashers》演示的美术资源,并借助Adobe XD的线框图来测试菜单浏览流程并产生反馈。
UI Toolkit样板项目,使用了《Dragon Crashers》演示的美术资源,并借助Adobe XD的线框图来测试菜单浏览流程并产生反馈。

这本电子书对于希望加强UI开发知识的设计师、美术师及其他创作者来说是一处信息的宝藏。以下是指南书的概要。

第一部分包含了制作有效UI的基础技巧。本章介绍了 "diegetic UI "的例子,即在故事中就能找到 UI 元素,使游戏世界的部分内容成为用户界面。它解释了各种元素是如何促进或破坏玩家的沉浸体验的。我们甚至把这部分内容写成了一篇博文,您可以在这里阅读。

本指南接着讨论了UI设计师的角色与责任,以及常见的工具和方法,如UI线框图、模型创作、字体和灰盒测试。还有一章介绍资产准备和从数字内容创建(DCC) 工具中导出图形。这部分说明对任何游戏引擎及UI解决方案都非常实用。

Unity UI高级使用技巧

书中有一块专门的章节讨论了Unity UI。Unity UI 是我们长期以来用于创建游戏内 UI 的系统,也是目前在 3D 世界中定位 UI 或使用基于 GameObject 的 Unity 系统的首选解决方案。

用GameObject元素制作的Unity UI Samples资产。
用GameObject元素制作的Unity UI Samples资产。

本节概述了在编辑器中制作原型和集成资产的 Unity UI 基础知识:画布预构建 UI 元素TextMesh ProPrefabs 等。我们最近更新了一篇关于Unity UI 高级优化技术的文章,您可以在其中找到相关主题的技巧。

不断改进的UI Toolkit

UI Toolkit最大化了性能与复用性,从网页技术汲取了工作流与创作工具的灵感。此前设计过网页的设计师和美术师们会非常熟悉这款工具。

本指南用三部分介绍了用UI Toolkit开发运行时UI的步骤。这里对使用 UI 工具包制作的用户界面的构成部分进行了详尽的解释,包括使用UI BuilderUnity 可扩展标记语言(UXML)和Unity 样式表 (USS)。

您将了解 UI 工具包如何根据以下原则定位视觉元素 瑜伽的一个HTML/CSS 布局引擎来定位视觉元素Flexbox.Flexbox(灵活盒)带有响应式UI等优势,可让UI适应不同的屏幕分辨率和大小。借助UXML和USS,您可以将UI样式与代码内的逻辑和功能拆分开来(也可随时调换)。本指南还详细讨论了最基础的视觉元素制作流程——从位置摆放、大小和对齐,到外边距(margin)和内边距(padding)。

解耦逻辑与设计程序员将把视觉元素与实际游戏逻辑连接起来(如底部所示),而设计师则专注于定义视觉元素的样式(顶部的用户界面生成器)。
解耦逻辑与设计程序员将把视觉元素与实际游戏逻辑连接起来(如底部所示),而设计师则专注于定义视觉元素的样式(顶部的用户界面生成器)。
一切以样式为主
您可以用Transition Animation(转换动画)在不同的风格间切换。
您可以用Transition Animation(转换动画)在不同的风格间切换。

关于样式的章节将向你展示如何使用选择器为可视化元素定义可重复使用的样式,使用内联样式覆盖样式和定义独特的属性,以及使用USS 动画相机渲染纹理创建动画和特效。它还演示了如何针对节假日和其他特殊事件将用户界面元素主题化。

这就是电子书进入 用户界面工具包示例 - Dragon Crashers从菜单和自定义控件(如径向计数器或标签视图),到嵌入式 UXML 模板等。

来自用户界面工具包样本:使用可脚本对象数据填充的清单
来自用户界面工具包样本:使用可脚本对象数据填充的清单

最后,本指南介绍了 Mechanistry 工作室在新游戏《Timberborn》中将用户界面迁移到 UI 工具包的过程。这篇简短的案例研究展示了一支小团队如何让游戏UI在各个菜单及屏幕上保持一致。

在Unity里打磨UI

这本137页的UI电子书并不能一夜读完。您可以像使用其他技术电子书一样,时不时地翻开参考一下。

除了电子书以外,我们还发布了许多满含Unity UI和UI Toolkit实用技巧的资源:

一键下书

将其中一个或两个页面加入书签。他们汇编了我们所有的技术电子书和高级内容:

我们希望您喜欢这本最新的电子书,并期待您在本论坛上提出反馈意见。

Unity中的用户界面设计与实现》电子书的宣传画