分类
UI 游戏设计

游戏中过渡动画切换的常见形式

过渡动画指的是,当游戏中的某个东西(可能是UI控件,也可能是游戏世界中的物体)从一个状态变化为另一个状态时,是需要过渡的,比如一个人从静止到跑动,需要一个迈出步子的动画,才能顺利地从走的状态过渡到跑的状态;或者比如一个按钮,从一般状态到被点下,如果这是一个需要做的十分华丽的按钮,按钮也会有一个从一般状态到被点下过渡的动画。理论上来说,一个制作精良的写实风格的游戏,绝大多数状态的迁移都是需要过渡的,只有某些不需要过渡的地方才会特殊处理,状态过渡应该是一个常态,因为这符合玩家对世界的认知,能够让物体看起来很真实。

然而,这个过程的加入却使得状态迁移变的更为复杂。比如说,玩家控制他的角色从静止开始跑动,这时人物开始播放“迈出步子”的过渡动画,而在这时玩家如果命令角色停止移动,角色的动画应该如何处理?本文就是来讨论几种常见的处理状态过渡切换的方式的。

过渡动画本身是否应该当做一个状态处理,要和程序员进行商量,一同进行设计。

1,有始有终

有始有终的处理方式就是,一旦开始进入过渡动画,任何事情都无法阻止这个物体完成其状态的过渡,这个物体不接受玩家下达的任何指令,或者玩家下达的指令等到过渡动画完成后才会被执行。

游戏中场景的切换经常会用到这种方式,比如玩家从一个全屏窗口进入到了另外一个全屏窗口,新的全屏窗口在播放登场的过渡动画时候,窗体内的所有控件都不会响应玩家的操作,直到过渡动画播放完成。《炉石传说》中从主菜单进入任何一个模式采用的就是这种做法,即便玩家能眼疾手快地在模式弹出动画尚未完成前就点击到由于过渡动画而运动中的按钮,按钮也不会响应玩家的操作。玩家把鼠标悬停在法力水晶上时,水晶会亮起,移开时水晶会变暗,这两个状态过渡也是这一种类型的,不会由于玩家频繁地将鼠标移入移出而乱闪。由于法力水晶是无法进行交互的对象,因此这种处理方式也没有问题。

格斗游戏中人物的状态迁移也会给人以有始有终的感觉,即玩家一旦执行了某个动作,在这个动作执行完毕或被打断之前,角色处于失控状态,不会接受玩家下达的任何指令。不过这种做法不适合绝大多数游戏中的角色状态迁移,因为这会让角色变得相当难以操作。

2,有来有回

当物体由状态A迁移至状态B,在播放过渡动画时,又要从状态B迁移回状态A,有一种很适合的做法是直接停止当前过渡动画,并且反向播放,倒退回状态A。它保证了物体运动的连续性,在过渡动画的任何时刻玩家下达指令,物体都能流畅地倒退回原本的状态。

这种做法非常适合只有两个状态进行来回迁移的物体,比如一个浮出窗口的打开和关闭,一个按钮的亮起和暗掉等等。

3,立刻完成

立刻完成指的是,如果在过渡动画的状态下玩家下达了其他指令,那么就立刻完成过渡动画的播放,从过渡动画播放完成的状态开始执行玩家的指令。这种做法适合于某些情况下的多种状态迁移,由状态A迁移至B,然后又迁移至C。

比如,玩家将鼠标悬停至某个按钮上时,按钮在播放从一般状态到悬停状态的过渡动画,而此时玩家如果点击了按钮,就立刻完成过渡动画,从悬停状态开始播放按下按钮的过渡动画。

但是这种做法会使动作的连续性遭到破坏,因此不适用于持续时间较长的过渡动画。

4,加速完成

加速完成指的是当某个物体处于由状态A至状态B的过渡动画过程中,玩家又下令让物体迁移至状态C时,则加速完成过渡动画A至B,并且加速后的过渡动画处于“有始有终”的状态,在播放完成后立刻执行迁移至状态C的指令。考虑到人类的反应速度,如果加速后的过渡动画在0.1秒内完成,指令延迟还是在可接受的范围内的,但这0.1秒的加速过渡动画,有和没有在体验上却是天壤之别。我们用指令的轻微延迟为代价,换取了状态切换的连续性。

