Scroll Back:2D 横版游戏摄像机运镜原理与实践

作者:indienova
2016-10-09
120 247 27

说明

本文翻译自此处,原作者 Itay Keren 是 Mushroom 11 的开发者,indienova 的简中译版部分参考了 johnson_lin 和游戏思维的繁中版本,特此感谢他们的授权、支持与帮助。

引言

本文是我在 GDC 2015 独立游戏峰会上演讲内容的修订版。它包含了一些有关 2D 卷轴游戏的背景知识,以及大量的经典老游戏案例。我希望这篇文章能让你读有所获,乐在其中。

概述

我在开发 Mushroom 11 的过程中,曾面对过形形色色技术与设计上的挑战。我从未指望过能够找到多少处理动态形变或顶点动画的资料,但令我颇为意外的是:摄像机运镜,这个在游戏开发历史上起码存在了30年的老命题,相关的讨论居然乏善可陈。

我决意开始一场2D游戏考古之旅,记录这些老游戏曾经遭遇的困难,将它们克服这些问题所用的方案以及这些方案的演进过程整理成文档。此外,由于许多解决方案尚无合适术语,我在将它们分门别类归档后,就自行定义了自己的术语表,哪怕只是为了方便我个人参考也好。

卷轴

卷轴,或者说运镜技术,想要解决的主要问题是,如何才能更好地呈现一个单屏无法完全显示的大场景。画面卷动技术有许多潜在的细节需要仔细考虑:譬如说抉择玩家能看到的画面,从设计者的角度考虑,来凸显我们希望玩家予以关注的内容,并以一种流畅自如的方式将它们呈现给玩家。

尽管我这里主要讨论的都是2D摄像机系统,但其中许多主要的方面也都可以衍生到3D游戏的设计中。

背景知识:视觉神经

在我们检索这些游戏前,先来初步了解一下和卷轴有关的视觉神经知识,以便加深我们对视觉和感知的理解。这样我们就能明白有些卷轴的画面卷动方式为什么可能造成问题。

眼球内的接收带“黄斑中心凹”(fovea-centralis)负责处理锐利与精细的中央视觉,而第二、第三接收带“副中央凹”(parafovea)与“中心凹周围区”(perifovea),则专门将影像与运动压缩为能够被快速识别的模式,其中包含辨识那些我们熟知且警觉的图形,以及它们在速度方向上的动态变化。

这些视觉讯号拥有直达大脑杏仁核的快速通道,这样即使视觉中枢正在处理输入,也能保有警觉和应变反应。随着时间推移,对大脑进行的专门训练,尤其是配合控制来尝试改变周边视野的专门训练,已经被证明卓有成效。

前庭系统位于内耳,是掌管平衡及提供空间方向感的器官。它所发送的讯号能够使得人体在聚焦特定视觉细节时仍能掌控自身的平衡。

有些人,比如说我吧,如果在车内看书,由于缺乏周遭的视觉反馈,加之速度上的改变,可能就会产生晕眩,恶心的感觉。

相反的状况亦然:如果“中心凹周围区”(perifovea)感知到背景的快速变化,大脑也会期待前庭系统给出相应的反馈。如果这个讯号并不存在(比方说你其实一动不动地窝在电脑面前),也会产生类似的晕眩反应。

因此,造成视觉与前庭系统间冲突的讯号都可能会导致恶心与不适,尽管这个问题主要发生在 3D 游戏(尤其是 VR 游戏)中,但对 2D 游戏的设计也会产生非常显著的影响。

专注点、互动性、舒适感

为进一步加深对画面卷动问题的理解,我将需要克服的挑战划分为三类:

image

  • 专注点:使摄像机提供充分的游戏信息与反馈(玩家需要看到的内容)

  • 互动性:为玩家提供对显示内容清楚明了的控制,使得背景的变化可以预测并与控制紧密相连(玩家想要看到的内容)

  • 舒适感:弱化背景的切换,使其连贯舒缓(如何平滑舒缓地达成前述的需求)

经典回顾

让我们启程重回上世纪八十年代,当时的设计者在三十年后的我们很难想象的诸多技术限制下,仍提出了不少新颖的设计方案。

你可能还会注意到,我也参考了数款近十年一流的独立游戏作品,这些作品所反映出的独立开发者应有的创造力、专注力和关注点也一般无二地反映在了这些游戏的摄像机系统设计上。

跟随操作

对你所操作的对象保持关注

我们先从基础开始。一般而言,玩家拥有主角的控制权。这意味着摄像机应当紧紧跟随主角,使注意力主要集中在主角身上。

在八十年代早期,画面卷动尚且是一项艰难的任务,开发者需要克服 CPU 性能,内存容量与分段等诸多问题。尽管面临这些挑战,仍然有不少杰出的横版卷轴游戏面市,巧妙地解决了这些限制。当然,在很多情况下,我们可以想象到这些运动处理其实比较简陋,精度也偏低。

像迷魂车(Rally-X) 这样一款 1980 年出品的游戏,居然能够克服技术上的重重限制,制作出真实的双轴摄像机系统,着实令人惊艳。它使用了最基础的固定位置(postion-locking)机制,使车子始终保持在画面正中,摄像机运动也完全可以预判。

点击图片查看 GIF 动图


Rally-X © 1980 Namco

 

固定位置(position-locking)

- 摄像机锁定在玩家角色所在位置

注意:这次演讲使用的术语是为了我个人引用和参考方便而创造的,但如果其他人觉得它们有用,并且愿意提出改进意见和反馈,我也是非常乐意接受的。

西川隆志设计的《成龙踢馆》(Suparutan X / Kung-Fu Master)是另一个应用固定位置(postion-locking)机制的绝佳范例。他的其他作品还包括《月面巡礼》(Moon Patrol), 以及后来的《街头霸王》(Street Fighter)。

这款游戏还使用了一个我称之为边缘捕捉(edge-snapping)的机制,在这种机制下,当角色到达关卡尽头时,摄像机会尽量与场景边缘贴齐,使得玩家能够离开原本所在的锚点。

点击图片查看 GIF 动图


Kung-Fu Master © 1984 Irem

 

固定位置(postion-locking)

边缘捕捉(edge-snapping)

- 对摄像机位置设置硬性的边界

* 由于边缘捕捉的使用实在过于普遍,因此后文中将这种机制略去不提

固定位置(postion-locking)虽然简单但仍然十分有用。对于像是泰拉瑞亚(Terraria)这样的建造冒险游戏,由于其角色的尺寸和跳跃的高度相对整个屏幕来说都很小,因此这种机制表现良好,能够在各个方向上都提供开阔的视野。

点击图片查看 GIF 动图


Terraria © 2011 Re-Logic

 

固定位置(position-locking)

抑止摄像机运动

避免难以预料的无谓画面颤抖
我们应当如何避免完全无必要的摄像机运动呢?三十年前,画面卷动技术曾造成过一系列问题:它非常吃 CPU 的性能,而且需要不停地重绘屏幕上的大部分内容。即便克服了这些困难,在那个时候,大块的像素也会让画面卷动的效果显得支离破碎,飘忽不定。最佳方案是,只保留最小需求的屏幕变动。有一种解决办法是,允许角色在一个特定的窗格内移动,只有当角色到达窗格边缘时,摄像机才会开始运动。

《跳跳车》(Jump Bug)是许多人心目中的第一款平台跳跃游戏。尽管从技术上讲,角色只不过在重复地向上跳跃,玩家所能做出的控制受限于跳跃高度和左右方向。这款游戏的多数时间里,使用的都是强制位移的摄像机,迫使玩家在躲避障碍的同时持续向上,这也是当时多数其他游戏所采用的方式。

点击图片查看 GIF 动图


Jump Bug © 1981 Hoei/Coreland (Alpha Denshi)

 

摄像机窗格(camera-window)
- 当玩家接触窗格边缘时推动摄像机位置

但本作最后一关所使用的摄像机窗格(camera-window)技术,解决了一个其设计者甚至可能根本尚未意识到的问题,并且为往后数以千计的平台跳跃游戏树立了标杆。摄像机窗格(camera-window)也同时造成了一些其他问题,譬如当玩家朝着出口跳跃时,由于狭窄的视野范围,很难处理前方或者正上方的突发状况。

我的个人十分钟爱的《王者之剑》(Rastan Saga)引进了多路径双轴运镜的技术。它也是最早真正地将摄像机运动与游戏机制深度整合的游戏之一。摄像机窗格的高度即为正常跳跃的高度,因此跳跃不会造成摄像机在垂直方向上的运动,除非主角已经离开了窗格内的基准位置。这弭除了摄像机剧烈颤抖的问题。

