UI 是游戏底层系统的有组织的可视化表示形式。这里有一个简单的实现方法，可以在支持既定艺术方向的同时快速实现。
作者：Gregory Lobanov
文章来源：https://www.gamedeveloper.com/art/deep-dive-developing-a-clear-and-consistent-visual-language-in-the-ui-of-beastieball
文章类型：原文转载
图片来自 Klei Publishing
在我担任游戏总监期间，我创造了一些以大胆风格和创意UI而闻名的独立宠儿，包括Chicory：A Colorful Tale、Wandersong 和即将上线的Beastieball。 我在非常小的团队中工作，并为我的游戏自己做所有的用户界面。这是我非常喜欢的东西，我制定了一些基本的原则来处理我想分享的事情。这些技术跨越了视觉设计和技术之间的界限，因为这是我的技能，它们主要是为了尽快创造出可以接受的东西。如果你专注于 UI/UX，你甚至可能会被我的低俗方法冒犯！但我希望你能原谅我，我们仍然是朋友。
¶ 一个巧妙的技巧
当我考虑一个新项目时，艺术指导是我首先建立的事情之一，艺术指导自然也会指导UI的外观。一旦我对游戏的外观有了大致的了解，我通常会编写一些辅助函数/着色器，以使某些效果或形状尽可能容易地放在任何地方。然后，在那之后的几年里，我在任何地方都使用这些小助手功能……所有时间……用于所有事情。
这就是全部技巧，但我们可以在Beastieball的练习中查看它。
¶ Beastieball 中的平行四边形和图案
在 Beastieball UI 中，关键主题是所有平行四边形，因为它们是最运动的形状。（我认为 ESPN 是这样做的）。该游戏是一款具有大量UI、数字和列表的角色扮演游戏，因此这种基本样式效果很好，因为它几乎不是您可以做的最无聊、最简单的布局样式的变体，即也就是将文本放入矩形中。轻微的倾斜，以及以一定角度而不是垂直上下排列事物，使游戏感觉更加时尚。在商业领域，这就是我们所说的“艺术指导”。
图片来自 Greg Lobanov/Klei Publishing
另一个主要的重复视觉主题是循环的形状图案（点、线、菱形），它们在环境下滚动。图片和说明来自 Greg Lobanov/Klei Publishing
所有这些都由非常简单的单行函数支持，我在任何地方都无脑地使用这些函数。
draw_pgram（x1，y1，x2，y2） 是我写的第一篇。它只是在指定的边界内绘制一个平行四边形。倾斜的角度由一个通用的宏观全局数字决定，我基本上从未改变过这个数字。
shader_set_scrollpattern（graphicAsset，color） 是另一个选项。我创建了一个着色器，它将接收一个输入纹理（如滚动点图案）并将其覆盖在之后渲染的任何内容上，纹理位置会随着时间的推移缓慢滚动。例如，如果我将此着色器设置为使用点图案和黄色，然后渲染一个粉红色的平行四边形，结果将是一个粉红色的平行四边形上面有滚动的黄色点。
差不多就是这样。Beastieball 的整个UI风格是建立在像这样的基本单行函数之上的。一些巧妙之处在于应用程序的一致性；通过对所有内容使用这些视觉主题，我有时会在传达我需要的信息时遇到问题。但我坚持不懈，让一切都正常进行，从未打破我设定的界限。作为开发者，这可以看作是一种懒惰，但对于玩家来说，我认为效果也是游戏具有非常清晰和一致的视觉风格之一。
¶ 懒惰补间
我得把这个问题归功于我的大学教授杰维斯·汤普森（Jervis Thompson）。我每天都会用很多次，有时我会忘记它可能不是大家都知道的。它基本上是一种愚蠢的方法，让东西以一种令人愉悦的方式在屏幕上移动，使用尽可能少的代码行和状态。就是这样：
Position += (TargetPosition - Position) * Speed;
其中 Position 是UI元素的当前位置（这也可以是其角度、缩放、不透明度或任何变量）。
TargetPosition 是该元素的预期最终静止位置。
Speed 是大于 0 且低于 1 的值。我最喜欢的速度值是 0.3，但也许你会找到你更喜欢的自己的值！
图片来自 Greg Lobanov/Klei Publishing。
这种简单的代码是游戏中大量微小UI动画的驱动因素，例如当你打开和关闭菜单时动画元素的比例和位置。在任何地方添加它真的很容易，而且它总是让事情看起来更好，所以如果你像我和 Jervis 一样是一个彻头彻尾的黑客（深情的），那么养成这个好习惯。
¶ 索引调色板
我尽可能在任何地方使用这种技术，而不仅仅是在UI中。但是，基本上：我定义了一个小的颜色列表，然后每个 UI 元素通过索引引用这些预定义颜色之一来获取其颜色（即颜色 1、颜色 2、颜色 3......）我这样做不是为每个资源定义颜色，也不是使用已经带有颜色的导入图像资源，而是因为它可以非常轻松地随时调整颜色，还可以确保每个视觉元素都是和谐的。
我还可以轻松地交换颜色列表，以便为玩家创建适用于所有菜单的视觉主题选项。图片和说明来自 Greg Lobanov/Klei Publishing
¶ UI 应支持核心游戏玩法
这是我对UI设计变得更加烦恼和哲学的部分，就像我是某种圣人一样。
我认为认识到UI是玩家了解游戏灵魂的窗口非常重要。你选择向他们展示和不展示的东西，完全定义了他们对你世界的理解。因此，请小心过度使用或未充分利用UI……想想你希望玩家的注意力在哪里，以及你希望他们去哪里寻找某些信息。度渲染UI的一个经典例子是，游戏中的地图比游戏世界本身更容易导航，导致玩家纯粹通过UI导航，忽略所有令人惊叹的环境等。
图片来自 Greg Lobanov/Klei Publishing
我将分享一个具体的例子，在我看来，我避免了UI的过度使用。在 Wandersong 中，有一个部分包含一堆不同的岛屿，你可以访问，每个岛屿都包含一个更大的谜题/任务的一部分，所以玩家必须在它们之间导航。一般来说，游戏是一个侧滚游戏，我最初在岛屿上导航的计划是添加某种快速菜单，让玩家在它们之间快速旅行。
但是当需要实施时，对于像 Wandersong 这样的顶级冒险来说，菜单的想法似乎非常无聊。我最终添加了一个与游戏中其他任何内容都不同的特殊屏幕，您可以在其中使用歌声来驾驶海盗船。
它有一张岛屿地图，你可以通过按一下按钮快速调出它，但是你在看地图时不能移动，所以你需要规划一条路线，然后唱歌去那里（此外，我们在角色的拇指下隐藏了一个秘密的奖励岛）。虽然它会增加很多额外的导览时间，但这仍然是游戏中最受欢迎的部分之一，玩家经常对此发表评论，我认为部分原因是这样的设计打破了预期。
这里的教训并不是所有快速导航菜单都应该被音乐海盗船取代，而是值得花额外的时间来考虑你对游戏元素的处理方式，并有意识地使用不同的界面。快速导航菜单很方便，但它也邀请玩家以更实用的方式看待您的世界，并带走了将自己从 A点移动到B点的简单乐趣。它非常适合很多游戏，但可能不是全部。
¶ 核心游戏支持 UI
好的，从这里开始，我要说的是最后一点。
你知道我是如何认为 UI 是玩家通往游戏灵魂的窗口吗？它是一种对混乱、黑暗的内心世界有组织地视觉表现。当您的游戏出现问题时，有时这些问题会首先出现在 UI 中。因此，以支持 UI 的方式实际设计游戏的底层系统可能会很有帮助 ！
这是一个在Into the Breach的设计事后分析中非常明确的想法，我认为所有设计师都可以从中学习。
我会说，在设计 Beastieball 时，这种情况一直以一百万种微小的方式出现，我相信任何从事过战术或 RPG 风格游戏的设计师都能产生共鸣。为了提高UI的清晰度，我们对设计施加了各种限制，例如一个动作可以应用多少状态效果。有时候，我们会有一个关于新玩法或新 Beastie 游戏机制的好主意，但在规划阶段就被抛弃了，因为我们意识到根本没有简单的方法可以向玩家解释它。但是我不认为这会损害游戏设计的质量......我们的想法太复杂而无法通过 UI 进行交流，这意味着它们本质上是令人困惑的！UI 始终是我们实现这一目标的第一条线索。
在许多方面，UI 的设计也是游戏设计。即使在将这些划分为不同角色的大型团队中，我也建议团队促进良好的沟通，并让 UI 设计师在更广泛的设计决策中拥有发言权。
感谢您的阅读，我希望您能制作一些超棒的电子游戏！