创造简约视觉风格的 3 个原则

演讲者Dan Cox，做游戏美术已经超过十年，目前是 Blizzard Entertainment 的资深 3D 美术，他也曾在 Capybara Games 以及 Ubisoft 工作过。


他在此讲座分享在创作简约视觉风格的游戏时，需要注意什么，以及如何有意识地运用美学设计，并且如何将这些概念运用在 3D 中。

此篇适合 2D 或 3D 游戏美术设计，能帮助美术设计更了解如何做视觉设计上的选择。


简约视觉风格

过去他参与的制作有拟真的游戏，也有简约视觉风格的游戏，当他在做《Below》这款游戏时，他更多思考如何简化视觉上的呈现，并为了达到最好的效果，需要更有意识地去设计。


当创作简约视觉风格的游戏，我们简化游戏中的视觉元素，呈现经过简化的现实，而不是为了要重现现实。

很多以这种风格呈现的游戏，如《异星探险家》，有时候选用这种风格是由于制作上的考量，因为的确，像在《异星探险家》不需要花那么多的时间在上材质，就可以花时间、花心力在其他制作层面上。讲者 Dan John Cox 认为由于制作时程上的需要而选择做简洁的视觉很好，是很棒的考量，但他在次讲座更想谈的是主题上的考量。制作一个有简约视觉风格的游戏时，可以分成两点来讨论：气氛的呈现，以及抽象化。

气氛的呈现

简约的视觉风格让我们可以更聚焦在情绪、氛围上的表达，《秘境探险4：盗贼末路》呈现一个非常拟真的环境设计，一座雄伟的山；但当我们以简化过的视觉呈现山，水墨使山呈现朦胧、迷蒙的感觉。然而，过度的简化，就又无法表达出感觉，例如一个单纯的三角形，观者无法接收到创作者想要表达的感觉是什么，但只要改变一点点，就又能让观者理解这是一座山，又保持极简的风格。





这是他过去参与的制作《纵横谍海：黑名单》的场景之一，他觉得自己这个场景没有做得很好。这个场景的目的是展现一个混乱、爆炸的感觉，但他制作时的参考图是炼油厂，他想做出那些管线、那些高塔，但在他想呈现真实感的同时，失去了这个场景应该要表达出的情绪及感觉。


事实上，这场景的概念设计图更好地呈现了这个场景的感觉，爆炸、火焰、建筑，讲者说比起他所做的，概念设计图更精准的呈现情绪氛围。简约的视觉风格可以帮助我们更聚焦在要呈现出什么样的氛围、感觉，而不是单纯重现现实。


抽象化

当我们要呈现现实时，我们或多或少会使其变得抽象，换句话说，也就是会舍弃掉某些特征。讲者拿了 Scott McCloud 所写的《漫画原来要这样看》（Understanding Comics）中的一张图作为解释，这是具象、符号化、抽象化的三角关系图。


在具象的一端，例如照片、拟真的画；越往抽象那一端，越无法辨识这是一张脸，某种程度来说它可以呈现更深沉的意义，但难以理解；越往符号化一端，越简化、符号化，非常好懂就是一张脸，但这符号无法表达什么意义。

讲者举了几个例子，例如：《秘境探险4：盗贼末路》中的山景，非常的清楚看到山的样子非常拟真；抽象化那端，它真的是一幅风景画，只是它是幅抽象的风景画，如果细看可以看到很多有趣的元素，但对观者而言需要花时间理解，难以亲近；符号化的山，很简单明了地看得出来就是座山，但没有表达什么情绪、感觉或氛围，没什么有趣之处。所以，我们需要在三者之间达到一个平衡，像是《Journey》就是很好的一个例子，抽象但又容易理解，他们找到三者之间的平衡，产生非常有趣的视觉。抽象化使场景的情绪、感觉、氛围更容易被看见。


制作简约视觉风格的游戏时，为了达到最大效益，我们要有意识地去设计。

那么，我们如何更有意识地去设计呢？他提出三点：

• 呈现的目的：我们要知道这个场景呈现的目的是什么，要带给玩家什么感受。
• 设计美学原则：要意识到什么样子是好看的、什么是好的设计，讲者后半更深地讨论设计美学的内容，以及在游戏中如何运用。
• 练习与实践：光想没有用，要去实践、要去练习，才能开始有意识的去设计。
  

