《彩虹坠入》如何用视觉元素增加游戏剧情表现力？

导言：一段好的画面给予我们的印象远远要比一段文字来的更加深刻，所以想要做好一个游戏，如同拍一部好电影，需要好的剧本，好的演员，好的材料背景以及好的后期，这些元素缺一不可。我们将一款游戏当做电影一样在制作，如何用最有效的视觉表现来呈现玩法、剧情，促使整个故事更加有张力，让游戏世界观有一个完整的构架，希望本次的分享，可以给大家带来一些启发。（注：《彩虹坠入》案例分析在文章末尾）

以下为分享全文：

我们先试想一下：两个人坐下来，A对B讲一个故事，在讲这个故事的过程中，通常他们脑中产生的画面是不一样的。如果将讲述的故事情节还原成一段流动的画面，并让所有人在这段画面中感同身受，那么听一个故事是时间的艺术，而看一个画面是空间的艺术，电影或者是游戏其实是结合了两者。如果把这种大段的文字版的游戏方法说明变成一段画面去阐述，它即便不饱满或者不成熟，观众也会被画面所吸引。

电影的视觉元素

当我们想要表达故事剧情的时候，具体要怎么做？首先，故事是有高低起伏的，而视觉也可以达到同样的目的。视觉结构支撑故事结构，也就是说我们想要把故事讲完整，让观众或者玩家能够从中体会到情感的话，视觉结构承担了很大一部分比重。那么视觉结构是什么？视觉的结构由很多的元素组成，像搭建积木一样将很多的元素搭建起来，便形成了一个可以配合讲故事的视觉结构。


首先我们先来了解电影的视觉元素，视觉元素分为空间、线条、形状、颜色、影调、运动和节奏。

1空间


空间的分类比较简单，我将其定义为五类：深度空间、平面空间、有限空间、模糊空间和打破边框限制的开放空间。本次我们主要分析三类基本型的空间形式，以电影《布达佩斯大饭店》为例，我们对以上三张图的空间表现形式进行分析。

第一张图，平面空间：在人物对话的时候，大部分的导演都会用平面空间来突出人物主体，让观众看到更多的人物表情以及细节对话。

第二张图，介于平面空间跟深度空间之间，就称它为有限空间。

第三张图，深度空间：深度空间的定义是将三维世界呈现在二维屏幕上产生的错觉。它的好处是可以把更多焦点聚焦在整个场景里，而不是人物。我们应该如何去打造一个深度空间呢？

深度空间的打造


透视，它分为一点透视、两点透视和三点透视。

在电影《发条橙》中，影片中的一个经典镜头运用了一点透视：四个主角每每在深夜里出洞作案的时候，画面中的一点透视场景就会把观众带到一种强烈的视觉冲击情境当中，预示着接下来会有不好的事情发生。


电影《历劫佳人》，整部电影都是深度空间的典型范例，如图展示的是两点透视的一个场景，画面中2个消失点带来视觉上的多样性、透视感和极强的展示性。


电影《水形物语》中，运用的是三点透视，如图，导演在叙事过程中描述主角工作的环境特征，是通过一幕幕有多点透视的深度空间，使观众在观看时，能够理解和认识到主角工作的地方是个很特别，巨大的试验室。这就是三点透视带来的强烈的视觉冲击，对比出人物在场景中的渺小。


色彩，这是电影《疯狂的麦克斯》中的截图，画面中前景是暖色，背景是冷色，虽然没有太强的透视，但是空间的深度可以明显地拉出来。


重叠，它相比前两个关键词在概念上显得有点模糊，它是依靠着一层层叠加，把深度空间显现了出来。电影《历劫佳人》中的三个女性角色，通过人物的重叠摆放，与前面的男性角色形成对比，同时打造出了一个有效的深度空间。


细节，细节的定义是远和近的物体细节程度不同，也是一个塑造深度空间的重要线索。