运用这种机制也会造成一个颇为严重的问题。它使得正上方的敌人很难被留意到,特别是当主角已经垂直移动到窗格顶端时。另外,当向左移动时,在城堡的关卡中经常发生,由于主角移动方向预留的视野过于狭窄,感觉会相当不适。

点击图片查看 GIF 动图


Rastan Saga © 1987 Taito

 

摄像机窗格(camera-window)

在近期的游戏中我们也还能看到摄像机窗格(camera-window)技术的运用。来看看《菲斯》(Fez)是如何做的:当玩家旋转场景时,水平的摄像机窗格(camera-window)位置会保持不变,而精心挑选的转轴能让角色仍然位于窗格内部。《菲斯》所选用的摄像机窗格(camera-window)运用方式非常特别,因为它需要配合如此独特的游戏机制来提供理想的摄像机方案,这些内容我们后文还会提到。在垂直的方向上,它使用的摄像机方案混合了基本的固定位置(postion-locking)机制,同时运用平滑插值(lerp-smoothing)技术来柔化动态,这部分内容我们后文也会再行描述。

点击图片查看 GIF 动图


Fez © 2012 Polytron Corporation

 

摄像机窗格-水平方向(camera-window horiz.)

* 在场景立体旋转时摄像机窗格也依然保持不变

固定位置-垂直方向(position-locking vert.)

平滑插值(lerp-smoothing)

基于区域的锚点(region-based-anchors)

手动控制(manual-control *)

* 通过右摇杆能控制额外的摄像机运镜

注意:灰色显示的词条表示这些是我们后文才会陆续描述的摄像机控制技巧。

捕捉

在窗格范围内修正摄像机偏移
我们已经展示了如何运用摄像机窗格(camera-window)来减少不必要的摄像机移动,但正如我们在《跳跳车》( Jump Bug)和《王者之剑》(Rastan Saga)这两款游戏中看到的那样,当玩家位置偏向窗格的某一侧时,这种机制会造成一些缺陷。这里讲几个可以修正它的办法。

《忍》(Shinobi),大概是我个人最爱的经典游戏。在这款游戏中,需要在多个平台间进行落差很高的跳跃。它的设计者为此设计了一套非常独特的摄像机系统:由于角色需要在多个高低不等的平台间来回跳跃,所以本作中使用的摄像机窗格(camera-window)竖直方式上间距很高。和通常设计一样,摄像机会被这个窗格直接推动。问题在于,如果游戏角色在一个非常宽(或者非常高)的窗格中进行一次小跳后,会卡在窗格接近边缘的位置,这样一来就只会留下非常狭窄的视野范围,就像我们在《王者之剑》(Rastan Saga)中看到的那样。因此,本作会平缓地不断将摄像机中心拉回角色所在位置,让画面可以聚焦于角色的行动,同时将摄像机剧烈抖动的影响降到最低。

点击图片查看 GIF 动图


Shinobi © 1987 Sega

 

位置捕捉 - 竖直方向(postion-snapping vert.)

- 持续调整窗格位置,始终不断地将摄像机拉回玩家角色所在位置。

摄像机窗格 - 竖直方向(camera-window vert.)

固定位置 - 水平方向(position-locking horiz.)

静态正前聚焦(static-forward-focus)

平台捕捉(platform-snapping)机制是《超级马里奥世界》(Super Mario World)为我们贡献的诸多设计之一。在运用摄像机窗格(camera-window)机制后,当玩家碰触窗格边缘时摄像机才会开始移动。但是,不管怎么样,马里奥终究会跳跃到另一个平台上,如果运用了平台捕捉(platform-snapping)机制,摄像机就能随即捕捉到角色的新位置。

点击图片查看 GIF 动图


Super Mario World © 1990 Nintendo

 

基于区域的锚点(region-based-anchors)

平台捕捉(platform-snapping)*  仅当玩家着地时摄像机才会捕捉玩家位置

摄像机窗格(camera-window)* (垂直.)

* 可应用之处

双向正前聚焦(dual-forward-focus)*

* 阈值触发

手动控制(manual-control)* (水平.)

* 控制器提供额外视野

(这里我第一次提到了宫本茂先生的作品,但当然不会是最后一次。对微小细节投注巨大心血是成为卓越设计者的关键,这绝非是仅靠聪明的游戏机制设计就能做到的。)

在初代《雷曼》(Raymen)中你也能看到类似的机制运用。这款游戏中的摄像机窗格(camera-window)顶端位于屏幕的顶部。因此,你会发现主角的跳跃不会使得摄像机上下移动,但一旦他落地,摄像机就会平滑地推移过去。将摄像机窗格(camera-window)设定成将将超过主角跳跃高度,无疑是一种十分聪明的解决方案,它再一次向我们示范了,如何才能将摄像机系统整合为游戏设计的一个部分。

点击图片查看 GIF 动图


Rayman © 1995 Ubisoft

 

平台捕捉(platform-snapping)*

摄像机窗格(camera-window)* (垂直.)

基于区域的锚点(region-based-anchors)

双向正前聚焦(dual-forward-focus)*

平滑插值(lerp-smoothing)

* 可应用之处

即便到了今天,这种机制也大有用武之地,在角色跳跃时,摄像机仍能保证稳定平顺,只有在跳跃完成后,抑或是摄像机窗格被推动时,才会需要重新校正摄像机的位置。试举另一个例子,王牌英雄(Awesomenauts)中有一名使用喷射背包的英雄,只使用垂直方向的摄像机窗格(camera-window)。

点击图片查看 GIF 动图


Awesomenauts © 2012 Ronimo Games

 

摄像机窗格(camera-window) (垂直.)

平台捕捉(platform-snapping)

固定位置(position-locking) (水平.)

平滑处理

避免摄像机突然加速或变向
前文中,我们曾谈起过周边视野在我们视觉感知中所扮演的角色,以及它对视觉舒适感所产生的影响。在很早以前,那个使用大块像素的年代,因为像素颗粒大小的缘故,即使简单的补间动画都会导致画面跳帧。

80年代像素
(红白机时代NES: 256x240 分辨率)

独立游戏像素
(每个像素点包含多个屏幕像素)

如果我们被限定只能严格使用这些粗糙的大块像素,那么我们怎样才能让摄像机运动显得更加平滑呢?今时今日,我们已经可以让设计精美的像素风格美术在比它本身更为精细的屏幕像素上运动,如果你觉得无需坚持完美像素风格(pixel-perfect),多数现代引擎还允许你在比像素点更小的范围内对材质进行操作。

利用(虚假)物理特效来平滑摄像机运动

虚假物理特效能让固定位置(postion-locking)机制下的摄像机移动更加平滑(,当然你大可以指出,但凡引擎制造出来的物理特性还不都是虚假的)。

《吃豆人世界》(Pac-Land)大概勉强能算作第一款现代的平台跳跃类游戏。它所具备的诸多元素都能帮助我们清晰地定义这种游戏类型:譬如在平台间跳跃,躲避敌人以及拾取奖励等等。这款游戏通过分级变速的方式解决平滑处理的问题:角色移动速度会从0像素每帧到1、2、3像素每帧一路递增,直到达到最大速度,减速时亦类似。由于摄像机一直锁定在玩家角色所在位置,因此结果呈现得清晰又平滑。不过《吃豆人世界》(Pac-Land)中并不需要进行垂直滚屏,而才是真正有挑战的地方,因为起跳和着陆时会导致角色突然地加减速。

点击图片查看 GIF 动图


Pac-Land © 1984 Namco

 

固定位置(position-locking)

静态正前聚焦(static-forward-focus)

宫本茂先生

说到这里,我希望能向宫本茂先生致敬,并在这里列举一些他早期的作品。他对游戏产业的贡献之大,乃至对游戏设计细节的追求之大,都绝无夸大之处。

1984年他便开始探索滚屏技术,用完全不同的方法设计了两款游戏。这两款游戏中,玩家对画面的滚动都没有什么控制能力,效果好似场景有一个不断平移的背景图。


Excitebike © 1984 Nintendo

Devil World © 1984 Nintendo
(denied release in North America)

《越野机车》(Excitebike)中已经加入了接近现在做法的滚屏动作,会受到机车速度的影响。滚屏十分平滑,但不会对游戏玩法产生实际的影响。

