Timberborn 复杂的运行时 UI 是如何构建的

Mechanistry 切换到 UI Toolkit,为其基于海狸的城市建设者精心设计了一个复杂的用户界面,从而节省了大量生产时间。
通过我们的免费实践指南了解 Unity 中的用户界面设计和实现。下载电子书
简化UI开发
一个资源有限的小团队如何创建复杂的城市建设者 UI?当《Timberborn》在 Steam 上成为抢先体验的热门游戏时,Mechanistry 需要为快速增长的玩家群快速迭代直观的 UI。通过从 uGUI 切换到 UI Toolkit,他们能够通过更简洁且易于维护的代码加快制作。
挑战
用一致的元素制作可扩展、美观、高性能的UI
平台
PC、MacOS
团队成员
13
所在地
分布式(波兰)

选择 Unity
Mechanistry 具有软件开发背景,非常重视干净的代码、敏捷的工作流程和出色的用户体验。因此他们选择了Unity来制作《Timberborn》。“这是明智的选择,”程序员 Paweł Duda 说。“有很多网络资源。学习曲线并不陡峭。我们的团队也很熟悉C#。”

结果
• 加快 UI 原型设计和实现,现在需要数小时而不是数天
• 每周从几起合并冲突减少到零
• 在 Steam 上获得近 18,000 条评论的“压倒性好评”

突破uGUI的极限
在早期开发阶段,游戏机制就使用了uGUI,但随着《Timberborn》越来越复杂,出现了很多问题。调整图标会破坏布局、重用素材资源具有挑战性,并且由于代码不可读,每周都会发生多次合并冲突。“如果两个人使用同一个预制件,这通常是一个问题,”Paweł说。“有些冲突是自动解决的。但如果没有,我们只能手动重新创建预制件。”
在看到UI Toolkit路线图后,Mechanistry决定迁移到新系统。他们希望坚持使用Unity制作的解决方案,并注意到UI Toolkit从网络技术获得灵感,因此他们相信其团队的过渡将是顺利的。

转向UI Toolkit
该团队在几个月内采取了务实的广告活动迁移方法。首先,他们清理了 UI 代码架构并去除了代码气味。然后,他们使用 UI Toolkit 重新制作了所有 UI 元素,并重新设计了素材资源来获得他们想要的外观。
Paweł解释说:“切换到UI Toolkit改变了传统格局。“以前,我们不太愿意制作精美的UI,因为我们知道这会是个大问题。现在,我们为游戏添加了 UI 缩放和隐藏菜单等功能,这比使用 uGUI 要容易得多。”

解决合并冲突
Mechanistry 指出,迁移到 UI Toolkit 后,实际上消除了合并冲突,这些冲突是工作室工作缓慢的主要原因。Paweł 说:“如果冲突出现,我们能够立即发现并知道如何解决冲突。”“每个人都可以同时使用UI,即使是同一个元素,这不是个问题。”
UI Toolkit还能将游戏逻辑与UI逻辑分开,进一步减少冲突。现在,团队可以独立迭代UI的不同部分,单独测试组件,从而减少中断构建。“这对我们来说非常非常重要,”Paweł补充说,

实时调试
Timberborn 可扩展的自适应 UI 目前支持 12 种语言。切换UI元素会导致UI元素错位,再加上界面的整体复杂性,很容易出现设计错误。他们可以使用 UI Toolkit 调试器快速轻松地识别和解决这些问题。
UI Toolkit窗口会实时显示UI的层级结构。机制可以选择层级结构中的任何元素来检查属性和状态并检查UI错误。Paweł 说:“这让我们可以实时检查和调试 UI 元素。”

自定义工具包
UI Toolkit的灵活性让Mechanistry可以根据需求进行调整。“我们有自己的系统,可以将图像和图标添加到下拉菜单中,”Paweł说。“我们有自己的工具提示和本地化控件。我们只需要在UXML中加入一个属性,就可以自动本地化控件。”
例如,团队有一个自定义广告标签对接显示相应语言本地化精灵的控件。他们构建了一个显示面板堆叠方式的视图,以便轻松操作 UI 控制位置,同时跟踪屏幕上可见的内容,并为背景、按钮、标签等添加了一个 9 切片。

从数天缩短到数小时
有了UI Toolkit,Mechanistry的设计流程会更简洁、更直接,打磨起来也会更快。Paweł 解释道:“这需要大量的处理和更改,这可能需要数周的时间。”"现在,这个过程需要数天时间,最多一周。 等待美术师提供素材资源也是如此。将时间缩短到数小时。”
采用Unity UI Toolkit大大改变了Mechanistry的UI管线,加快了Timberborn的开发速度,因为他们正在转向备受期待的1.0版本。
““在 uGUI 中,视复杂程度不同,创建工作原型需要一、二、三天时间。有了 UI Toolkit,我们可以在数小时内完成工作原型。””
Paweł Duda - Mechanistry
Programmer使用 UI Toolkit 创作和集成运行时 UI。自定义编辑器以改善协作,并利用高效的调试来获得更好的性能 - 所有这些都是在受 Web 技术启发的直观体验中实现的,可帮助您更快地创建 UI。