您想找什么?
Hero background image
Case study
Timberborn 复杂的运行时用户界面是如何构建的
Mechanistry通过切换到UI Toolkit节省了大量的制作时间,并为其基于海狸的城市建设者精心设计了复杂的用户界面。
阅读我们的免费实践指南,了解 Unity 中的用户界面设计和实现。
下载电子书

简化用户界面开发

How does a small team with few resources create a complex city-builder UI? When Timberborn became an Early Access hit on Steam, Mechanistry needed to quickly iterate on intuitive UI for a rapidly growing playerbase. By switching from uGUI to UI Toolkit, they were able to accelerate production with cleaner code that’s easier to maintain.

挑战

Creating a scalable, beautiful, and high-performance UI with consistent elements

平台

PC, MacOS

团队成员

13

所在地

Distributed, Poland

timberborn 拖车

选择 Unity

chanistry 具有软件开发背景,非常重视简洁的代码、敏捷的工作流程和出色的用户体验。这就是他们选择 Unity 来制作 Timberb orn 的原因。程序员帕维尔·杜达说:“这是明智的选择。”“有很多网络资源。学习曲线并不陡峭。而且我们的团队熟悉 C#。”

结果

结果

  • 加速用户界面原型设计和实现,现在需要数小时而不是数天
  • 从每周几次合并冲突变为零已实现 “压倒
  • 性的Steam 在近 18,000 条评论中获得了 “正面” 评级
突破 uGui 的极限
突破 uGui 的极限

Mechanistry在早期开发中使用了uGUI,但是随着 Timberb orn变得越来越复杂,出现了问题。重新调整图标会破坏布局,重复使用资源具有挑战性,而且由于代码不是人类可读的,因此每周都会出现多次合并冲突。帕维尔说:“如果两个人在同一个预制件上工作,通常会出现问题。”“有些冲突是自动解决的。但是,如果不是,我们必须手动重新创建预制件。”

在看到用户界面工具包路线图后,Mechanistry决定迁移到新系统。他们希望坚持使用 Unity 制定的解决方案,并注意到 UI Toolkit 的灵感来自网络技术,他们相信他们的团队会顺利完成过渡

游戏中有许多窗口和控件的 Timberborn 用户界面
迁移到 UI 工具包

该团队在几个月的时间里采取了务实的迁移方法。首先,他们清理了用户界面代码架构并删除了代码气味。然后,他们在 UI Toolkit 中重新创建了所有用户界面元素,并重新设计了资产以获得他们想要的外观。

帕维尔解释说:“切换到用户界面工具包改变了游戏规则。”“以前,我们不愿制作漂亮的用户界面,因为我们知道这将是一件大麻烦。现在,我们在游戏中添加了用户界面缩放和隐藏菜单之类的内容,而且做起来比使用uGui容易得多。”

有许多海狸的 Timberborn 地区十字路口
解决合并冲突

Mechanistry指出,迁移到UI Toolkit实际上已经消除了合并冲突,而合并冲突一直是工作室放缓的主要原因。帕维尔说:“如果出现冲突,我们可以看到它并立即知道如何解决它。”“每个人都可以同时在用户界面上工作,即使是在同一个元素上也是如此,这不是问题。”

UI Toolkit 还允许他们将游戏逻辑与 UI 逻辑分开,从而进一步减少冲突。现在,团队可以独立迭代用户界面的不同部分,并单独测试组件,从而减少损坏的构建。帕维尔补充说:“这对我们来说非常非常重要。”

Timberborn 树篱迷宫鸟瞰图
实时调试

Timberborn 的可扩展自适应用户界面目前支持 12 种语言。在它们之间切换可能会导致用户界面元素错位,再加上界面的整体复杂性,很容易出现设计错误。他们可以使用 UI Toolkit 调试器快速轻松地识别和解决这些问题。

UI Toolkit 会显示一个窗口,其中包含用户界面层次结构的实时视图。Mechanistry 可以选择层次结构中的任何元素来检查属性和状态并检查界面错误。“这使我们能够实时检查和调试用户界面元素,” Pawe说。

Timberborn UI 中带有图标的下拉列表
自定义工具包

UI Toolkit 的灵活性允许 Mechanistry 根据自己的需求进行调整。帕韦尔说:“我们有自己的系统,可以将图像和图标添加到下拉菜单中。”“我们还有自己的工具提示和本地化控件。我们只需在 UXML 中添加一个属性,这样我们就可以自动本地化控件。”

例如,该团队有一个控件,该控件使用标签以相应的语言显示本地化的 Sprite。他们构建了一个显示面板堆叠方式的视图,使他们能够轻松地操控用户界面控件位置,同时跟踪屏幕上可见的内容,此外还创建了一个用于显示背景、按钮、标签等的 9 切片。

Timberborn 的巨大 IT 殖民地
从几天到几小时

有了 UI Toolkit,Mechanistry 的设计过程更加简洁明了,而且他们可以更快地添加润色。帕维尔解释说:“这需要大量的摆弄和改变,这可能需要数周的时间。”“现在,这个过程最多需要几天,一周的时间。等待艺术家的资产也是如此。天数减少到几小时。”

采用Unity UI Toolkit极大地改变了Mechanistry的用户界面流程,加速了 Timberbor n向备受期待的1.0版本的发展。

“在uGui中,创建工作原型需要一天、两天、三天,具体取决于复杂程度。有了 UI Toolkit,我们可以在短短几个小时内得到一个可运行的原型。”
PAWEŁ DUDA / MECHANISTRYProgrammer
“在抢先体验的现实中开发游戏需要可扩展、模块化和简洁的架构。Unity 的用户界面工具包完全符合这些原则,使得使用不断变化的界面变得更加容易。”
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
“自从我们切换到 UI Toolkit 以来,估算任务变得更加简单。我们的团队效率得到了提高,因为他们使用的工具易于理解,现在不必与合并冲突作斗争。”
EWA STILLER / MECHANISTRYSenior Producer
海狸手里拿着木头走过桥
构建高性能的用户界面

使用 UI Toolkit 创作并集成运行时用户界面。自定义您的编辑器以改善协作,并利用高效的调试来提高性能——所有这些都是受网络技术启发的直观体验,可帮助您更快地创建用户界面。