《恶魔世界》(Devil World)的玩法则处处与滚屏紧密相关。在这款《吃豆人》(Pac-Man)的衍生作品中,你将扮演一条信仰基督,对抗恶魔的龙。而恶魔则是一个只会通过改变滚屏方向来试图将你拉向屏幕边缘的家伙。由于宗教标志的运用,本作成为宫本茂作品中唯一一款禁止在北美发行的游戏。不过对照看他后来这些年的高质量作品来看,这款作品被禁对玩家来说应该不算非常巨大的损失。然而,多去了解这些大师早期不算成功的作品对我们十分重要,甚至非常有激励作用,即便是最杰出的艺术家,也是从不断探索,反复失败中一路走来的。

之后一年诞生的《超级玛丽》(Super Mario Bros)则是一款洒尽溢美之词也不足以形容的伟大杰作。这款游戏简单地将从左向右,单向前进的机制组合起来,此外,它并不允许越过屏幕边缘往回走,这是一种很常见的平台游戏特征,技术上我们可以将这种机制定义为单边摄像机窗格(one-sided camera-window)。

点击图片查看 GIF 动图


Super Mario Bros. © 1985 Nintendo

 

加速推动区域(speedup-push-zone) - 当玩家处于推动区域内时,让摄像头逐渐加速到玩家角色的速度

摄像机窗格(camera-window)*

* 单向静态正前聚焦(static-forward-focus)

因此假如游戏角色一路加速穿过摄像机窗格(camera-window)边缘,会在一帧内从静止立即变为全速,造成背景画面的巨大抖动,并随之导致玩家视觉上的不适。设计者巧妙地解决了这个问题,在距离摄像机中心大约偏移 25% 处增加一处视点,一旦角色越过此处就加速移动摄像机,这样当角色越过摄像机窗格(camera-window)边缘时,摄像机速度早就跟上了角色的移动。

《银河战士》(Metroid)也同样是一款奠定游戏类型的鼻祖级作品,它将平台跳跃和探索发现要素融为一炉,顺便一提,同类游戏的另外一个奠定者《恶魔城》(Castlevania)则是一款采用了固定位置(postion-lock)的摄像机机制的作品。《银河战士》(Metroid)中使用了多轴向的摄像机,但一次只出现一种。本作允许角色短暂离开摄像机窗格(camera-window),这时摄像机会加速跟上玩家角色的位置,角色可以脱离窗格的距离远近则取决于角色越过窗格边缘时的速度,这样一来,就能让摄像机运动显得平滑自然。

点击图片查看 GIF 动图

点击图片查看 GIF 动图


Metroid © 1986 Nintendo

 

摄像机窗格(camera-window) (水平./垂直.)

加速拉进区域(speedup-pull-zone) - 在玩家越过摄像头窗口的边界时,让摄像头加速追上

技术的进步也伴随着更高的像素分辨率,更强劲的 CPU 对摄像机系统产生了直接的影响。摄像机开始可以自由地移动,不再需要顾虑低分辨率下每隔几帧就可能出现的画面抖动,这种情况过去在摄像机低速运动时尤其明显。

《超级大金刚》(Donkey Kong Country)中使用了许多极富创意的摄像机方案,比如它首创的平滑插值技术(lerp-smoothing),能够让角色跳跃的动画更加顺畅;另一项值得一提的技术是正前聚焦(forward-focus),稍后我们再详细说它。

点击图片查看 GIF 动图


Donkey Kong Country © 1994 Nintendo (Rare Ltd)

 

平滑插值(lerp-smoothing) 运用线性插值法不断缩减摄像机与移动角色的间距

固定位置(position-locking) (垂直.)

基于区域的锚点(region-based-anchors)

双向正前聚焦(dual-forward-focus)

平滑插值技术听上去并非什么了不得的技术,不过它业已成为减少摄像机抖动(尤其是跳跃造成的抖动)的标准技巧之一。

float lerp (float a, float b, float t) {
    return a + t * (b - a);
}
    

这大概是最为有效也最为普及的一项平滑处理技术。在《超级食肉男孩》(Super Meat Boy)中,无论是角色的快、慢移动,这项技术都表现得很不错。但是,体型特别庞大的角色如果特别快速地运动,会很容易出现角色早已经离开屏幕但摄像机却还没来得及跟上的情况,这会导致很难提前发现敌人的踪迹,以至于无法及时做出反应。

点击图片查看 GIF 动图


Super Meat Boy © 2010 Team Meat

 

平滑插值(lerp-smoothing)

固定位置(position-locking)

2014年推出的《不再孤独》(Never Alone)是一款很美的游戏作品,后文中我们会提到的许多元素都能够在这款游戏中看到。它的平滑处理技术同时兼顾了摄像机的既有速度,这意味着摄像机的跟随移动起步会略慢,有时还会越过目标位置,这样能够产生十分平滑自然的效果,只是会让快速的玩家操作反应略显滞后。

点击图片查看 GIF 动图


Never Alone © 2014 Upper One Games

 

平滑物理(physics-smoothing) - 摄像机开启物理熟悉,会持续接近聚焦目标

平均位置(position-averaging)

电影式路径(cinematic-paths)

基于区域的锚点(region-based-anchors)

线索聚焦(cue-focus)

用程序术语来说,平滑插值技术(lerp-smoothing)即所谓的渐出(EaseOut),而平滑物理技术(physics-smoothing)则是渐入渐出(EaseInOut)。可以的话,你可以自行去查看 SmoothDamp 方法(此处指 Unity 引擎提供的API)的实现细节,或者综合考虑当前速度和目标距离来设计自己的实现。

如果你使用的是严格基于像素的 shader,可能有时会发现某个精灵相比背景中的其他精灵错位了一个像素,则可能是程序中除法结果的不一致导致的。

《光明旅者》(Hyper Light Drifer)平滑处理的方案十分巧妙,即便在低分辨率的像素风格下也表现良好。它会预先将一张严格基于游戏像素的画布渲染出来,然后会将画布与屏幕像素对齐,即通过实际坐标除以游戏像素大小后的余数来决定偏移的像素。本作中还运用了许多我们后文会详细说明的有趣技巧。

点击图片查看 GIF 动图


Hyper Light Drifter © [Release TBA] Heart Machine

 

平滑物理(physics-smoothing)*

* 摄像机画布分辨率为 480x270。摄像机卷轴使用全分辨率。

基于区域的锚点(region-based-anchors)

目标聚焦(target-focus)

线索聚焦(cue-focus)

运镜聚焦(gesture-focus)

构图

在帧图中刻画重要的细节

按定义来讲,自动画面卷动不在本文讨论之列,因为玩家并没有对画面卷动的控制权。但是,我们可以参考这些游戏所设计的玩家角色位置,看它们是怎样做到令玩家对来自前后方的威胁都能够有合适的反应时间。

点击图片查看 GIF 动图


Scramble © 1981 Konami

 

自动卷轴(auto-scroll) - 玩家对画面卷动没有控制器(但对角色在画面中的位置拥有绝对的控制权)

正如我们在《吃豆人世界》(Pac-Land)中看到的那样,将摄像机运动与玩家角色绑定后,也可以让摄像机聚焦在玩家角色前方的位置,这能够在角色移动的方向保留开阔的空间,而角色也来得及对身后的威胁及时做出反应——不仅如此,它还指引了玩家角色前进的方向,因为我们一贯会朝屏幕的中央来集中注意力。

点击图片查看 GIF 动图


Pac-Land © 1984 Namco

 

固定位置(position-locking)

静态正前聚焦(static-forward-focus) - 为游戏主要的前进方向分配更开阔的视野空间

回溯更早期的游戏,我们会看到一款于 1981 年推出,走在时代之先的作品《保卫者》(Defender),这是一款开创了飞行射击类型的作品。它使用了双向正前聚焦机制(dual-forward-focus),从地图雷达也可以看出来,摄像机的中心位置始终保持在太空船前方约 25% 屏宽的位置。这种摄像机系统很适合快节奏的游戏,这种游戏的敌人多出现在角色的正前方。

点击图片查看 GIF 动图


Defender © 1981 Williams Electronics

 

双向正前聚焦(dual-forward-focus) - 玩家朝向会改变摄像机焦点,这样可以确保前进方向上保有足够宽广的视野

《龙凤神偷》(Bonanza Bros)是世嘉街机在1990年推出的一款以抢劫为题材的横版卷轴游戏。它的分割画面能够让两个玩家协力合作,操控俩兄弟完成抢劫。

