Who has seen the wind?                                             谁见到过风?
Neither you nor I.                                                       你没有,我也没有。
But when the trees bow down their heads,                 但当树儿低下头,
The wind is passing by.                                               便是风儿经过的时候。

 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

《Braid》(时空幻境)

在我参与进来之前,Braid已经在GDC上露面过两次了。创造者Jonathan Blow在Experimental Gameplay Workshop和独立游戏节上展示了Braid的独特游戏性:基于时间操纵的2D横版解谜游戏,甚至还获得过最佳创意奖。除了还需要一些很微小的打磨之 外,这款个人风格突出的作品已经基本完成,从头到尾玩起来毫无问题。

不过,从视觉效果而言,Braid还显得十分粗糙。那些方块,梯子,钉刺,看起来是那样的“横版解谜过关游戏化”,形貌毫不掩饰其作用,他们的存在目的就是在向玩家直接了当的传递:“我是某某游戏元素”,这样的信号。是的,从游戏的观念出发,Braid也许只需要简单的视觉效果就够了,但是它处处强烈表现出一种信念,那就是它要利用游戏这一媒介传递某种思想。

散布在Braid各关卡开始前的散文般的文字段落,令作者的野心昭然若揭。这些文字片断之中,充满了对友情,悔恨,时间悖论的敏感与沉思。“世界2”揭示 了一种无限制的复现机制——面对所有的错误,你都可以令时间倒转,这意味着不再存在“错误”。显然,这儿映射的是恋人之间油然而生的那种相互间完美的宽恕 之情。

你似乎要匆匆下结论,说这一切听起来太堂皇了。不,并非如此。上述联系,从来都不显得牵强。当我享受这款,一方面向超级马里奥致敬,另一方面又是一个独树一帜,活泼利用其时间控制机制的平台游戏时,这些观念啦,映射啦,都是自然而然的在我脑海中浮现的。

2006年夏天,我以Visual Artist的身份加入到项目中来。我的挑战,不仅仅在于要清晰的展现出Braid世界的机制与行为,更重要的是要帮助作者完成他的叙事意图,随你怎么理 解,逸事也好,技巧也罢,或许还有哲学。总之,这篇文章的目的在于,向大家展示,我如何为一款几乎已经完成开发,特立独行的作品进行视觉效果设计的过程。 还有我所遇到的挑战,以及我们拉拉杂杂的一些想法和工具相关的话题。

不以尝试为耻

起初,Jonathan给我传了一幅游戏截图,让我在上面涂涂画画。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

就是这张啦,以程序员的美术细胞之名,主赞美它。尽管视觉效果十分简陋,但是从功能角度来看,游戏风格已经相当老练。钥匙,开关,楼梯,钉刺,怪物,还有一个穿西服的家伙,全都有了。和最终的发售版本相比,这款游戏从外观上来看,发生了巨大的变化。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这是我的第一次尝试。我故意不去理会截图所框定的元素和调色板。看上去很像超任时代的耀西岛。背景有散射光样的风格,颜色从中央荡漾开去。在e-mail中,我用“飘逸”来形容这种气氛。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

接下来的一张,风格大变样。相当诡异,背景充满了舞者的身影。Jonathan曾用“思索推测型世界”来描述Braid的设定,因此我试图体现出一种空间意义上的抽离感,不想把制作者的意图透露得那么直白。

为什么不看看前景呢,其中有些完全不同的想法,但却与主题更为合拍。(舞蹈家到底有什么关联?不说啦。)我们最终没有采用这个点子,而使用了其他更为巧妙和隐蔽的手法来为故事提供铺垫和陪衬。下面还会详述。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

古代废墟版。(TM).

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

调色板是这幅图的精华所在,粉蓝,豆绿和浅橙,极为优美的混合在一起。我就喜欢这样,当这些弱势颜色相遇时,它们都指望对方来撑场面。