接下来会谈到视觉设计原则中的对比、层次、平衡，以及在技术上如何实际运用：镜头视角、轮廓、灯光、形状的象征意义。

视觉美学原则：对比、层次、平衡

对比与张力

对比简单而言就是白与黑、亮与暗的对比，视觉很容易就被引导到亮的地方。主角的衣服是红的，对比其他是黑白的，以及白色的脸与极黑的头发，主角就很能容易地跟背景分别出来。


对比能够产生张力。我们的眼睛喜欢去分析、比较，有对比就有张力。例如规律跟凌乱的对比，两个一模一样的正方形，因为一模一样无从比较，没有什么有趣之处；但一个正方形一个圆形，就增加了一点点的变化，方形跟圆形相加、相减、交集、排除、旋转等等，不完全一样但是之间是有关联的，我们可以有所联想，显得就有趣一点；但是，如果太多就又让人无所适从，并不是说凌乱、没有章法不好，而是使人难以亲近，无法第一眼就可以接受。


在《Inside》这个场景，就做了一个非常好的示范：灯光与形状的对比。

让我们来分析一下这个画面：


有简单的两面墙、背景，有两条垂直的线，是相呼应、稍微对称的。但，如果我们想要吸引视线，我们可以画个形状，完全地打破原来的方向性，并且不同的大小，产生对比。我们也可以再加上一些小细节，加上小面积的形状在大面积的形状上。再加上不同的方向性。也许这样的张力够也许不够甚至太大，要看游戏场景的情境。他们又再加了一个白色方块来柔和整个张力，那道光不是自然的在那，而是有意的被放置在那，以创造一个平衡的张力、创造对比。

在各个对比与张力中，可以看到有非常多的细节，也可以发现跟其他的形状是有某个程度上的关联性。

层次

层次也是引导视线的方法之一，有大有小，有主要、次要、更次要。我们的视线会先看到最主要、最大的方块。


《纪念碑谷》就呈现了很好的层次：一开始会看先看到整个塔、背景，再慢慢到小细节或塔底的小圈圈，如果设计稍微不同，把月亮放大，整个视觉上的层次就不见了，让观者不知道要先把注意力放在哪一个元素上。


当我们在设计时，我们要先了解什么是最重要的、什么是次要的，并且确保元素之间是有对话、有关联的。

相对的，在《生化奇兵：无限之城》中，这个场景的层次就比较不明显，我们不知道哪些是重点，我们应该看什么，他提醒要制作简约视觉风格的游戏时，更要注意层次的分明，因为如果能运用的元素更少，画面会显得更凌乱。


讲者再次提到他在他参与的制作《纵横谍海：黑名单》中，他犯的错误，因为炼油厂本身没有什么层次，在游戏中，没有层次的场景会让玩家不知道接下来要去哪，下一步该做什么。


有层次并不只是代表大物件就是最重要的，有时候很小的东西、有颜色上有对比，也可以是最重要的元素，要注意的是要有层次在你的画面、场景或是世界中。


平衡

讲者推荐大家可以参考这本书《Elements of Design》，这本是学工业设计的学生会看的一本参考书。这本书是关于几何图形的构图练习，例如：方体体积关系的练习，三个大小不同的方体，如何摆放才能有层次、对比。讲者他会在3D 建模软体中练习调配三个方体的关系，并重制书中那些模范作品在软体中，他会去比较他做的跟那些作品的不同，这个练习可以帮助我们更多意识到体积与画面的平衡。


接着，他再次以《纪念碑谷》作为范本，一步步拆解这个场景的对比、层次以及平衡。


先简化到最基本的样貌来看。

这座城堡本身就有些层次、大大小小的。然后我们加上塔顶，但是塔楼看起来是平面的，画面中没有可以跟塔顶的曲线相呼应的形状，无法跟其他元素达到平衡，而显得生硬。

如果放个月亮呢？同样的，月亮是一个非常大的圆弧曲线，画面上没有任何规律可寻，让我们可以从平面的塔，过渡到圆弧状的月亮。

现在，我们把生硬的边缘，从上到下，变成带有曲线的，再加上一点细节，那些细节打破了方正感。