像这样一款以抢劫为题材的游戏,清楚的前方视野自然相当重要,因此,它也使用了双向正前聚焦(dual-forward-focus)技术。然而,本作中的摄像机会分好几步来跟上新的目标点,这让整个运动过程显得极为平滑,并且提供了开阔的视野空间。切换焦点的速度大约是玩家角色速度的两倍,因此只有当玩家角色移动时摄像机才会移动。可以参考下图中的红点位置。

点击图片查看 GIF 动图


Bonanza Bros. © 1990 Sega

 

双向正前聚焦(dual-forward-focus)*

* 焦点会随着行走速度切换

下图中《超级马里奥世界》使用的技巧则是我个人最喜爱的2D游戏摄像机技术之一,通过这种技巧可以极为漂亮得刻画出游戏玩法的细节。

点击图片查看 GIF 动图


Super Mario World © 1990 Nintendo

 

基于区域的锚点(region-based-anchors)

平台捕捉(platform-snapping)*   仅当玩家着地时摄像机才会捕捉玩家位置

摄像机窗格(camera-window)* (垂直.)

* 运用于可能之处

双向正前聚焦(dual-forward-focus)*

* 阈值触发

手动控制(manual-control)* (水平.)

* 控制器控制额外的视野

前文曾提及,画面中会有两处锚点,保证玩家角色的前进方向始终有开阔的视野空间。当玩家准备掉头(这在《超级马里奥世界》中并不少见),摄像机只会在玩家越过预设的边界后才会改变焦点位置,锁定到另外一处锚点。这使得即便在《超级马里奥世界》这样一款需要频繁左右移动的游戏中也无需总是让摄像机切换聚焦方向。

最近的作品中,《洞窟物语》(Cave Story)运用双向正前聚焦机制(dual-forward-focus),基于玩家角色的移动速度,将焦点从一侧缓慢地移向另外一侧。正如我们在《龙凤神偷》(Bonanza Bros)中曾看到过一些机制,尽管摄像机总会向新的锚点位置移动,但却会随着玩家角色的移动来加速。

点击图片查看 GIF 动图


Cave Story © 2004 Studio Pixel

 

固定位置(position-locking) (垂直.)

双向正前聚焦(dual-forward-focus)

平滑物理(physics-smoothing)

手动控制(manual-control)*

* 控制器控制额外的视野

《爵士兔2》(Jazz Jackrabbit 2)是 Epic Game 早期出品的一款精美的平台游戏。它具有一个的确相当独特的摄像机元素:玩家可以通过手柄控制摄像机离开玩家角色所在的位置,竖直或水平移动皆可。

这即是我所称的目标聚焦机制(target-focus):玩家可以通过手柄控制摄像机向指定的目标和方向移动,这种机制十分有用,譬如当你朝左移动时,总会希望看到更靠左的位置是什么样子。当手柄按键松开以后,摄像机焦点又会回到玩家角色所在位置。

点击图片查看 GIF 动图


Jazz Jackrabbit 2 © 1998 Epic Games

 

平滑插值(lerp-smoothing) (垂直.)

目标聚焦(target-focus) - 摄像机会依据玩家操作输入聚焦到目标所在的方向

[手动控制(manual-control)*]

* 手动控制为目标聚焦提供额外的视野

一些点击控制的游戏会运用目标聚焦机制(target-focus)来更直观地表现可视目标。在《快照》(Snapshot)中,你需要用鼠标捕捉到场景物品的快照,并在别处利用它们解决谜题。鼠标指向的方向正是你视觉延伸的方向,因此摄像机焦点被定位在玩家角色和鼠标指针的中点处。

点击图片查看 GIF 动图


Snapshot © 2012 Retro Affect

 

目标聚焦(target-focus)*

* 摄像机处于玩家和指针的平均位置

平滑插值(lerp-smoothing)

我们后文会提及的许多摄像机高级技巧都能在《交易者》(The Swapper)这款游戏中发现踪迹。它也同样运用了目标聚焦机制(target-focus),克隆枪的瞄准位置即玩家视野的方向,同时也能作为极为合适的视觉焦点。任何具有这种需额外瞄准的武器装备的游戏都挺适合使用这种机制。玩家甚至可以一边后退一边面朝他们希望的方向,这使得摄像机行为更富有变化,同时也需要更多的细节操作。

点击图片查看 GIF 动图


The Swapper © 2013 Facepalm Games

 

目标聚焦(target-focus)

平滑物理(physics-smoothing)

基于区域的锚点(region-based-anchors)

线索聚焦(cue-focus)

电影式路径(cinematic-paths) 

《雷堤康的秘密》(Secrets of Rætikon)也使用了很多有趣的摄像机机制,从画面构成的角度来讲,它使用的是预判聚焦机制(projected-focus),会基于玩家角色当前移动的速度来预测玩家可能的位置。

注意这种技巧未必适合平台游戏,特别是垂直方向上移动的平台游戏,因为插值计算显然无法很好地预估到跳跃和着地的瞬时状态。

点击图片查看 GIF 动图


Secrets of R©tikon © 2014 Broken Rules

 

预判位置(projected-focus) - 摄像机跟随玩家的预估(推测)位置来移动

平滑物理(physics-smoothing)

线索聚焦(cue-focus)*

* 基于吸引子的位置和焦点

运镜聚焦(gesture-focus)*

* 游戏机制触发的摄像机运镜,例如,飞翔时画面放大,摄像机拉远。

电影式路径(cinematic-paths)

《天空奇兵》(Luftrausers)以一种极为有趣的方式结合了一系列非常赞的摄像机技巧:当飞机在瞄准时,运用目标聚焦机制(target-focus);当飞机调头时,运用预判聚焦机制(projected-focus);当出现其他值得关注的线索,例如水面冒出战舰,子弹破空而来,则运用后文会提到的线索聚焦机制(cue-focus)。

点击图片查看 GIF 动图


Luftrausers © 2014 Vlambeer

 

目标聚焦(target-focus) / 预判位置(projected-focus)

平滑物理(physics-smoothing)

线索聚焦(cue-focus)

导演

布置场景线索,关联内容和进程

目前为止,我们已经讨论过如何为玩家呈现视野,如何结合恰当的操作方式,并且大体上讨论了玩家想看到的东西(我们前往中提到的“互动性”)。我们也讨论许多令画面流畅舒适的方法(即“舒适感”的问题)。

但身为游戏场景的“导演”,出于游戏的连贯性,剧情的推进,戏剧化的张力和叙事手法等的需要,我们也应该掌握一些技巧,来让玩家关注我们希望为其展现的重要事物。

《好奇男孩》(Wonder Boy),另一款我非常喜爱的作品,是一款快节奏的平台游戏(本作移植之作《冒险岛》后来也形成了独立系列)。它使用经典传统的单向摄像机窗格机制(ones-sided camera-window),允许玩家不断前进。不像《超级玛丽》(Super Mario Bros.),本作并未使用加速推动摄像机的技巧(speedup-push-zone)来平顺画面,但它使用了另一种颇为有趣的技巧:我称之为摄像机路径(camera-path)。摄像机移动的方向会提示玩家接下来的挑战和关卡的线索。

点击图片查看 GIF 动图


Wonder Boy © 1986 Sega

 

摄像机路径(camera-path) - 关卡内的预设摄像机路径

摄像机窗格(camera-window)*

* 单向

静态正前聚焦(static-forward-focus)

Playstation 和 N64 等第五代主机,随着其硬件性能的提升和真 3D 概念的兴起,让其平台上的游戏拥有了更大的表现能力。3D 摄像机技巧本身就是值得另开专题讨论的庞大话题,但对 3D 的支持也令 2D 游戏的设计出现了重大的变化。设计者得以让游戏画面缩放,倾斜甚至直接将 2D 和 3D 场景融合起来制作所谓 2.5D 的游戏,即游戏在三维空间的二维平面上进行。

PS 游戏《风之克罗诺亚》(Klonoa)正是这样一款游戏。玩家角色的控制方式是 2D 游戏的,但游戏场景实际上处于精心设计的 3D 世界之中。本作的摄像机会跟随 3D 的摄像机路径前进,表现玩家的移动方向,引导具体的玩法和叙事细节。摄像机路径在贯穿整个关卡的过程中会适时定位,制造倾斜、缩放效果,并提示应予关注的场景元素或提醒玩家何处能进行跳跃动作。

点击图片查看 GIF 动图


Klonoa: Door to Phantomile © 1997 Namco

 

摄像机路径(camera-path)*

* 实际上即为路径提示。包括缩放和倾斜。

摄像机窗格(camera-window) (垂直.)