比如,玩家的角色一开始坐在地上(状态A),玩家命令其站起(状态B),这时开始播放站起来的过渡动画(A至B),此时玩家又命令角色移动(状态C),站起来的过渡动画(A至B)被加速到0.1秒内完成,即角色更快速地站了起来,站起来后角色开始播放由站立到移动状态的过渡动画(B至C)。

如果在站起来的0.1秒内(加速的A至B)玩家又下达了跳的指令(状态D),假如我们采用“有始有终”的做法,那么这个指令要等待0.1秒的过渡动画(加速的A至B)完成后,才开始,即播放由站起来到跳起的过渡动画(B至D)——也就是说,玩家原本的由站立到跑动(B至C)的指令被覆盖了,替换成了由站立到跳起(B至D)。更进一步,假如在这0.1秒内玩家下达了无数个导致状态迁移的指令,除了最后一个以外的指令全部都会被覆盖,最终只执行最后下达的指令,并开始播放过渡动画。

另一个做法是,加速后的动画再次接受指令时,不用“有始有终”的做法,而用“立刻完成”的做法。

接着用刚才的例子,如果玩家的角色在站起来的0.1秒内(加速的A至B),玩家又下大了跳的指令(状态D),那么由坐到站的动画(加速的A至B)会立刻结束,开始播放由跑至跳的动画(C至D)。这体验很怪,因为玩家会发现自己的角色还没有完全站起来,却突然开始播放由跑进入跳的状态了。

这种做法牺牲了一定的连续性,而最大程度上保证了玩家操作的即时性,在对即时计算要求较高的游戏如动作游戏中,这种做法更适合,而如果是RPG则第一种做法更合适。我猜测《魔兽世界》就是采用的第一种做法,虽然我并不知道他们的角色状态是如何控制的。而采用第二种做法的游戏并不常见,因为这种做法比较麻烦,注重即时操作的游戏往往都只采用“有始有终”或“立刻完成”的做法了,要么就得动画全播完,要么就是播到一半就能强制转换状态(比如《拳皇》的SUPER CANCEL机制),很少采用“加速完成”与“立刻完成”相混搭的做法。

分类
转载 UI 游戏设计

[转载]游戏UI探索:玩家想要啥

本文转载自游戏邦,我对其有一些注释和订正(红字部分)。原文地址在这里

作者:Marcus Andrews

原标题:Game UI Discoveries: What Players Want

游戏邦标题:保留功能性应是游戏UI设计首要考虑因素

传统的HUD设置是尽量保持UI透明度,让玩家可以充分地沉浸到游戏中。EA DICE已经在该领域勇敢地迈出自己的步伐,但是这是种充满风险和艰难的尝试,几乎无法获得100%的成功。可见UI这个领域仍然存在较大改进空间。

如果要向他人描述“将界面放入游戏世界”的真正含义,最简单的说法即“就像《孤岛惊魂2》的做法一样”,但究竟什么才是真正的设计方法?如何利用这些方法?在下文中,你可以看到许多游戏的UI设计分析,以及我最后的总结。

术语

要理解这篇文章的内容,你需要熟悉几个术语。

terminology(from gamasutra)

图片中上方的疑问是:UI的表现是否在3D游戏中有视觉呈现?左面的疑问是:UI的表现是否存在于虚拟的游戏世界中?

  • (左上)非3D呈现,且不存在于游戏世界中时,为非叙事表现(Non-Diegetic Representations)。游戏世界之外的界面,只能被现实世界的玩家看到和听到。示例:多数经典的仰视显示器(游戏邦注:下文简称“HUD”)元素。
  • (右上)非3D呈现,但存在于游戏世界中时,为立体空间表现(Spatial Representations)。呈现在游戏3D空间中的UI元素,包括叙事和非叙事两类。《求生之路》中的角色轮廓便是非叙事立体空间UI的实例。
  • (左下)是3D呈现,且不存在于游戏世界中时,为亚呈现表现(Meta Representations)。亚呈现指的是可以存在于游戏世界中,但不一定能引发玩家形象化空间感的呈现内容。最明显的例子是屏幕上的喷溅效果,比如用喷溅到镜头上的血液来呈现伤害。
  • (右下)是3D呈现,且存在于由世界中时,为叙事表现(Diegetic Representations)。包含在游戏世界中的界面,可以被游戏角色看到和听到。示例:《死亡空间》中的全息界面。

游戏分析

孤岛惊魂2

