美式卡通+西部片+暗黑幻想风格，《诡野西部》如何在动效表现上将这些元素完美融合？

《诡野西部》（Weird West）是一款沉浸式模拟世界游戏（模拟沙盒游戏）。官方称其为“重构现实的暗黑幻想史诗”，这是由WolfEye Studios开发并由Devolver Digital发行的动作角色扮演游戏。该游戏于2022 年 3 月 31 日在 Windows、 PlayStation 4和Xbox One上发布。它的开发团队曾共同创作了《耻辱》(Dishonored)与《掠食》(Prey)两款知名游戏。

本作的视觉风格与《羞辱》系列有很大的相似之处，界面设计与动效设计都属一脉相承。游戏特点主要在于玩家的选择会造成独一无二的剧情体验，“每走一步，玩家都面临着极为严重的后果，不可挽回——其中也包括死亡”。

本作设定上的“暗黑”、“西部”等元素，在实际的画面效果上得到了严谨的体现。我们看到的是一种结合了《暗黑地牢》中纯黑暗面构图形式、《黑帝斯》（谈到它的文章点这里回顾）中美式漫画勾线特点和《羞辱》系列注重界面材质体现特点的糅合。

上图为《黑帝斯》中的“净化池”界面入场动效。可以看到它的界面风格为贴合游戏美术的典型美漫勾线风格。

上图是《羞辱2》“教程列表”界面入场。可以看到它的界面设计特征是充满了材质笔刷的“杂乱”效果，同时又有结构式的动效设计。

设计血统上的继承，导致这款游戏的界面设计上有很多《羞辱》界面设计特征，与《死亡循环》（这是一款次世代第一人称射击游戏，由屡获殊荣的Arkane里昂开发。此工作室曾打造好评如潮的《羞辱》系列。与本作一起，三者在设计上会有一定关系不足为奇）亦有诸多相似之处。三者都喜欢整齐与杂质组合的笔刷描绘细节，图形造型习惯类似。但与两者相比，本作比前者多了一层昏暗和杂质特征，比后者相对简约的设计形式则更加厚重一些，色彩偏向则各自根据设定有所不同。

上图，《羞辱2》中主菜单的切换效果。该游戏界面的诸多设计特征与本作极为相似：界面上材质描绘的风格，动效上对结构的拆解设计。

上图，《死亡循环》的“存活结算”界面效果，这个界面可以代表整个这款游戏界面和动效的设计特点：有材质和笔刷的痕迹，但都制造了比较平整的图形边缘，同时有着比较收敛的动效，但依然有结构化动效设计的基底。

上图，在本作类似布局结构的界面“武器轮盘”中，能看到类似的特点。但显然在界面的美术层面有比较大的倾向性差异。

本作画面上的诸多美漫勾边贴图以及渲染形式，都告诉我们，这其实仍然是一款美漫风格的的游戏作品。如果《羞辱》的设计风格是蒸汽朋克的做旧式美漫，《死亡循环》是一种上世纪60年代复古科技美漫，那么本作就是一种暗黑化的西部片美漫。

片头画面中的笔刷纹理与暗面全黑设计，加上一些网点纹理，甚至让游戏有一种版画风格，史诗感甚足，唯一缺点是某些细节动画还是略显粗糙：

虽然是一种垂直的变种，杂糅了多重元素，但它的设定依然极为清晰，界面与动效都在《羞辱》的水平上有明显的演进关系。

本作界面动效的特征非常明显，以笔刷效果和结构动画为主要特征元素。

 

残破的笔刷效果存在于本作的大部分界面中。

 

这种形同毛笔字效果的墨迹笔刷所体现的特性非常有用：

 

一方面显得沧桑感十足，更能衬托出游戏世界想要表现的“西部旷野”的感觉；

 

另一方面，这种笔刷本身带有笔画方向，看起来就像是从特定方向上“划拉”或者“涂写”出来的，让相关的效果更加有力道。相信这也是界面中将这种元素作为关键图形，动效中将这种元素动画化的一个主要原因。

 