平滑插值(lerp-smoothing)

双向正前聚焦(dual-forward-focus)

这种摄像机控制方式为我们提供了丰富的手法,来进行游戏中的暗示,精细和警告。在《风之克罗诺亚》中,摄像机拉远显示 Boss 出场画面时,你会非常清楚接下来就会迎来一场恶斗。

《超级大金刚》(Donkey Kong Country)开创的许多有趣机制如今业已成为平台游戏设计的标准手法:游戏设计者可以根据关卡内容,甚至是关卡特定区域的内容来改变摄像机行为。在一些节奏快速,玩法类似跑酷的区域,前方会需要开阔的视野,就牺牲掉背后的可见区域。而一些以探索为主的区域玩家角色两边都会留出较为开阔的视野。

点击图片查看 GIF 动图

点击图片查看 GIF 动图


Donkey Kong Country © 1994 Nintendo (Rare Ltd)

 

平滑插值(lerp-smoothing)

固定位置(position-locking) (垂直.)

基于区域的锚点(region-based-anchors) - 不同区域,甚至同一关卡内的不同区域设置不同的锚点来改变摄像机位置和焦点

双向正前聚焦(dual-forward-focus)

正如我们在《风之克罗诺亚》中所见到的那样,这种能够呈现 3D 环境的技术为我们提供了许多“导演”工具,譬如镜头缩放/推拉的运用。镜头的缩放能够改变视野角度(field-of-view),而镜头的推拉则专指将镜头对着拍摄物前后移动的影视术语。它们同样都能达到对画面重新构图的目的。虽然实现上截然不同,但镜头推拉一般更能营造出强烈的临场感觉。如果想了解更多有关镜头推拉和缩放的区别的资料,可以查询相关的影视网站和数据库,本文出于方便考虑,将这两种技巧统称为缩放适应(zoom-to-fit)。