举例来说,粉蓝在这儿并不是真的蓝色,实际上是灰色和同样分量的绿色以及黄色的混合。不过对我而言,从整体上来看,它更像是蓝系颜色。在别的地方有更戏剧化的案例,比如这儿:Joseph Albers 。

经过这一番提炼后,对于怎样表现一个世界,我的新想法又来了。我给乔纳森写信。信中提到,可以创造出一种具有特殊背景的世界,这个背景将会利用视差容纳不同层次的图层。这样一来,当背景元素“飘落”到近处时候,远处的元素就会产生效果明显的景深。

很多游戏都运用过上述手法,但是对我而言,我想尽量避免由此带来的背景元素相互之间的割裂感。因而,我对所有物品的边缘都进行了模糊化处理,并且在边缘通过特别的绘图手法来进行过渡。我们最终采用了这种方法,游戏背景显得像流水一样交汇,但总是带有有一层模模糊糊的感觉。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

啊,色调调节了。我们尝试过多种色调。这张图最引人瞩目的改变是那些叶子。我的想法是让那些叶子“飘落”到屏幕上,然后停留在那里,这会令人像是要仰起头来看背景。

还是那回事,这都是为了“思索推测型世界”,为了模糊空间感而作的努力。不过实际情况却表现得有点太过了,“向你的脸上飘了过来”。

当我把这张概念发给乔纳森后,他对下面中间“挖”出来的那一块大矩形咬牙切齿。这种几何学上的诱惑,显然会让玩家在一款解谜游戏中产生疑惑,他们下意识里会认为所有特别的事物都有存在理由。

如果某些纯粹出于美学意义考虑放置到游戏中的元素和物品,在解谜游戏中让玩家对着它想破了脑瓜子,这无疑是很失败的设计。随着我们进一步开发,我越来越注意到这一点,我明白,千万不能让玩家感到迷惑,让他们分散注意力。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

现在我们一下子跳到了未来,同样的场景,看我们的多次原型设计和最终游戏风格差别有多大!万岁!

“等一等,Hellman,”你没准会想。“你刚刚还在说,你要尽力避免那些纯美学上的事物和元素。但是现在我却看到了你在里面画了一百万棵植物和海藻!这是不是所谓的‘智识上的不诚实’?嗯?”实际上一点也不是。

好玩的地方就在这里,大量的大量的海藻画在这儿,堆在那儿,目的就是为了让玩家一眼扫过去就会产生“一大堆海藻啊”,这样的印象。他们不会再浪费精力和头 脑来思考这堆海藻到底会对过关和解谜起到什么作用。我觉得,为了体现上述概念,这款作品的表现形式相当优雅,这样,你就能集中精力,从你要寻找的事物上学 习到所需的东西。当然,以自己的角度出发,我宁愿从另外的切入点来看待这个问题。

世界2先行

经过这些不同方向的概念图创意之后,到了该进行实际工作的阶段了。我们得花时间抽出一些能实际放到游戏中的组件,看看在游戏中的表现效果如何。乔纳森已经专门为引擎写了一个地图编辑器,它很强大,无论尺寸怎么样,形状如何奇怪的组件,都能拼进去。

他让我挑一张已经完成的概念图。然后把它打碎,打碎到这样一种程度:利用那些碎片可以将游戏中的第一个世界完整的拼合起来。(世界2是玩家在游戏中遇到的第一个世界,因为某种含蓄的原因,没有一开始就告诉他们理由)

我在这儿撰写幕后故事,有时候会给人造成一种错误的印象,人们会把事情想象得更加简单和绝对。就像那些展示进化论的肤浅插图:鱼儿跃出海面,变化成黑猩猩,在变成直立智人,直到最后变成Groucho Marx(美国喜剧演员)的形象。

如果你把那些在千百万年的进化过程中,被残酷淘汰掉的物种统统忽略不计的话,看起来是挺简单的。你在本文中看到的每一张图片的背后都有至少半打的后备,我之所以不能把他们都拿过来,是为了不让文字被图片彻底淹没。但是,这丝毫不能减弱那些未见天日的图片的重要性。

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