这样我们就能把塔顶加回来了，因为有曲线也有那些细线，再加上更多的细节，最后，放回月亮，全部的元素都相互平衡。

技术上的运用：镜头视角、轮廓、灯光、形状所代表的意义

镜头视角

镜头视角定义了我们工作的难度，有固定视角、可移动视角。
固定视角如：《肯德基0号路》、《The Stillness of the Wind》、《英雄联盟》。
可移动视角如：《见证者》、《风之旅人》、《异星探险家》。

讲者 Dan Cox 认为简约视觉风格的游戏很适合用固定视角，可以精确地让玩家看到你所选择的构图、形状设计、元素之间的关系，不用去在意物件的背面，也能用一些小技巧，例如《萨尔达传说众神的三角神力2》俯瞰完全合理，但全部的元素从侧面看是倾斜的。


如果是可移动视角，就必须确保从每一个角度看都是漂亮的，这就困难很多了，讲者推荐可以回去看他在 GDC15的演讲Interior Design and Environment Art: Mastering Space, Mastering Place去了解如何在游戏中用室内设计的概念，让每一个角度看起来都是漂亮的。

轮廓

在角色设计中，角色的轮廓非常重要，轮廓决定了角色的可识别度，在迪士尼动画中、《绝地要塞2》的轮廓就非常清楚，清楚的轮廓可以让玩家第一时间看到那些重要的资讯。



例如这款游戏，如果把螃蟹螯举起，改变他的轮廓，只是改变他的姿势，就更容易让玩家辨识出那是只螃蟹、会做什么、危险程度有多少。



灯光

我们可以选择很平面的光、光的形状、光的质地等等。特别是在3D 当中，例如这个小怪兽，我们可以调整光影曲线，让光影稍微平面化，如此一来，我们可以用颜色深浅来分别出我们想强调的部份，例如我不想要有下嘴唇底下那么多的阴影，但依然想保留突出的下嘴唇，用这样调整光影的方法，换一个角度，还是有突出的下嘴唇，而下嘴唇的阴影可以用颜色深浅来调整。



另一个例子，在《绝地要塞2》中，如果使用真正的光影，在阴影处玩家会看不清楚颜色、究竟是在攻击谁，当然，如果这是你有意要设计成这样也很好，不过，《绝地要塞2》原本的光影，让玩家即使在阴影处还是看得非常清楚谁是蓝谁是红的，清楚分辨敌对及我方，这个方法在游戏设计、美术设计上都非常好用。


形状所代表的意义

这是 Emilia Schatz——Naughty Dog 的首席游戏设计师——所提出形状在游戏设计中，很直观代表的意义，甚至可以把颜色都拿掉，单纯形状依然可以理解，例如：圆形是无害的，方形是可以使用的，三角形是要小心、注意的。


我们可以看到在 John Howe 的作品，透过那些形状，我们很容易感受得到创作者想表达的，甚至拿掉颜色，形状所代表的意义让我们能够立刻理解场景的主题跟感受。


同样的，在《Overland》这款游戏中，他们选择的形状，让玩家可以很清楚地看出那些尖尖刺刺是有害的、是敌人，方形的车子是你。


可以利用这些形状来让你的玩家知道那些元素代表什么，或是，甚至也可以故意打破这个规则，让玩家陷入困惑当中，而创造出有趣的感受。


总结

如何更有意识地设计：要清楚了解你的场景目标是想表达什么感受，了解视觉美学原则，并且实际去练习、去运用。

当我们以简约视觉风格做游戏时，要思考两点：气氛的表达、抽象化。当我们表达事情时，我们无可避免的会抽象化现实物件，让我们可以专注在情绪、感受上的表达。

视觉美学原则有对比、层次、平衡，这些在我们设计时可以更有意识地去观察物件彼此之间的关系。

在技术上我们可以去思考镜头视角、轮廓、灯光以及形状所代表的意义。

最重要的是：要去练习、去运用这些原则。

推荐读物

《Elements of Design》：工业设计必读，了解物体之间如何构图、平衡
《Picture This: How Pictures Work》：从简单到复杂拆解图像语言
《Shaping Interior Space》：室内设计以及如何理解空间架构

作者：Dan Cox
编译：IGDSHARE.ORG
来源：INDIENOVA
地址：https://indienova.com/indie-game-development/creating-captivating-and-simple-visuals/