《孤岛惊魂2》(游戏邦注:2008年由Ubisoft发行)是在界面叙事化取得极大进展的游戏实例,而且还是款FPS游戏。《孤岛惊魂2》中使用的主要叙事化方法是让游戏内置小器具与HUD界面产生联系,包括地图功能、时间和武器状况。

孤岛惊魂2(from gamasutra)

以上是叙事化界面元素的范例。它通过手表来呈现时间,游戏中的导航通过GPS和实体地图来完成。需注意的是,即便地图在游戏世界中实物化呈现,上面的图标和指示器的移动和行为却是以游戏玩法为基础。

优点

新颖的元素

从视觉效果上来看,看到英雄从自己的手臂中挖出子弹头和查看手中的指南针确实很酷。Ubisoft在预发布营销中展示叙事化界面的方法也是个新颖的因素。这就是卖点,就是该游戏能够与其他FPS游戏竞争的实例。

与其他角色互动

不过,与其他角色互动比你自己同游戏角色互动的效果更好,因为这可以让你看到其他角色正在做的事情。当你受伤的时候有个友好的角色前来相救,感觉就更棒了,这便是沉浸效果的实例。

缺点

在界面的时候上,《孤岛惊魂2》中似乎存在冲突,因为游戏中也有个传统的非叙事HUD来展示弹药、互动机会和生命值等内容,与其叙事界面相结合。这个HUD显得非常传统和非叙事化。

不受玩家控制的非叙事元素淡入和淡出使其干扰性达到最小化,当然,这样做的结果是玩家完全无法对其进行控制。以下屏幕截取自该游戏,展示了游戏过程中非叙事HUD元素的展示方式。

非叙事HUD(from gamasutra)

《孤岛惊魂2》所呈现的问题是,FPS游戏中极为缺乏用来承载界面的屏幕实用面积。镜头无法支持以叙事化方式呈现某些东西,尤其是在现实主义科幻题材游戏中。

最终分析

从《孤岛惊魂2》这个例子上来看,制作100%叙事化界面的可玩游戏似乎是毫无希望的,尤其是在FPS领域。因而采用某些折中方法似乎是必要之举。如果叙事化界面设计是游戏开发初期的目标而不是硬性的成品需求,那么这种折中方案会取得显著成效。如果你正在增添非叙事化UI以支持叙事化解决方案,或许得重新下考虑整个解决方案。

死亡空间

《死亡空间》(游戏邦注:2008年由EA发行)是最新的全叙事化界面实例。与多数游戏相比,《死亡空间》有个明确的方向:所有的界面元素都应当“位于游戏世界中”。

游戏界面使用的是经过大量变动修改的传统HUD系统:它像全息图一样被嵌入到游戏中,在这种文本式的叙事化解决方案中,界面存在于游戏世界中,在理论上可以为游戏角色所见。这里的UI可以解释为由角色的太空服产生的全息图。这种方式可以运用到几乎所有界面上,只要它是全息的。

死亡空间(from gamasutra)

除了全息界面外,《死亡空间》还将界面绘制在玩家虚拟形象的实体上,这种解决方案很适合叙事化第三人称游戏。

健康值显示在角色身体上(from gamasutra)

定位器(from gamasutra)

上图中的定位器可指向玩家需前行的路径,据该游戏执行制作人Glen Schofield所称,它可以在全息3D地图失效时,为玩家提供导航功能。

优点

场景

《死亡空间》利用其科幻场景来让界面显得叙事化。从原则上来说,它可以被解释为“以非典型的方式呈现典型UI”。

视角

使用玩家化身作为画布,在其上绘制UI元素,比如生命值和静止状态,这是种改善沉浸性的绝妙方法,但似乎这种方法对场景和第三人称镜头有很大的依赖性。

保留功能性

《死亡空间》清晰地显示出某些叙事化界面的好处,而且这种界面依然有传统界面的功能性特点。

缺点

需提供额外方案解决功能性故障

全息化3D地图在帮助玩家导航方面失败了。这个服务玩家需求方面上的失败迫使开发团队执行补充功能,“定位器”使用的并非是与其他内容相同的叙事化方法(游戏邦注:即全息图),而是叙事化空间立体方法(这个定位器需投射于地面)。

好处

我们很难发现此类UI除了它所能提供的功能性之外,还有什么特别的好处。毫无疑问,制作全息化界面需要耗费大量的资金,因而需要谨慎考虑这个选择。