无疑,整个制作过程中,也包含了某些更顺畅的阶段。你看这幅概念图,绿色在整体上得到压倒性的充分应用。假定我在创作这幅概念图的时候,心里憋闷得很,这 样可能保险些。岩石构成的石壁犬牙交错,乍一看像某种两栖动物的皮肤,再一看又像是破碎的绿玻璃。现在到了要做出决定的时候了,在我所有的尝试中,到底哪 一份最令我满意呢?我继续在探索。

最终,我坐到了更早期的概念图面前:
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

在下面这幅图中,我对豆绿和粉蓝进行更细节化,更自然的处理。草地现在看起来就更柔软,也更“草”,石头看起来也更加棱角分明。背景是进行抽象后的图案,教堂和房屋的白色轮廓风格特别,线条感十足。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

我长吁了一口气,这样看上去好多了。不过乔纳森告诉我,气氛不对头,和世界2不符。颜色很鲜活,但是不自然,有点过了。世界2是整个冒险的开始阶段,充满乐观精神。在这一大关里,游戏还得向玩家介绍基本的要素呢,包括怎么跳,怎么攀爬。

最重要的是,这儿的时间特技是“倒放”,不附带任何惩罚的,让玩家在任何时候都可以让时间倒流。这是一个非常强调宽恕的世界。艺术风格必须表现出这种宽恕和进取。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这样,就带来了接下来这幅,看她,拥有更“朴素”的颜色:褐色的岩石,蓝蓝的天空。这幅图的大问题在于扰人心绪的背景。我想要在图中增加更多的“视觉亮点”,于是才会有背景中的天然拱门,以及左侧那片渐渐升高的草原。这样一来,三维世界的维度感变得含糊了。

随着我越来越深入到整个项目中,同时也越来越欣赏这款作品,再加上乔纳森的进一步阐释。我开始意识到,增加与游戏性截然相反的视觉亮点,是毫无意义的。需要增强的部分,必然是对游戏性起到支撑作用的。

举例来说,当玩家走到悬崖边缘时,他看到一座梯子从天而降,问题在于,这是悬崖和梯子的双重概念。在上面这张概念图中,背景的右侧将悬崖部分延伸出去了。这就干扰了悬崖概念,给玩家带来的直接印象。

同理,亮黄色的树木也太过于夺人注目了,虽然他并未和任何实质的游戏性相关联。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

与此同时,我仍旧继续探索适合的表现方式,来应用在岩石和草地上。上面这幅图中,我分别用了各种不同的风格来展现岩石和草地的风貌。一步步的,我开始敲定 下来某些成分,并且将这些概念性的图片打成碎片。这些碎片必须可以导入到乔纳森的开发工具中去,随意排列组合,复制粘贴。下面会详述这一点。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这幅图中包含了早期的一些碎片,它们要么就是太大了,要么就是形状太特别了。无法满足开发工具对于灵活性的强烈要求。最后还是保留了这些碎片,不过只能在世界2第一幕的某些特别地点,无法在整个游戏中加以应用。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

一些石崖和石头

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

总是石头和草地,看久了未免让人生厌,我画了些花儿。(顺便说一句,从现在开始,原型阶段的主人公造型,将被Edmund McMillen的设计所替代。当然,最终这两个设计都会在发售版游戏中被另一个设计取代。)
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

增加一个让玩家进出的门。还有一个梯子,当然,最后我们没有在所有地方加以应用。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

一棵树。看起来很像瑞士军刀啊,没错,我就是从中汲取了灵感,画成了这样一棵树。所有的枝丫都是可以移走的碎片,也就是说,可以组成各种不同形状的树。结果呢,根本就没有怎么用到它们!这棵树还是保留了下来,在游戏中,不过没有任何枝条了。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

 