电影《荒野猎人》通过前景人物跟后景人物的对比，在对焦的细节上也形成了一个明显的区分，营造了一个深度空间。摄影中就是相机的一点和多点对焦的应用，人物前景的发丝跟皮肤的细节，包括枪上的细节跟后景的人物都形成了一个很好的一个虚实对比，这样就把空间打造出来了。


比例，比例关系就是位置的大小的对比构成了一个深度线索。例如《星球大战》中的大小飞船，通过其大小的对比，背景和前景的对比，拉出一个深度空间。


位置，由于生活习惯中我们认为位置比较低的物体会比较近，固定画面中，位置的高低也会呈现出一个深度线索。

小结：通过这些深度线索我们可以很精准地打造一个有效的深度空间，同时，一定要包含所有的要素，才可以让我们精准、不会犯错地去打造一个深度空间。如果没有充分深度线索的话，即使在很深的一个空间里拍摄，也有可能看起来平面。

平面空间与有限空间

平面空间，强调的是二维屏幕的平面感，表达的是深度空间的对立面。在空间中，没有透视比例关系，颜色类似，同时相互之间没有物体重叠，也不需要位置的远近距离，就是打造平面空间最合适的办法。


《花样年华》中2个主角对话的一个场景，就是展示了有限空间，导演为了使画面变得更平面，在圆形花纹的背景墙侧面特意加了一面镜子，镜子反射导致了墙上的圆形花纹也变得平面了，美术设计刻意的调配也有效地打造了一个平面空间！


电影《花街杀人王》是有限空间的典型代表，如下图中的外景，由于它尽量避免了物体的侧面，物体几乎都是正面排列，房子是平面，车头平行地面朝镜头，整个画面没有透视线。虽在表现的是室外场景，但它的平面感还是非常强烈。有效地削弱画面的透视线，会让整个场景的线条变得非常统一，这也是一个有效的平面空间。

小结：空间的深度是一个重要的视觉元素，很多人说深度空间比较有趣，平面空间比较无聊，这其实只是比较简单化的认知，实际上是强弱的对比关系，深度空间比较强，而平面空间比较弱。

如何使用对比与相似，是我们使用各种元素最重要的课题，使用什么样的空间最容易体现画面感，会由剧情来决定。

例如拍一个情景喜剧或者温馨的爱情剧，观众需要把焦点放在角色本身，来关注他们的互动，我们就可以更多地去使用平面空间和有限空间。再比如拍一个动作戏，焦点在于动作而不是在于细微的语言，那么就需要一个极强有力的深度空间来表达视觉冲击力。

总而言之，拍一个电影桥段或者制作一个有叙事的游戏关卡，如何灵活运用这些空间是美术、策划和程序前期都需要认真考虑和讨论的。

2线条


本文中，我们分析的主要是画面中的线性关系，而不是所有的线条。比如，眯着眼睛看上图，就能发现画面里的主要线条：横线、竖线、斜线以及曲线。

横线是比较和平、祥和和安稳的感觉；垂直的竖线象征着坚强、庄严和有力；斜线体现一种紧张与恐怖或者是快速动感的感觉；曲线是富有动感的舒缓开阔的，经常表现一些柔和的自然主题或是一些户外的场景。线性变化是很丰富的，我们进行分类，是为了简化用不同的线性来表达不同的故事叙事的效果感受。


电影《罗曼蒂克消亡史》里，上图中明显的平行横线，暗示着平静中蕴含着杀机。那么，同样在《罗曼蒂克消亡史》中，如下图，整体是一个竖线结构的走向，我们可以明显地感觉到相比起来，竖线会比横线显得画面感更为强烈。



电影《银翼杀手》中的一幕，斜线的构成，试想一下，如果摄影师把镜头此时摆正的话，那么观众就会感受到危险和恐惧。


电影《疯狂麦克斯》中的一个有动感的画面，斜线体现了速度感与紧张感。