以《耀西的故事》(Yoshi's Story)为例,画面围绕耀西,Boss和立柱来构图,会凸显玩家需要留意的目标和区域镜头等元素。摄像机并不会总是以这些元素为中心,它甚至会通过缩放和推拉来改变视觉焦点。

点击图片查看 GIF 动图


Yoshi©s Story © 1997 Nintendo (N64)

 

缩放适应(zoom-to-fit) - 缩放或移动摄像头来特写相关联的要素

双向正前聚焦(dual-forward-focus)

摄像机窗格(camera-window) (垂直.)

平台捕捉(platform-snapping)

手动控制(manual-control)

《疯狂扭曲的暗影星球》会将双环吸引子放置在检查点或敌人这样的场景元素上。玩家角色在双环外时,摄像机跟随玩家角色;当玩家角色步入外环范围内时,摄像机焦点参考玩家位置和吸引子位置朝吸引子移动,落到加权平均值处。当玩家步入内环后,摄像机会被锁定到吸引子上,忽略玩家位置。不同的场景要素拥有不同范围的双环,并且允许相互重叠,这样就能让视野在不同吸引子之间平滑地过度。

点击图片查看 GIF 动图


Insanely Twisted Shadow Planet © 2011
Shadow Planet Productions

Footage taken from Shadow Planet Productions Blog: ITSP Camera Explained

 

线索聚焦(cue-focus)* - 聚焦位置由游戏场景内的线索来定(例如吸引子)

* 位置和缩放基于双环吸引子,由检查点和敌人等多个线索决定

预判位置(projected-focus)

目标聚焦(target-focus)

平滑物理(physics-smoothing)

引导玩家注意力可用的手法并不少,双环吸引子技术(ITSP)是其中一种十分健壮的方案。它甚至可以逆应用:使用排斥子(detractor)来让摄像机远离某个场景元素,这样做的目的可能是营造悬疑气氛,也可能会用在游戏的隐藏要素上。

《空》(Aether)是一款由 Edmund McMillen 与 Tyler Glaiel 在 2008 年开发的 Flash 游戏,它也引入了一种特殊的提示手法:玩家漂流太空时若卷入星球的重力场,画面就会會逐渐转向重力源。这能够提供安全感,也能起到指引方向的效果,因为持续向下就能抵达地面。

点击图片查看 GIF 动图


Aether © 2008 Armor Games
(Edmund McMillen, Tyler Glaiel)

 

线索聚焦(cue-focus)*

* 摄像机方向随重力方向变化

固定位置(position-locking)

平滑插值(lerp-smoothing)

如果避开不提《地狱边境》(Limbo),那这篇讨论摄像机系统的文章根本就不算完整。通过控制画面曝光,位置和缩放,这款游戏的确营造出了别具一格的氛围效果。在《地狱边境》(Limbo)中,每片区域都有独特的特征,锚点位置会落在屏幕的一些特殊位置上,并且会有一些物品来提供额外的摄像机线索,比如,位于敌人处的吸引子。

点击图片查看 GIF 动图


Limbo © 2010 Playdead

 

基于区域的锚点(region-based-anchors)*

* 不同区域(甚至可能处在同一关卡中)摄像机的位置和焦点的锚点也会有所不同

固定位置(position-locking)*

* 随区域变化

线索聚焦(cue-focus)*

* 某种操作触发某种线索,如敌人进攻

平滑物理(physics-smoothing)

另一种简单有效的方案是区域聚焦(region-focus),《几何战争》中就能看到这项技术的运用。它会综合参考战机和关卡地图中央位置来移动摄像机。这意味着画面总是会以战机一半的速度跟随战机移动。玩家只需要稍加观察,就能确定战机位于关卡中的位置。这种系统适合封闭的小型关卡,尤其是那种威胁主要来自画面中央的关卡。

点击图片查看 GIF 动图


Geometry Wars © 2003 Bizarre Creations

 

区域聚焦(region-focus)* - 聚焦区域锚点,同时也参考玩家角色位置

* 摄像机位于船与场地中央的平均位置

《滴滴动力》(Vessel)是一款经典的解密游戏,为了解决以流体为基础设计的系列谜题,玩家需要留意多个不同的场景元素,因此摄像机区域的设计会显得更为关键。正如在《几何战争》中一样,设计者将区域锚点的权重增加,这样当玩家解密时,摄像机就能几乎保持静止。这是对古老的以房间为基础的解密游戏的现代诠释,在本作中,房间的概念更有弹性,大小和特征区别会更显著。

点击图片查看 GIF 动图


Vessel © 2012 Strange Loop Games

 

区域聚焦(region-focus)*

* 摄像机位置基于区域锚点,但随着玩家角色移动会有微小变化

基于区域的锚点(region-based-anchors)*

* 不同区域拥有不同锚点位置和缩放因数

线索聚焦(cue-focus)

平滑物理(physics-smoothing)

电影式路径(cinematic-paths)

本作最为精妙的设计之一是,即使已经限制在某个区域范围内,摄像机仍然会跟随玩家微微移动。这样即便在一个限定的小区域内,玩家也能感受到较强的操控感。不仅如此,当玩家解决谜题,离开区域后,由于摄像机已经处于移动中,将能够缓解摄像机移向下一个区域的加速感。

还有一种利用摄像机营造戏剧感,吸引注目的方法,即利用玩家触发来出发预设的摄像机运镜。《我是东巴》(Tomba!)是早期 PS 2.5D 游戏中颇为有趣的一款。通常摄像机会笔直向前拍摄,但当玩家执行某些操作后,如攀爬或在不同深度间移动时,它会稍微偏向另一个角度。当摄像机角度偏移时,能够让玩家感受到独特的操作感,也提供了更开阔的前方视野。

点击图片查看 GIF 动图


Tomba! © 1997 Whoopee Camp

 

运镜聚焦(gesture-focus)* - 游戏机制触发的摄像机运镜

* 根据角色和游戏状态来移动摄像机

双向正前聚焦(dual-forward-focus) (水平.)

平台捕捉(platform-snapping)

摄像机窗格(camera-window) (垂直.)

游戏玩法触发的运镜有许多不同的运用方式——各种各样的运动类型、运动轴线、反馈和预判模式,数量不胜枚举。我认为一旦涉及到由玩家的驱动行为触发的摄像机行为,还是依然需要从头开始设计。

在《阿兹特克》这款即将面市的格斗游戏(译者注:这款游戏已经面市,此处是指演讲时间)就可以充分地观察到运镜聚焦(gesture-focus)这种技巧所具有的巨大潜力。它通过缩放(前后移动)或倾斜等多种运镜手法来增强画面张力,凸显近身遭遇或最终一击等战斗场面。

点击图片查看 GIF 动图


Aztez © [Release TBA] Team Colorblind

 

运镜聚焦(gesture-focus)*

* 游戏机制触发的摄像机运镜

固定位置(position-locking) (垂直.)

平滑插值(lerp-smoothing)

缩放适应(zoom-to-fit)

在世嘉经典动作游戏《怒之铁拳》中,多数情况下,摄像机和其他标准的动作游戏一样,按单向摄像机窗格机制(one-sided camera-window)运镜。然而,在某些特定情况下,摄像机会从玩家所在位置移开,用来表现额外的叙事或演出内容。

点击图片查看 GIF 动图


Streets of Rage © 1991 Sega

 

电影式路径(cinematic-paths) - 摄像机暂停平常的功能,來呈现「画面外」的背景叙事

基于区域的锚点(region-based-anchors)

摄像机窗格(camera-window)*  

* 标准横版闯关动作游戏的行为: 单向摄像机窗格(camera-window), 仅仅在战斗之间有效

这套系统十分强大,能够让设计者在不打断游戏流程的情况下提供电影式的间断,犹如一个完全融入游戏的过场动画。

在 The Behemoth 发布的《外来原始人》(Alien Hominid)和《城堡毁灭者》(castle crashers)中能够看到很多精妙的电影式路径(cinematic paths)运用。在很多不同的条件下,游戏会暂停,摄像机会给出 Boss 或特定场景元素的特写。这样做无需转移玩家的注意力就达成了两项目标:不仅完成了叙事,也指引了游戏玩法。

点击图片查看 GIF 动图


Alien Hominid © 2004 The Behemoth

 

基于区域的锚点(region-based-anchors)

电影式路径(cinematic-paths)

摄像机窗格(camera-window)*  

* 标准横版闯关动作游戏的行为: 单向摄像机窗格(camera-window), 仅仅在战斗之间有效

多焦点摄像机

聚焦多个对象

我们已经见识到,即便是呈现单一的聚焦对象,也是相当有挑战性的任务。那么如果我们需要表现多个玩家或目标呢?

《圣铠传说》(Gauntlet)是一款开创性的地牢探索游戏,就当时而言,它所运用的技术和设计十分高明先进。针对同屏存在多名玩家的情况,它将摄像机焦点简单地固定到了他们的平均位置上。然而,除非玩家在同一方向上移动,否则当他们到达屏幕边界后就没人能移动了。实际上,如果有玩家中途离开却将他的角色留在游戏之中,其他玩家的角色都会被这个角色拖住无法离开屏幕边缘。

点击图片查看 GIF 动图


Gauntlet © 1985 Atari Games

 

平均位置(position-averaging) - 聚焦所有关联目标的平均位置

《侍铳》(Samurai Gunn)运用了类似的手法,但它有意采用极端的设计方式来加强纷乱热烈的氛围:借助频繁出现的画面暂停和淡出来强化视觉效果。由于玩家频繁的死亡重生和传送,他们的平均位置也会突然地发生变化,导致整个画面焦点随时在切换。不仅如此,这款游戏甚至没有使用基本的边缘捕捉机制(edge-snapping),以允许画面可以超过场景的边界。这样的设计有助于营造游戏气氛,但却牺牲了视觉舒适感,对游戏的旁观者来说尤其如此。本作中,由于屏幕边缘不会阻挡玩家角色,因此走出屏幕是一件很自然的操作,尽管这种设计很少在其他游戏中出现。

点击图片查看 GIF 动图


Samurai Gunn © 2013 Teknopants

 

平均位置(position-averaging)

平滑插值(lerp-smoothing)

边缘捕捉(edge-snapping)*

* 本作为了营造游戏氛围,边缘捕捉机制必不可少,这样屏幕就一直处在运动之中

在经典的老版《街霸》及其续作中,我们也能看到其他方案的运用。多数情况下,它使用水平的摄像机窗格(camera-window),尽可能保持画面稳定。如同其他使用摄像机窗格(camera-window)的游戏一样,当玩家接触到窗格边缘就会推动窗格移动。在该系列的游戏中,当窗格移动时,会推动窗格内的其他玩家角色一起移动,以保持所有的玩家都在同一窗格内。只有玩家反向推动窗格时,画面才会被卡住不动。

点击图片查看 GIF 动图


Street Fighter © 1987 Capcom

 

摄像机窗格(camera-window)* (水平.)

* 当玩家接触窗格边缘时推动摄像机位置

任天堂的《超级明星乱斗》(Super Smash Bros)也是重新定义多人游戏的系列作品。系列的第一作就以及拥有了开创性的摄像机系统设计。本作会以所有玩家的平均位置为焦点,但会依据玩家的距离缩放画面大小来容纳所有玩家。

点击图片查看 GIF 动图


Super Smash Bros. © 1999 Nintendo (HAL Laboratory)

 

缩放适应(zoom-to-fit)

平均位置(position-averaging)*

* 技术上为关注目标的平均位置

平滑插值(lerp-smoothing)

即使到今天,这套摄像机系统效果仍然十分不错,在《火箭火箭火箭》(ROCKETSROCKETSROCKETS)中它实现了设计者的两个目标:其一,让所有玩家都呈现在同一画面上,其二,引导玩家靠近画面中央进行近距离机战。

点击图片查看 GIF 动图


ROCKETSROCKETSROCKETS © 2014 Radial Games

 

缩放适应(zoom-to-fit)

平均位置(position-averaging)

正如我们之前在《不再孤单》(Never Alone)看到过的那样,无论是单人游戏还是多人游戏,你都可以选取一组场景元素取平均值或加权平均值出为摄像机焦点。

点击图片查看 GIF 动图


Never Alone © 2014 Upper One Games

 

平滑物理(physics-smoothing) 平均位置(position-averaging)

电影式路径(cinematic-paths)

基于区域的锚点(region-based-anchors)

线索聚焦(cue-focus)

《洞窟冒险》(Spelunky)则采用了另一种解决方案来规避焦点位置冲突的问题:一次只聚焦一名玩家角色。当这名掌管白色旗帜的聚焦玩家角色死亡后,摄像机会转而聚焦另一名玩家,这实际上是游戏机制的一部分:只要玩家掉出画面外时就会开始死亡倒计时。

点击图片查看 GIF 动图


Spelunky © 2008-2012 Mossmouth (Derek Yu)

 

固定位置(position-locking)

平滑插值(lerp-smoothing)

[手动控制(manual-control)*]

* 按上下键来查看额外视野

手动控制

为玩家提供额外的摄像机控制方式

在某些情况下,设计师还需要基于玩家的操作来提供额外的视觉信息。将操作和摄像机画面绑定就是一种可行的策略。

依然是《超级马里奥世界》(Super Mario World)这款游戏首先使用了额外的摄像机控制技术。按下肩键 L 和 R 就可以将摄像机推向相应的方向。这种看似聪明的设计却经常被评价为鸡肋,其实吧,多数玩家甚至一开始都没注意到有这个功能。

点击图片查看 GIF 动图


Super Mario World © 1990 Nintendo

 

基于区域的锚点(region-based-anchors)

平台捕捉(platform-snapping)*

摄像机窗格(camera-window)* (垂直.)

* 可以运用之处

双向正前聚焦(dual-forward-focus)*

* 阈值式触发

手动控制(manual-control)* (水平.)

* 控制器提供额外的视野

《超级马里奥世界》的问题在于,它添加的摄像机手动控制方式并不怎么直观,和普通的移动控制之间毫无关联。

这方面做得出色的例子则可以举《星噬》(Osmos)这款游戏。虽然并不算标准意义下的卷轴游戏,但本作调整摄像机的方式要含蓄自然得多。无论是在桌面端版本中使用的鼠标滚轮,还是平板端版本使用的缩放手势,都在操作和摄像机运镜间提供了更清晰的连接。

点击图片查看 GIF 动图


Osmos © 2009 Hemisphere Games

 

固定位置(position-locking)

手动控制(manual-control)*

* 通过鼠标滚轮/触屏手势来缩放画面

前文介绍过的《爵士兔2》中,玩家能够额外控制摄像机在垂直方向上移动,这与摄像机在角色间快速横向移动的行为能够形成对照,因此这种操作也更容易被预先判断到,显得清晰明了。

点击图片查看 GIF 动图


Jazz Jackrabbit 2 © 1998 Epic Games

 

平滑插值(lerp-smoothing) (垂直.)

目标聚焦(target-focus) - 摄像机会依据玩家操作输入聚焦到目标所在的方向

[手动控制(manual-control)*]

* 手动控制为 目标聚焦(target-focus)提供额外的参考信息

如果手动控制摄像机确有必要,记得重复利用那些已有其他效果的控制方式,以《洞窟冒险》(Spelunky)为例,埋头或抬头看的操作也会相应调整摄像机的位置。

点击图片查看 GIF 动图


Spelunky © 2008-2012 Mossmouth (Derek Yu)

 

固定位置(position-locking)

平滑插值(lerp-smoothing)

[手动控制(manual-control)*]

* 使用上下按键获得额外的垂直方向视野

摄像机震动

完全失控

正如我们在这些游戏中看到的那样,清晰明了的摄像机控制设计能够让玩家更投入地沉浸到游戏中的虚拟世界。这句话反过来说也同样成立:我们能够利用摄像机与画面的震动,暂时切断摄像机和玩家操作的关联,形成一种画面张力,暗示出现了一种比玩家更强大有力的事物。

在这次研究中,我很想一探究竟,搞清楚究竟是那一款游戏首次使用了摄像机震动技术。唔。结果毫无意外发现它来自另一款宫本茂的作品,1983年诞生的《水管玛丽》。不过大概是技术规格或时间限制方面的原因,这款游戏并没有在所有的版本中都使用这项技术。


点击图片查看 GIF 动图


Mario Bros. © 1983 Nintendo

已经有数不胜数的游戏使用了屏幕震动(或画面暂停,也能取得类似效果)这项技术,尤其是 Vlambeer 这些年推出的一系列游戏。Vlambeer 的游戏设计师 JW 曾经专门谈过摄像机震动技术,有兴趣的读者可以去查看演讲的视频。


点击图片查看 GIF 动图


Super Crate Box © 2010 Vlambeer

自定义摄像机

融会贯通:为自己的游戏量身打造合适的摄像机系统

制作一款游戏所需的专注与细致可谓浩瀚。同游戏其他系统的设计一样,摄像机系统的设计也需要投入大量的心思。在打算草草使用默认的目标锁定摄像机之前,最好仔细想一想,对你的游戏来说,怎样的摄像机系统才是最理想的。

我在开发自己的游戏时遵循了下面这些基本的原则,效果很不错,它也是我进行这次研究的显著原因。

  • 分析自己的游戏有哪些独特而显著的特征;
  • 观察其他游戏在处理类似问题时采用的方案,从中汲取灵感;
  • 实现自己的解决方案。

显然,这套原则适用面并不仅限摄像机系统的设计。游戏开发的其他部分:美术,音效,技术实现等都可以考虑应用这项原则。

Taito 出品的《影子传说》(The legend of Kage)可谓将摄像机系统与游戏机制结合的绝佳范例(有意思的是,本作采用极其少见的从右朝左前进的卷轴方式)。读者注意留意本作使用的水平摄像机窗格(camera-window)。很多惊心动魄的战斗会发生在树上,因此摄像机窗格(camera-window)的宽度也刚好定位树木的宽度,这样就能够避免战斗中出现摄像机左右晃动的现象。

点击图片查看 GIF 动图


The Legend of Kage © 1985 Taito

 

固定位置(position-locking) (垂直.)

摄像机窗格(camera-window)* (水平.)

* 窗格大小基于树的宽度

《忍》(Shinobi)则是另外一款将既有系统融入游戏设计的经典范例。由于角色跳跃高度甚高,设计者选择了一个纵向很高的摄像机窗格,几乎与整个画面同高。并且,还应用了位置捕捉机制(position-sanpping)来持续将玩家角色拉回画面正中。

点击图片查看 GIF 动图


Shinobi © 1987 Sega

 

position-snapping (垂直.)

摄像机窗格(camera-window) (垂直.)

固定位置(position-locking) (水平.)

静态正前聚焦(static-forward-focus)

《刺猬索尼克》(Sonic the Hedgehog)是一块快节奏的多轴平台游戏。为了始终保持索尼克居于屏幕中央,让玩家看清快速迎面而来的东西,本作选择的摄像机窗格宽度狭窄,高度则比小跳导致的垂直位移略高一点。由于也运用了平台捕捉(platform-snapping)机制,角色落在平台上时就能重新调整垂直方向的位置。

高速移动下频繁推动摄像机会有时让画面略显不协,尤其是在环形跑道或者快速下坠的情况下。然而,由于采用了比较狭小的摄像机窗格,玩家角色从加速到碰触窗格边缘获得的速度有限,因此也不会导致太剧烈的摄像机突然加速。

点击图片查看 GIF 动图


Sonic the Hedgehog © 1991 Sega

 

平台捕捉(platform-snapping)

摄像机窗格(camera-window)

静态正前聚焦(static-forward-focus)

手动控制(manual-control)

如果需要开阔的视野,又不限定运动方向,那么很自然就会考虑双向正前视野机制(dual-forward-view)。当角色转向时,有好几种方法可以将摄像机焦点吸附到预想的锚点处。《洞窟物语》(Cave Story)这方面相当出色,摄像机重新定位的速度基于玩家角色行走速度计算(实际上等于摄像机正常移动速度加上玩家角色行走速度)。《龙凤神偷》中则运用了略有不同的手法,只有角色移动时摄像机才会随之移动。画面相对静态的潜行游戏允许这种设计,但完全不适合像《洞窟物语》(Cave Story)这样满屏怪物的平台游戏。

点击图片查看 GIF 动图


Cave Story © 2004 Studio Pixel

 

固定位置(position-locking) (垂直.)

双向正前聚焦(dual-forward-focus)

平滑物理(physics-smoothing)

手动控制(manual-control)*

* 右摇杆提供额外的视野范围

《菲斯》(Fez)中并不会有怪物大军涌向玩家,所以使用基本的摄像机窗格(camera-window)就足矣。但这款游戏的开发者却巧妙地结合游戏的独特设计,在《菲斯》中重新赋予这项经典的摄像机设计技术不一样的细节。次元转换常发生在拐角处,因此后方的视野常常反而比前方更加重要。不仅如此,摄像机系统还会保证完成场景旋转后尽可能为玩家提供一个开阔的前方视野。

点击图片查看 GIF 动图


Fez © 2012 Polytron Corporation

 

摄像机窗格(camera-window) (水平.)

* 在维度切换时也强制将角色保持在摄像机窗格内

固定位置(position-locking) (垂直.)

平滑插值(lerp-smoothing)

基于区域的锚点(region-based-anchors)

手动控制(manual-control)*

* 右摇杆提供额外的视野范围

《滴滴动力》(Vessel)则为其他基于房间的解密游戏展示了一份完美的设计方案。针对游戏画面(或称房间)使用的区域聚焦(region-focus)机制将与谜题有关的场景要素清晰直观地呈现给玩家。额外的玩家可控的画面偏移则增强了操控感,削弱了在区域间切换时摄像机加速造成的不适,总而言之这款作品将实在的操控和预设的画面结合得十分完美。

点击图片查看 GIF 动图


Vessel © 2012 Strange Loop Games

 

区域聚焦(region-focus)*

* 摄像机位置基于区域锚点,但随着玩家角色移动会有微小变化

基于区域的锚点(region-based-anchors)*

* 不同区域拥有不同锚点位置和缩放因数

线索聚焦(cue-focus)

平滑物理(physics-smoothing)

电影式路径(cinematic-paths)

而我们之前提到过的《交易者》(Swapper)则通过影视化路径(cinematic-path)技术营造出了独特的氛围,煞费苦心地达成了向玩家传达故事情节的效果。这款游戏竭力让玩家始终沉浸其中,让玩家体验戏剧张力的同时不至因场景切换而打断游戏体验。

点击图片查看 GIF 动图


The Swapper © 2013 Facepalm Games

 

目标聚焦(target-focus)

平滑物理(physics-smoothing)

基于区域的锚点(region-based-anchors)

线索聚焦(cue-focus)

电影式路径(cinematic-paths) 

我的游戏 Mushroom 11

我所选择的摄像机系统

Mushroom 11 所使用的摄像机系统的设计基础,是以区域划分的、一丝不苟的摄像机引导。每一个游戏关卡都由若干个不同区域组成,每个区域都拥有限定的摄像机运镜范围,也拥有预设的缩放尺寸(或者叫视野范围设定,即FOV)。


Mushroom 11 © [Release TBA] Untame

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

基于平滑因数

区域有严格的顺序编号,摄像机会交给那个位于编号数字最大的区域的蘑菇碎片来控制。无论碎片多大,即便只有一个胞体大小的碎片飞入编号数字更大的区域,摄像机都会选择跟随那块碎片移动。

点击图片查看 GIF 动图


Mushroom 11 © [Release TBA] Untame

 

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

基于平滑因数

细心的玩家会注意到,画面边缘会清除掉落在后方蘑菇胞体,这使得摄像机的精确控制愈发关键。上面的例子中可以清楚地看到,画面会留出足够空间来解决谜题,接着,当菌体抵达新区域时,会让摄像机加速跟上。为了达到这种效果,必须清除掉落在后方碰触到屏幕边缘的菌体碎片。

区域会分成两个类型:一种以蘑菇胞体平均位置主导(Average-Oriented),一种以最前方的菌体为主导(Progression-Oriented)。区域类型会指示摄像机聚焦哪个目标,确定聚焦位置后,摄像机便会在预设范围内移动,朝它靠近。

以平均位置主导

某些区域使用所有蘑菇胞体的平均位置作为摄像机焦点,这样自然而然摄像机会聚焦在更大块的蘑菇碎片上。这些区域要么会要求玩家同时控制多个蘑菇碎片,要不就是前进方向并非唯一。以平均位置主导的设计主要适合用于封闭的谜题上,这种情况下蘑菇碎片间的间距不会很远(否则就被会屏幕边缘清除)。

点击图片查看 GIF 动图


Mushroom 11 © [Release TBA] Untame

 

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

基于平滑因数

以最前方位置为主导

如果是要求径直前进的区域,采用以最前方位置为主导的设计会更加自然。无论合适,摄像机焦点都会落在最靠前的蘑菇碎片上(依靠区域预设的线性顺序来判断前后),而落在最后的碎片则会被忽略掉。这时我还会采用静态正前聚焦机制(static-forward-focus),它也恰好适合这样的区域。

点击图片查看 GIF 动图


Mushroom 11 © [Release TBA] Untame

 

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

基于平滑因数

线索

此外,我还会经常将线索聚焦(cue-focus)与前述两种区域的摄像机系统配合使用。依据各个区域的不同,某些场景元素或生物可以作为摄像机的吸引子使用,并且还能附加上专门或动态的参数。正如下图所示,Boss 战中就灵活运用了这种手法。

点击图片查看 GIF 动图


Mushroom 11 © [Release TBA] Untame

 

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

基于平滑因数

平滑处理

本作结合预判聚焦机制(projected-focus)和物理平滑机制(physics-smoothing)来实现平滑处理。基于蘑菇的速度来作为平滑处理的参数效果十分不错:当玩家角色快速移动时,摄像机会较为猛烈地加速;而当玩家角色轻柔地切割菌体时,摄像机的运镜也十分柔和。

由于这款游戏中没有出现(可能会造成画面瞬停的)跳跃操作,因此很自然便使用了预判聚焦(projected-focus)机制。预先将摄像机移向菌体或菌体平均位置在几毫秒会出现的位置,能够让摄像机的移动显得更加精准,符合玩家期待。

点击图片查看 GIF 动图


Mushroom 11 © [Release TBA] Untame

 

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

基于平滑因数

一旦定义好所有这些摄像机行为,这套系统就能有条不紊地处理多块动态变化,大小速度不一,会在不同区域间快速移动的蘑菇胞体。

点击图片查看 GIF 动图


Mushroom 11 © [Release TBA] Untame

 

基于区域的锚点(region-based-anchors)*

* 每个区域预设摄像机路径和缩放因数

平均位置(position-averaging)*

静态正前聚焦(static-forward-focus)*

线索聚焦(cue-focus)*

* 仅限特定区域

预判位置(projected-focus)

平滑物理(physics-smoothing)*

* 基于平滑因数

术语表

自动滚屏(auto-scroll) 画面自动滚动,玩家无法控制
摄像机路径(camera-path) 在关卡中使用预设好的摄像机前进路径
摄像机窗格(camera-window) 当玩家接触窗格边缘时推动摄像机位置
电影式路径(cinematic-paths) 摄像机暂停平常的功能,來呈现「画面外」的背景叙事
线索聚焦(cue-focus) 画面焦点会受游戏世界中的提示线索影响(例如引起注意的物品)
双向正前聚焦(dual-forward-focus) 玩家朝向会改变摄像机焦点,这样可以确保前进方向上保有足够宽广的视野
边缘捕捉(edge-snapping) 对摄像机位置设置硬性的边界
运镜聚焦(gesture-focus) 游戏机制触发的摄像机运镜
平滑插值(lerp-smoothing) 运用线性插值法不断缩减摄像机与移动角色的间距
平滑物理(physics-smoothing) 摄像机是具有物理属性的实体,会持续靠近聚焦的目标
平台捕捉(platform-snapping) 仅当玩家着地时摄像机才会捕捉玩家位置
平均位置(position-averaging) 聚焦所有关联目标的平均位置
固定位置(position-locking) 摄像机锁定在玩家角色所在位置
位置捕捉(position-snapping) 持续调整窗格位置,始终不断地将摄像机拉回玩家角色所在位置。
预判位置(projected-focus) 摄像机跟随玩家的预估(推测)位置来移动
基于区域的锚点(region-based-anchors) 不同区域(甚至可能处在同一关卡中)摄像机的位置和焦点的锚点也会有所不同
区域聚焦(region-focus) 聚焦区域锚点,同时也参考玩家角色位置
加速拉进区域(speedup-pull-zone) 在玩家越过摄像头窗口的边界时,让摄像头加速追上
加速推动区域(speedup-push-zone) 当玩家处于推动区域内时,让摄像头逐渐加速到玩家角色的速度
静态正前聚焦(static-forward-focus) 为游戏主要的前进方向分配更开阔的视野空间
目标聚焦(target-focus) 摄像机会依据玩家操作输入聚焦到目标所在的方向
缩放适应(zoom-to-fit) 缩放或移动摄像头来特写相关联的要素

近期点赞的会员

 分享这篇文章

indienova 

indienova - 独立精神 

您可能还会对这些文章感兴趣

参与此文章的讨论

  1. eastecho 2016-10-09

    好文啊!!!!强烈推荐!

  2. ayame9joe 2016-10-09

    拖了半年的稿子弘扬一天就搞定了!

  3. OTAKU牧师 2016-10-09

    深度好文,就看这海量的gif案例,内牛满面。

  4. moonagent 2016-10-09

    好文,有不少干货。

  5. samael65535 2016-10-09

    有个这个视频也可以参考的看下
    http://www.bilibili.com/video/av5199528/

    • L_eve 2016-10-20

      @samael65535:可惜我找不到视频里面的例子下载

  6. Aikesi 2016-10-09

    很棒的文章!

  7. 高鸣 交典创艺 2016-10-10

    终于有了好排版的完整中文版

  8. Cloudmy 2016-10-10

    受益匪浅

  9. 周愚 2016-10-10

    顺带一提Wonder Boy这款游戏看起来很像冒险岛,因为冒险岛最初是Wonder Boy的跨机种移植作(街机->Famicom),结果反而是移植作名气更大了,两个系列之后也再没有交集……

  10. 林可 2016-10-10

    很久前在论坛上看过的帖子了。非常棒

  11. 魔法象 2016-10-11

    非常棒!!慢慢看,慢慢看,不过我觉得太长的文章其实可以考虑分上下发的

  12. 好文啊~~翻译和排版辛苦了~~~

  13. tvsstv 2016-10-11

    收获颇丰

  14. 咸蛋oye 2016-10-12

    这文章太棒了!~~受益匪浅~~~~感谢!

  15. Pea 2016-10-15

    真心好文,教科书。

  16. Wizcas.陈小一 2016-12-10

    之前读过繁中版本,谢谢indienova的完美版~

  17. wilhantian 2016-12-16

    超级好!

  18. niuyanben 2017-02-20

    @samael65535视频中有事例下载?

  19. yellow 2017-03-01

    挖个坟头,有些激动,我要把游戏换成2D横板的。

  20. 对,我就是周洋 2017-08-28 微信会员

    你可以自行去查看 SmoothDamp 方法(此处指 Unity 引擎提供的API)的实现细节,或者综合考虑当前速度和目标距离来设计自己的实现。

    在哪里可以查看这个的实现细节?

  21. 希望能解析下《Kingdom》的摄像机机制~

  22. trick 2018-07-04

    非常赞,gif非常易懂又有深度,有所收获

  23. Nova-6u0zzW 2022-08-09

    收益匪浅

您需要登录或者注册后才能发表评论

登录/注册