通过这张大图,你会看到,这些碎片最终是如何拼成了一整张地图的。不过,这里看到的仍然是Photoshop下面的mockup(模型)。青草,岩石和花 儿都处在前景的图层中。我另外在背景图层绘制远景。利用PS来制作mockup非常重要,因为只有这样我才能确保所有的组建都能够相互完美融合,就像是一 幅绘画所需要的不同元素。

尽管背景部分的概念设计起步更早,但对于早期的研究方向,我根本不能满意。它们太过卡通化,不够含蓄,线条分明。

自始至终,我都希望能够创造出某种具有抽象感的,二手购买平台特别的画风,要含蓄,不能太过直白的定义一处风景。如果你正在创作的作品,他的深度含义,是确定与模糊的 综合体,你就很难运用不含蓄的手法。特别是在游戏中,你实际上是要赋予各种分离的对象,以明确的功能。总之,我希望她们之间能融会得更加完美。

我当时主要在考虑的就是前景和背景之间的关联问题,以及如何对他们进行显著的区分化。也许前景可以通过更高的渲染度,更强的细节,来和背景拉开距离?

还有,背景的物体可以做的粗糙些,例如有含混不清的边缘。换句话说,越是和游戏性相关联的物件,就越会容纳高度的细节设计。

与游戏性关联较弱的物体,将会融入到周遭的气氛中去,参与美学意义上的构建,但是绝不会干扰玩家对他身边具体的物理环境的观感。

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这幅图片令我相信,我的方向是正确的。在背景中,来自天空的蓝色与来自树叶的绿色相融,树叶的绿色反过来又和天空的颜色交融。在门的上方,一棵树被蓝色的烟雾缭绕所笼罩,这阵烟雾,同时也向右散开……

既要保证即兴风格,又要留下特别的自然笔触,我如何才能将这幅绘画打碎成种种可以复用的组件呢?将整幅画铺开来作为地图的平实背景,尺寸还显得过小。我心目中的背景应当有纵深感,有显著的远近视差效果,远处的物件将会比近处的移动起来更慢。

如果构图元素的边缘通常既不规则,也不明确,我怎么样才能决定哪儿是头,哪儿是尾呢?将手头的各种分离的图案和造型加以组合,创造出具有内在聚合效应,富有视觉冲击力的印象派感觉的绘画背景,对我来说是一个极大的挑战,我接受了这个挑战,并且应战到了项目的最后时刻。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这是在Photoshop中进行编辑的天空碎片。我对边缘用橡皮擦工具进行了羽化处理,因而,即便在相互重叠的情况下,它们之间仍可以保持一种连绵不绝的形态。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

树木

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

所有背景元素都已经为世界2准备好了……

开发者模式

下面让我们看看,那些石头和草皮的碎片如何组合成可玩的关卡。本章将向大家展示乔纳森开发的编辑工具,我用这个工具来搭建Braid的游戏场景。这是实际游戏的一个后台,好像工地,充满了脚手架和其他器械。(声明:按钮上的字太大,因为我们把字体修改后,再也没去管了。)
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这是游戏中,玩家在离开家之后,一开始来到的世界2的第一个场景。一张截图完全不能说明问题,你必须要到游戏中去,才能感受到这个场景的动态效果。(陈灼 译注:在实际游戏中,这个场景美丽的让人心碎,草地上光影流转,空气中雾霭蒙蒙,天上云影变换,太阳光芒萦绕,凡高的《星空》精神在这里有了活的形态。)
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

按下一个秘密按钮,哗,我们来到了开发者模式!Tim(主人公)消失了,各种各样的控制面板出现了,那些开发者才需要看到的组件也现形了。现在我们可以隐藏掉各种不同的元素,那么,就让我们一块一块来解释吧。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

前景:现在我们只打开前景部分,这儿是Tim跑来跳去的场所。注意到了吗?草地和石块不再斑斓,阴影也不再显得那么自然。为什么呢?因为所有的粒子效果都关闭了。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