曲线会给人舒缓开阔的感觉，通常是表现一些户外的场景，更多是表现自然风光。

3形状


形状是场景中某物体元素的形状，也是画面分割的形状。屏幕一般来说是方形的，我们可以通过画面的元素将它分割成不同形状来帮助叙事，来表达不同的主题与气氛，也可以通过画面中元素的形状来给予观众不同的感受。

例如，电影《我不是潘金莲》，冯小刚导演在电影中，实验性地使用了不同形状的画框来讲述不同段落的故事。这种实验性的电影叙事也经常发生在独立游戏中，当主角回忆到过去的画面时，画框会变窄，当回到现实场景的时候，画面又会重新回归到16:9。


真实世界里，不同的形状会带给人们不同的感受，以汽车为例，方形是比较直接、有序和僵硬，圆形更多代表柔软、自然和灵活，三角形就是冒险、激进和富有动感。按速度分的话，那么就是慢，快一点和飞速。


电影《闪灵》中的一个镜头。画面中的三角形配合叙事，比较有侵略性，给人一种恐怖的气氛。


《星球大战》里，用三角形的形状来强调帝国的侵略性。

小结：线条跟形状作为重要的视觉元素，也是形成画面形式感最重要的部分。绘画最重要的构图就是使用线条和形状去表现一个画面，怎样合理地安排这些线条与形状的对比强度，让它们为叙事服务是我们要深入思考的问题。

4颜色


首先来看颜色的基本元素，它包括色相、饱和度、明度和冷暖。不同的颜色会带来不同的情绪感受，有时候色调的控制可以靠灯光来控制，也可以靠美术设计来控制。

电影《英雄》就用不同的颜色，从不同角度，讲述了一个故事。


电影《爱乐之城》中，电影的色相是由主角的情绪而变化的，例如导演把这个场景定义成了一个蓝色调，后面有四张黄色的纸成为了一个重要的补色，就显得不那么单调。明度不同带来的感受也不同。最后来看冷暖，色调冷暖的不同给人的感觉也会不同。


看过电影《辛德勒名单》的人都知道，场景都是黑白色的，但这个穿红色大衣的小女孩成为整个影片叙事和情绪起伏的关键点，给观众留下深刻的印象。


电影《英国病人》片段中，使用冷暖两个调子来分割不同时空的两个场景，构造出强烈的对比。画面中是二战前的回忆的段落，呈现的是暖色调。


二战爆发之后，现实中的段落是一个冷色调的。

调色板，分为色彩的基本元素以及调色板本身。通常，电影会控制自己色彩的应用，根据剧情，使用相对强烈的一个色彩或者是和谐的色彩。大概分为三种方式：

第一种，通过美术设计来控制色调。电影《芬妮与亚历山大》画面中调合红色为主色调，同时用了少量灰绿色，形成补色对比，使画面保持和谐。


第二种，通过灯光和后期控制影片主色。电影《黑鹰坠落》中就是通过后期较色，使色调统一在一个有质感的灰绿色调当中。


第三种，较为特殊的同时也是一种实验性的手法，比如电影《呼喊与细语》中，使用了极为有限的色盘-红色，这种大胆的尝试，可以给观众更强烈的冲击感和形式感，这也是我们在做独立游戏时最适合尝试以及运用的这东西。

小结：色彩是直接给观众情感冲击的重要元素，我们从色彩中可以直接读出了喜悦、忧郁和悲伤各种情绪，也是电影叙事中区分不同段落的一个重要手段。

很多电影，尤其是动画片在前期会根据剧本详细地去设计不同段落色彩，做出色彩的分镜表，这样可以更精准地透过颜色来控制观众的情绪。

回到游戏的话，比如陈星汉的《风之旅人》中，不同的色彩对比会给用户不同的情绪感受。其实不只是色彩，空间线条等其他元素，都可以结合剧情叙事。

5影调


不同的调子又分为暗调、亮调和硬调。比如上方的三张图，前两张同样是在室外，但调子有明显的区别，第一张是暗调，第二张是亮调，第三张的光线形成强烈对比的硬调。


电影《至暗时刻》里也有很多这种硬调场面，这部电影在前期参考了伦勃朗的油画，这种光线有一种学术的叫法-——伦勃朗光。以前的人看伦勃朗的作品时，会吃惊认为他的画自身会发光，是一种魔术，但其实就是一个黑白对比的过程，电影画面中也运用了这一点，成为了一个有叙事的流动的视觉魔术。

还有同步与非同步，它指的影调布局与镜头主体之间的关系。例如，依仗主体布局光线都非常统一的一个画面，那么重点突出的主体就是人物，我们称之为同步。布局中的主体是模糊的情况下，非凸显的状态，主角是在暗调区里的，那么我们称这个画面叫做非同步。

小结：影调是一个画面的基调，所谓画面的质感，质感就来源于此。想要讲一个什么样的故事，是需要在前期去选择一个合适的影调。

电影的视觉结构


视觉元素都是可以用来搭建的积木，那么怎么用这些积木搭建成一个房子？这些元素看起来比较复杂，但是使用起来比较简单，就是两个东西对比与相似，那么对比可以是电影段落中的视觉元素的对比，也可以是一个画面中不同元素的对比，不同段落视觉上的对比与相似。它和故事的结合形成了整个电影的视觉结构。

对比


《变形金刚》中一个充满着强烈对比元素的画面。空间上，属于充满张力的深度空间，色块是冷暖调的强对比，影调属于硬调，并且画面中包含有各种形状的冲突，给观众传达充满动感的画面。

相似


如图，展示了一副相似元素组成的画面。空间上，属于有限空间，没有透视；色彩上，体现的是一个和谐的统一调；影调是亮调；形状与线条沟通以方形和横线为主。所有这一切低强度的元素构成了一个相似的和谐画面。

对比与相似

我们也可以在同一个影视画面中同时运用对比与相似。

同一画面中的对比与相似的运用可以造成不同的效果，比如引导视线以及并列的元素对比，都可以形成某种剧情的暗示。


《美国丽人》中，把两个角色放在了两个不同空间里，丈夫在前景是一个比较平面的空间，而妻子在背景是一个深度空间，画面上的对比与剧情的展开是一致的，通过两个空间的对比，说明了夫妻二人的貌合神离。充分运用了视觉元素的对比和相似，构成了视觉结构。

电影的故事结构


那么回到故事本身，细分故事结构为开端、冲突、高潮和结局。视觉结构与故事结构相结合的同时，一般会随着剧情的发展，冲突强度也会越来越强。

如何使用之前说到的各种元素：空间、线条、形状、颜色和影调来包装一个故事？如果故事是一个旋律的话，那这些元素则是各种丰富的乐章，我们可以找到一个组合方式，让这些乐章达到一个最好的效果。然后可以把故事情节的张力和视觉元素的强度做一个对比。故事结构上和视觉结构上大概有以下几种不同的关系，就是恒定、渐变、段落、对比与相似。

恒定：北野武的电影，始终保持不急不缓，让这个电影营造出一个冷静的慢节奏。即便是这样强烈的一个杀人的场面，其实也只是角色跟地砖形成了一个斜线，稍微加强了一点点画面的张力。其优点是以一个旁观者的视角去叙事，具有一种冷静的诗意，其实画面表现就像写文章一样用类似的方式叙事来形成一种自己的风格。


渐变：在《冷血惊魂》中，随着一个主角精神越来越崩溃，然后从一个室外的比较亮的比较开放的空间回归到了一个比较暗的压抑的空间里。同时伴随着主角精神越来越崩溃，视觉上也从深度空间变成了模糊空间，主要场景从亮色调的室外场景变成了暗色调的室内场景，所有的物体都是斜着摆放在一个无序的空间，最后打造成模糊空间。这个渐变的过程，视觉强度越来越强，就是一种渐变的视觉结构。