最终分析

《死亡空间》引发了以下问题:执行叙事化用户界面可获得多少好处?我们很容易想到,其实《死亡空间》中所有的界面元素都可以被视为传统HUD元素。《死亡空间》也可能因为只是将传统界面解决方案从非叙事化转变为叙事化的方法而受到批判,因为它并没有真正推动传统设计方式的发展。

我将《死亡空间》视为叙事化界面能够为游戏带来好处的价值标杆。或许叙事化界面可以产生的好处要比在《死亡空间》中展现出来的更多,但是每个开发团队都需要认真权衡这种方法是否值得一试。确切地说,《死亡空间》可以说是将相当传统的界面融入到游戏故事中,并采用了叙事化的表现方式,至于这种做法的价值和取舍,这要取决于各人的看法。

军团要塞2

《军团要塞2》(游戏邦注:2007年由Valve发行)这款游戏之所以值得分析,是因为我认为它在界面这方面采用了非常直接的方式。开发者的想法似乎是“使用各种有效的方法来告知玩家信息”,因为他们的界面解决方案中采用了各种界面设计方法。

弹药、生命值和关键的游戏模式信息永久性地显示在HUD的固定位置上(游戏邦注:这属于非叙事化界面)。游戏中还有个第二层次静态“弹窗”非叙事化HUD元素会根据玩家的动作出现,比如当玩家站在控制点上或装备建造元件时。

除此之外,《军团要塞2》还使用了叙事化界面,尤其是可以在游戏中建造物体的职业——工程师。在这种情况下会显示蓝图3D全息图,以便玩家清晰地了解物体建造完工之后的模样。值得注意的是,非叙事化HUD元素会同期显示在屏幕上。

《军团要塞2》还大量地使用了“空间立体非叙事化”元素,比如玩家头上的图标和其他的标志。值得注意的是,姓名标签并非空间立体化的,而是固定显示在玩家镜头的十字准星下。

medi-gun及其随后的“uber charge”的呈现方式要更为特殊些。medi-gun中发出的彩色光束明显是叙事化,但同时也是医疗者和被医疗者间联系的空间标志。同样,“uber charge”颜色也可以被视为medi-gun发射出的叙事化效果,但也是让所有玩家知道谁正受到影响的空间标志。

军团要塞2(from gamasutra)

优点

结合各个类型的UI元素(游戏邦注:包括叙事化、非叙事化和立体空间等)确实可以在不将所有内容放入HUD的情况下提供大量的信息。

缺点

正是出于上述原因,《军团要塞2》有时看起来显得“混乱”。

最终分析

就叙事化的质量来看,《军团要塞2》很难进入排行榜,但是可以算是个很成功的游戏。《军团要塞2》展示了混合界面的强大之处,其开发团队并没有把注意力全部放在叙事化的方向上。《军团要塞2》还表明玩家更能够忍受叙事化界面中的不当之处。

魔兽世界

《魔兽世界》(游戏邦注:2004年由暴雪发行)成为了发布UI代码供第三方使用的先驱者,该游戏不仅允许玩家可以在屏幕上移动各种UI实体,而且还允许创建新的UI元素,甚至是那些默认UI所无法获得的全新数据。这种大胆之举使得暴雪开创了庞大的“插件”系统,玩家可以根据具体的目标来创建独立的UI元素。

与《军团要塞2》相似的是,《魔兽世界》所采用的方法似乎是不顾美学或叙事化质量,向玩家提供所有其想要的信息。《魔兽世界》UI的所有层面似乎有个统一的做法,经典2D非叙事化HUD与空间立体非叙事化信息相配合,比如姓名标签和生命条等。

以下是《魔兽世界》的默认界面,相当传统的非叙事化2D解决方案,同时还有空间立体非叙事化和亚元素。

《魔兽世界》默认界面(from gamasutra)

下图是《魔兽世界》中的自定义界面,许多插件提供了传统界面所无法获得的信息。

自定义UI(from gamasutra)

优点

自定义

可以自定义的界面似乎能够显著地提高玩家对传统2D HUD元素的容忍度,尽管这样可能会让屏幕显得凌乱。

帮助执行操作

从表面上看,这种看似先进的干扰性非叙事化界面如果能够帮助玩家开展任务的话,似乎也能够被玩家所接受甚至欣赏。