粒子效果: 现在我们来打开粒子效果模式。在开发者状态下,每一个粒子物件都有一个很大“点和箭头”标志,在正常情况下,玩家是看不见的。对于不太了解粒子发射器是什么的人来说,我解释一下,粒子物件实际上就是将一张或者多张系列图片的组和。

举例来说,有些关卡设定在秋天的森林中,背景是落叶纷飞的景色。我手绘了一批叶子,然后将它们导入进粒子物件。粒子物件会由此创造出成千上百的叶子,每一 个都会旋转和飘零。你可以通过调整各种各样的参数,来决定最终发射粒子的动态效果。基本上来说,在Braid中你看到的风景中,所有能动的东西,只要不是 特别的物件例如角色,都要拜各种不同的粒子效果所赐。

在上图的 下方,你可以发现,这些粒子效果是如何应用到草地上的,他们带来了草地上流转的光华。地表由许许多多单独的草叶构成,往下一点,则是绒毛样的,锯齿状的, 波浪形的粒子效果构成。当所有东西都组合到一起来之后,他们并不会显得太过于夺目,而是会和草地很好的融和在一起,使整体效果看上去更加醒目和活泼。当 然,这也是意图所在。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

背景: 这是背景。红色的线框勾画出一片天空。为了减少空白像素的比率,不对称的图片将会自动的被打碎,填补到各种矩形部分。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

碰撞: 这个部分通常而言都是隐藏起来的,虽然它是游戏中最重要的。整个世界的物理空间范围由此定义,没有了碰撞你的角色一出门就会直接掉到看不见的地底。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

好了,这个关卡竟然就这样诞生了。如此“魔力”到底是怎么产生的呢?我新建了一个文件,将一组事先准备好的图片导入。现在,他们一开始都凑在一起,是我手动把它们排排好,才会让你看到现在这样整齐的样子。

我真走运,我准备的图片一屏都放不下。好在我可以用WASD热键来控制他们,还可以用空格键来让我在当前工作关卡之间来回切换。我可以简单的利用Ctrl+C和Ctrl+V来复制粘帖它们。
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

每块组件都可以缩放,旋转,裁剪和上色。各个组件之间还可以很方便的通过输入数值来决定图层堆叠的优先顺序。 你可以看到,在那块红色的组件下面,又可以三边都是直线的组件。他在那儿的目的就是为了将上面两块大组件之间的缝隙填满。裁剪工具大大提高了组建的易用性。

上色没有听起来那么酷,大部分时候,我只是用它来将组件的颜色加深,对于远离可玩区域的组件进行变暗处理。

对于我而言,到了这一开发阶段,确实是充满了欢乐。度过了一段极其艰苦的艺术创造和筛选过程后,现在我可以随意摆弄这些玩具方块,看看他们组合在一起的动态效果。回想当年,我在红白机上用《挖金子》的自带工具编制地图,啊,我又怎么会料到,今天,那竟成了我的工作!
 

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

不要阿!那都是我辛辛苦苦的工作成果!(上图图说)

Braid的艺术:为不凡的游戏创造卓绝的艺术世界-编程知识网

这下好多了!

Braid 在今年6月(编者按:2008年)最终发售了。谢天谢地,总算世界还能在不情不愿的折衷主义和完美主义之间找到平衡(毫不妥协,这也太理想主义化了)。我们还是花了比预计多得多的时间,但是,我仍旧为最终结果感到无比自豪。我希望你们,能够在游戏过程中,体会到我的良苦用心。

Who has seen the wind?                                             谁见到过风?
Neither you nor I.                                                       你没有,我也没有。
But when the trees bow down their heads,                 但当树儿低下头,
The wind is passing by.                                               便是风儿经过的时候。

文章前后的诗句来自Christina Rosetti的诗作,Jonathan将这两段诗分别放在游戏Credits名单的开头和结尾处。

Gamasutra采访Jonathan Blow文章的地址,其中提到了卡尔维诺小说对游戏的影响,我注意到,在Credits的感谢名单中,第一个就是这位意大利作家。

钟文,Bryan对译文也有贡献。