段落：段落式的视觉结构有完全不同的表现，每一段都是断开的、跳跃的。电影《英雄》与《杀死比尔》，故事结构与视觉结构都是段落式的，不同的色彩或影调划分出了不同的段落。


对比与相似的自由应用：电影《疯狂的麦克斯》充分地利用了我们分析的各种视觉手段，对影片的视觉进行精细的控制，将故事淋漓尽致的用视觉表现了出来。


小结：视觉元素对比越强，画面的紧张感就越高，视觉元素对比相似度越高，画面的紧张程度就越低；对比是多种空间的对比，是空间和平面的对比；尺寸的对比是大与小，影调的对比是明与暗。随着故事越紧张，视觉的对比越强烈，最终，为了达到故事的矛盾点，去除演员和音乐之后，我们就需要用视觉结构来营造这样的矛盾和冲突感。

叙事语言与视觉语言


一般一本小说会有自己的语言特点，电影也会有自己的语言特点，那么建立视觉语言的方法，就是用基调、线性线索、色彩主题以及标志性场面。

基调

基调是一个电影的底色，一直伴随着故事叙事，整个电影的基调都是不变的。

线性线索

有些电影会刻意强调一些线形，帮助建立电影的形式感，例如美版的《无间道风云》中大量的出现了这种X形的这种线条，他强调这故事中的冲突与撕裂的情绪。


色彩主题

色彩主题与剧情，如果能有很好的结合，可以帮助观众更快融入剧情。

比如电影《第六感》中，为了强调故事氛围的诡秘，除了红色所有颜色都做了降调处理，而突显的红色象征着鲜血与死亡，这也是导演最初的精心安排。


标志性场景

是指让人记得住的电影场景，剧中重要的场景与主题结合，有一定的象征意义。

比如《疯狂的麦克斯》中的场景，代表了电影中的几个最重要的元素，机械、人性和荒漠。如果大家看过电影的话，应该记得这个在电影中出现多次的场景。


《少年派》这个场景，天空与海面融合在一起无法分离，象征着这段似真似幻的漂流。


案例分析电影-《水形物语》



这是一部幻想爱情电影，概念里的核心元素是水，它整个基调是较暗的蓝绿色，和影片要表现的“水”的主题是契合的。除了少量的外景，电影的剧情发生在三个场景：水底、家和研究所。三个场景所表达的空间依次是模糊空间、平面空间与有限空间、深度空间。几个场景贯穿的整个电影的节奏也是一个逐渐加强的渐进过程。同时，家中场景的暖光，研究所的苍白的人造光源，这样的光线对比也加强了剧情的冲突。电影的最后一幕很好地呼应了全片主题，成为了一个可以让人记忆的经典画面。





小结：《水形物语》中使用的是我们上述提到的“对比与相似”的结构形式，我按照时间顺序记录了电影中剧情冲突与空间、影调、色彩变化的关系，从曲线中可以看到电影的影调和剧情的高度匹配，而电影的空间和色彩，与剧情相关性没那么紧密，但是关键剧情的场景空间还是和剧情同步发展的。

在我们实际游戏研发的工作中，如何把视觉元素和叙事结合，我们也可以按照这样的方法来设计编排，根据剧情去精细调配每一个元素的对比，让游戏的故事和画面最大力度的完美结合起来。

案例分析游戏-《Iris.Fall》


最后说回到《Iris.Fall》这款游戏，如何把视觉元素和叙事结合的理论，应用到实际的项目中呢？作为一款独立游戏，我们团队觉得应该可以去尝试一些不一样的东西，我们选择放弃色彩，希望它能够在众多色彩丰富的游戏中，利用独特的黑白色调和艺术感，夺人眼球。同时，我们也在尝试做一个半开放式的叙事结构，使更多的玩家可以深入沉浸在这个情境之中，而非追求讲一段清晰的剧情。


《Iris.Fall》的剧情，简单来说是一个女孩在神秘的剧院中奇幻历险的情节，但同时也是一个女孩寻找自我的故事。


如果以三段式来看的话，第一幕表达的是玩家进入这个剧院中的种种疑惑，接着去寻找，直到发现主角与整个剧院有某种奇特的联系；第二幕主要说，由于小女孩的不断深入，剧院的黑白世界也慢慢地展开，似乎接近了真相却又坠入了一个幻境；第三幕讲到女孩在幻境中醒来进入了一个剧院的舞台，最终解开了疑惑，并拯救了所有被封印在剧院的灵魂。


在视觉元素的应用上，第一幕情节中，在每一个房间逐步加强视觉元素的强度，让玩家越来越强地感受到视觉冲击，吸引玩家进入这个世界；在空间上，尽量的让每一个场景切换时都有所变化，使流程不会显得太呆板无聊，同时不同的空间也能给玩家带来不同的情绪变化。


而紧接着就进入了一个有限的空间阁楼，这里运用了很多的斜线和三角形设计，暖色的灯光是想凸显房间原先的温馨气氛，希望两个场景在空间的切换时给玩家带来反差，让玩家有眼前一亮的感觉。



第二幕一开始，这两个场景是由横向和纵向的两个深度空间展开的，形状以方形斜线条为主，到了中间则进入了一个圆形的有限空间。第二幕结尾时玩家坠入了一个幻想空间，它是一个平面的书中世界。这个幻想世界其实是一个平面空间，这个场景是我们设计中最得意的一个地方，这两个设计的所有的视觉语言，包括空间影调线条跟形状都截然不同。使书中世界的这种明亮的幻想感与刚刚途径的真实的，暗调的有限空间的场景形成强烈对比，所以才会给玩家这样情感的抒发！


第三幕，视觉变化就变得更加丰富和强烈，空间上也以深度空间为主，影调也是以硬调为主。场景里充满着各种各样的三角形，与斜线各种元素的对比达到了一个顶峰。由于我们的游戏核心是光与影，无论是美术玩法还是剧情都围绕着这中心展开，所以如何区分光影两个世界的视觉元素也是我们需要重点去设计的。


而切换到影子世界后，镜头会往前推，压缩多余内容，变成一个2D平面空间。深度的真实世界和平面的影子世界之间的变化，强调出了我们游戏的主题，也让我们把注意力聚焦在影子本身上，而不至于被其他东西分心。


这张图中间的这个小图相当于是我们的一个地图，它表现了我们大概的一个关卡布局，而美术上我们可以定义出每一个房间的不同结构，让玩家在整个游戏中的体验中都有惊喜。那么在叙事上我们可以直观的把控叙事段落的高低起伏，想象实际游戏中的效果。


那么说到叙事，因为整款游戏是没有对白和文字的，视觉设计是故事叙事中最重要的一个表达部分，我们调整了一些镜头，凸显叙事，让玩家不至于忽略掉重要的剧情，还有另外一种是由于我们是分段式的静态解密，所以剧情缺乏连贯性，所以在叙事上我们也刻意加入了一些2D动画的小剧场做剧情上的一些连接。



结束语

最后回到我们的主题——故事。所有的IP的核心其实都是故事，因为能让人记得住的,有长久生命力的是故事本身。如何打造一个IP，又要让人能有代入感的故事？产生这样的代入感除了故事要精彩也需要美术的多方面配合。那么如何包装一个好故事就是重中之重。

所以回到最初我们所说的，一段好的画面给予我们的印象远远要比一段文字来的更加深刻，做游戏亦然，好的故事剧情包装可以让游戏拥有更加长久的生命，也能够给玩家种下根深蒂固的影响，因而留住更多的玩家。

作者：关菲菲，腾讯互娱NEXT产品中心高级游戏美术师，《彩虹坠入》制作人。
来源：腾讯游戏学院