同一设计血统的《羞辱2》中其实也出现了大量以材质描绘为目的的笔刷痕迹，只是这些痕迹没有被动画化，大部分情况下只作为解构动画的形式出现：

本作中，这类动态元素则大量存在。通常有以下几种形式：

1. 作为主体烘托元素。

 

这种情况下，动态笔刷元素多出现于重要的界面功能点位上，如下图所示的结算类界面：

和游戏暂停菜单：

以及剧情开端界面：

2. 选中态变化细节中。

 

选中态是游戏中仅次于重点点位的关键位置。起到给玩家游戏关键印象的作用。我们可以注意到，在这些位置上，都使用了类似上一类设计中出现的色调，并且全都辅以同一方向的笔刷动画：


在一些情况下还会出现前两类的结合，如下图的游戏开始菜单：

3. 转场时的黑幕背景。

 

这种动态笔刷元素非常适合表现“刷新”含义，毕竟它本身就有“刷”的动态属性。于是我们在本作里看到很多刷来刷去的转场动画：

 

根据颜色和细节的不同，大致分成两个层级，一种是如下图所示的普通转场：

另一种就是下图所示的红色特殊转场，这种色调和笔刷形状让它看起来就比较“重”：

4. 通用型的底框构成动画。

严格来说这属于本篇所说的结构动画的一部分。不过底框这种通用型元素也是关键图形元素最好的展现舞台，所以我们将这类动效划分在此处。从下几图可以看到，设计师将这类底框的入场形式与关键元素做了结合，另外配合底框上层的信息类元素，共同构成了一个结构动画，整体上感觉非常细腻。

下图中的对话列表衬底，不易被观察到，但依然有动态笔刷效果：

5. 在结构动画内部，作为衬底动画。

 

动态笔刷元素几乎一直以衬底的形式出现，在复杂控件内部依然如此。所以这类动态元素也同时被带到了这类控件的相关动效中：

在强提示类控件的衬底动画中也是如此：

 

除了这种显而易见的强提示类控件，还在比较通用型的控件，如下图所示的loading入场中出现，构成刷新的感觉：

类似的感受还被运用在比较重要的选择节点上，如重要剧情场景内：

这种剧情转场中，画面上下边缘有出现类似重要转场时的橙红色笔刷效果，并且最终留下两条黑边做持续动画（如下图）。这样的设计使得各种设计元素得以维持统一，视觉印象得到增强。

相对于《羞辱》系列，结构式动画在本作中，表现出很多不同。《羞辱》中确实也有不少结构动画，但因为动作设计的特性，表现出闪切和生硬的视觉感受，比较典型的是下图《羞辱2》中出现的“地点”控件：

本作中则有更细腻的体现，比如两个控件之间的直接连接关系展示：

和一些典型的结构动画做法，如元素间延迟设计：

以及“生长式”动画：

大体上，两款游戏的结构动画中所用的动态曲线是相似的，但是由于本作中增加了一些不同的表现形式，再加上视觉层面的差异，导致整体的观感大为不同。

 

其他细节：

除了这些贯通关键元素和设计手法之处，本作还有些其他的设计细节，比如下图所示，一些剧情转场中文字入场色彩的变化，并非普通的透明度变化，而是一种偏色变化，这仿佛在模仿某种老西部片的字幕风格。

局内界面里的一些控件动态变化，显然是模仿左轮枪的弹匣动作：旋转，卡顿：

还有其他的细节，不再一一赘述。

总的来看，本作界面设计特征非常明确，有着一以贯之的笔刷痕迹表现手法和成熟的视觉表现力。

 

以此为基础，在动态设计层面上没有刻板遵循老路，而是根据实际设定，寻找了一种比较新的表现手法。巧妙利用笔刷这一关键元素，结合精美的界面设计，恰如其分的表达了本作的整体氛围感受。