视角

第三人称视角使玩家可以360度旋转自己的角色,对玩家的方向感和导航有极大的帮助。

缺点

给玩家造成游戏表现的压力

玩家的沉浸感似乎并非其界面设置的重要考虑因素,它的可编辑化界面也总是被人滥用。如果你希望在游戏中更有竞争力,那么选择以默认界面来玩游戏便很难实现目标,这会让玩家产生渴求合适界面插件的压力。

最终分析

《魔兽世界》的案例值得那些高估沉浸感重要性或者沉浸形式的开发者深思。《魔兽世界》是款很棒的角色扮演游戏,它其实并不适合采用复杂或者数据量过于庞大的非叙事化界面元素,但玩家似乎仍然更喜欢这种界面,而不是更为简洁的默认界面。

我们很难理清其中的因果关系,但在《魔兽世界》中,如果可以做出选择,玩家总是想要获得更多的信息和UI来帮助自己在游戏中获得优势。

《魔兽世界》的成功发出了一个强烈的信号,那就是沉浸感不总是用户的最主要兴趣。或许他们只是想要在游戏中表现出自己的实力。

结论

正如我在《孤岛惊魂2》的分析中提到的那样,在今天充满竞争的市场中,为让游戏具有可玩性,融入非叙事化界面元素似乎仍然是必要之举。但是从我对《军团要塞2》的分析中可以看出,如果不采用这种做法似乎也并无不妥。

我的结论是,无论界面的外观和功能如何,所有游戏都必须满足的基本规则是:保留功能性以及信息传输。

玩家以两种形态存在于你的游戏中:化身和有机体。当然,化身存在于屏幕上。那么,有机体就是玩家在通过平面进入游戏世界后剩下的东西,也就是对游戏功能的感知,并将其转化成游戏 的能力。

在自然中不存在“化身”这种东西,人体是有机体的呈现方式。但是在游戏中,这二者之间存在内在差异,因为开发者具体地刻画出有机体的游戏化身。游戏可能会指定英雄是星际战士。于是,设计用户界面就变成了挑战。我们可以将其称为“有机体界面”,这种界面的目标是让玩家完全地感受到自己就是星际战士。

想象下相反的情况:“化身”脱离了玩家的感知,而你作为开发者需要面临的挑战是让玩家仅仅基于他们在玩游戏时的感觉,就能够把自己描述成为“星际战士”。这里可能出现一种风险,那就是玩家会将自己描述成为一个拿着机关枪的移动盒子。

shooter organism(from gamaustra)

进入游戏世界

当玩家穿过现实和游戏之间的平面时,他就成为了有机体。UI就是这个平面。以肢体修复手术为例,有个人失去了自己的右臂,医生给他装上了假肢。在这里例子中,假肢就是界面,界面越好,能够保留的右手功能就越多。你可以说,这个人让自己的右臂通过了平面。

现在想象下,假如假肢设计师决定保留功能的重要性不如覆盖在机械上的橡胶皮肤的真实性。那么,这名患者可能会得到看起来更逼真的手臂,但是其所得的功能性较少。因为UI可以被视为虚拟的假肢,因而保留功能性才是你的主要目标!

无论你的整体UI方向如何,只有在有机体能够在游戏世界中有效运转的前提下才能够去追求沉浸感。目前还没有哪个可行的策略能够不顾及这个重要层面。

设计有机体界面

1、看看你的主要化身,也就是游戏中的“英雄”,描述成为英雄会产生的感觉

范例:自信、无畏、有很好的意识

2、列举出你认为必须呈现在UI中的功能(游戏邦注:先不用考虑最终的执行方式)

范例:准星、生命值、弹药、小地图、武器库、目标定位器

3、开始设计初始界面

通过不同的界面方法来呈现上述列举的东西,比如叙事化和HUD等

4、检查你的初始设计,然后提出问题:“这个UI是否能够让我了解到所需的信息,我是否能够产生英雄的感觉?”

5、重复进行UI设计,直到上述问题的回答是肯定的。

记住,UI有多种形式,包括音频、动画、HUD和效果等,混合使用这些内容。

在最后的步骤中,你可以在设计界面解决方案时同时考虑化身和有机体这两个因素,让玩家感觉自己就是游戏中的一部分。

游戏邦注:本文发稿于2010年2月23日,所涉时间、事件和数据均以此为准。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦)