从《Stray》拆解游戏关卡设计和美术

从《Stray》拆解游戏关卡设计和美术 - 少数派

本文作者 @枕鹤，游戏关卡美术与灯光师。少数派经授权转载，仅对排版略作调整。阅读原文

《Stray》是由法国独立游戏开发团队 BlueTwelve 工作室推出的第三人称视角冒险类游戏，玩家需要在游戏中扮演一只与同伴走失的猫咪，在业已衰败的网络城市中解开重重谜团，回到同伴身边。

《Stray》支持 PS4、PS5 和 Windows 平台，你可以在官网了解详情。

---

近日新出的第三喵称猫咪模拟器《Stray》强烈建议喜欢线性关卡设计和游戏环境美术的朋友去体验，这款游戏的关卡设计属于是非常规矩的教科书，而其最大卖点关卡美术环境则更是亮眼。

本文章会按照游戏关卡的线性流程，将一些 RPG 游戏关卡设计包括一些零散的美术知识的个人见解和分析融入到体验过程中进行逆推。

无论从哪种层面上来讲，游戏关卡的设计和美术都是不可分割的，作为第三人称的角色扮演游戏，其关卡很大程度上与画面的构成息息相关。

在众多游戏工作室中，既有关卡策划拥有更高的决策权的工作室，也有由关卡美术作为关卡的主力开发人员的公司，平衡设计与美术的权重极为重要。

世界观基调

游戏的第一眼极为重要。

很多游戏在开始界面玩家就已经在一定程度上感受到游戏的整体氛围，比如《最后的生还者》就在开始界面下足了功夫，为整个游戏的美术定下了一个基调，甚至是为整个故事内容都隐喻在登录画面中：即末日但却有一丝生机，人性泯灭却有一丝希望（此处不展开）。

两者的开始界面都极为简练

《Stray》同样是使用了类似的克制设计，在登录界面展现极为有限的东西：游戏标题、选项和一只猫。但是却通过画面表现了阴霾下的神秘和一丝惊悚。虽然还未通关，但是故事内容肯定是八九不离十了。

开始游戏正逢风雨交加的雨夜，有时一道闪电点亮洞穴内，再次奠定了游戏的氛围；而与之相对的，是猫咪带来的一种温顺、机敏的生机感，大胆预测主角会为这个压抑的故事带来温暖。

灰度与空间感

把握好灰度是增加画面纵深感的关键，而纵深感又是 3D 游戏的关键，写实的关卡环境如果画面很平，没有深度差的话，会很影响画面的真实感和玩家的体验，玩家会对所处环境感到失真并且难以很好地辨别物体的距离。

3D 游戏美术师没办法确保玩家在每个画面情况下都有完美的美术体验，但是可以在关键的画面去设置关键镜头，保证在大多数引导下玩家的画面都是符合美术要求的。

当我们的关卡有了足够的空间感，那么我们的移动就变得有意义，让我们了解我们的位置关系。

另一方面，三只伙伴 AI 猫咪的远近关系是有意义的。当所有物体的距离是一致的时候，玩家前往任何方向的动力都是均衡的，因为空间没有对比，任何方向都一样，当玩家的选择没有任何区别时，其实本质上就是一种没有选择。

游戏中大量地采用了近暗远明、近明远暗、左明右暗、左暗右明的具有差异性的画面表现纵深和层次关系，这点后面会反复提及，但不会再专门作独立的小节。

灰度重要表现的另一个点是，这三只伙伴 AI 小猫的肤色，是呈距离按灰度分布的，这有利于保证玩家的接触顺序。

第一次接触

当玩家第一次接触，进入游戏之后，他们会开始一段学习过程，逐渐学习与角色、世界的互动模式。不仅仅在序章，有的游戏在整个游戏中都在贯彻学习的行为，比如《双人成行》。

游戏尽可能地减少 HUD 的出现和提示，降低 UI 的存在感，以增加电影化的体验和沉浸式叙事。

在游戏开始阶段完全没有任何基础移动和视角操作的提示教学，也许在现如今大量的游戏培养玩家过后，在用户人机交互的基础机制上，开发者愿意相信玩家的游戏习惯。

玩家凭借以往的先学经验，开始掌握视角转动以及移动，三只猫身上有淡淡的圆圈型引导 UI，当玩家靠近时会出现按键 Q 的提示。

第一次接触很重要，游戏需要告诉玩家，他们能够执行哪些交互行为，并为玩家提供直观的输入按键。

游戏告诉玩家，他们能够执行哪些交互行为，并为玩家提供直观的输入按键

再次告诉玩家这个交互行为的生效条件，必须在可交互的物体（猫）或者环境（纸板）边上，并且按下 Q。

《交互式叙事》中说到，交互设计需要「动词式思考」，游戏作为传达媒介的一大优点即是，它具有「动作性」，即玩家需要通过「动作」来与游戏产生互动。

第一次接触之后，应该紧跟「反复练习」，这点我们后面会作为小节单独提到。

第一章：墙内

情境可能是大部分人提到关卡最容易注意到的东西，人类天生就喜欢听故事，无论是听取还是讲述，也同样会喜欢那些有故事潜力的场景。

大大的关卡标题占据整个屏幕，「墙内」是为何意？郁郁葱葱的植被，覆盖在高墙和管道之间，赋予了这个关卡环境丰富的故事潜力。这点虽然在这里随手带过，但却与后文很多内容息息相关。

游戏是基于舞台的，可以是棋盘、网球场，对于游戏舞台来说，则一定要有边界。

边界将「游戏之内」和「游戏之外」划清界限，超出边界则不再是游戏，这是玩家和设计师之间的基本共识，即「所有玩家的目标、手段，都由设计师提供，且被局限于边界之内」。

在序章关卡中，玩家走到边界就不能在走，所有的游戏可能性都发生在边界之内的空间。

而游戏的「可能性空间」囊括了所有游戏可能性，包括玩家所有的行动、道具、策略、选择等等，还包含了玩家失败的可能性，所有会阻挡玩家的威胁。当玩家明确边界，并只能在可能性空间之内，选择和策略也会有不同。

实际上的关卡范围

在第一章，「墙」这个关卡元素，将通过视觉尺度清晰地告知玩家，关卡的边界。

物体的尺度会影响玩家对于其作用的判断，高耸的墙的视觉语言告诉玩家，它是无法跨越的障碍，限定了关卡的可能性空间。

深度也是尺度的一种，在写实游戏中，多高的墙无法翻越、多深的底会摔死，都对这个游戏体验是否失真有着很重要的意义。比例尺不仅对于游戏性很重要，对于游戏世界的真实性也同样重要，当一个物体超出认知的比例时，游戏的真实感就会大打折扣。

而在《Stray》这类以跳跃玩法为核心机制的游戏中，尺度的作用则更加显著。

利用环境教学

「关卡」以「环境」为教具，为玩家传授游戏的交互机制和策略。

「墙内」关卡通过管道和阶梯等功能与阻碍，教授玩家跳跃的机制。

很快玩家会凭借直觉学习移动的方式，辨别出能够踩上或者进入的物体，掌握跳跃之后，会开始学会辨认哪些物体够矮、哪些太高跳不上去，这时候尺度的重要性就体现出来了。

没有造成影响的交互行为

通过环境的积水让玩家学习与环境进行交互也是同样的道理。但个人觉得不好的点是，游戏中会出现没有产生结果的交互机制，比如喝水，和一开始无意义的猫叫教学1。

无意义的喵叫

玩家应该借助「机制」来进行交互，并产生最终的结果。没有影响的交互，认为可能是为了降低游戏的目的性，将其游戏的节奏在此放缓，能够更加轻松地以一种嬉戏的态度进行游戏体验。

功能与阻碍

「功能」是可以与之互动的环境，可以进入的空间，可以坐上、或者用作掩护的物体，阻挡敌人的行动、视野的障碍，可以爬上走上用作地基的地面，还有可以搜集的场景资源等等游戏中的事物。

有些次要环境也是功能，比如上一节的水管，最重要的一点是，功能必须被展示给玩家。为此，游戏经常会提供机制锁，迫使玩家了解功能的用法。

阻碍则是功能的反义词，那些会妨碍你的功能，比如阻挡道路的物体，挡住你的视线，限制你的策略和能力的物体，甚至帮助、保护你的敌人，这一块断掉的道路。

这两种情况其实是比较主观的，比如台阶，某种程度上它阻碍了你的前进，但你仍然可以通过行动去利用它更上一层。且功能和阻碍并不是一个固定的，而是动态的，一些阻碍可以在特定情况成为功能，比如《马里奥》里可以借助敌人跳跃到另一个平台上。

尽管很多游戏基本要素方面是共通的，大部分游戏细节方面还是有所不同，玩家仍然需要花一点时间才能刻进直觉中。

玩家需要花费一些时间练习，才能完全掌握这些动词，尽管我们现实生活中可能对于「跳跃」这个动作很熟悉，但是要将其与特定的「空格键」操作绑定，仍然是非自然的、需要学习的。

当然玩家可能在其他游戏中也进行过类似的操作，跳跃过，但是每部游戏在具体的时机、高度、前摇等细节处仍有不同；不同的游戏可能还有不同的派生，比如跳跃攻击或者二段跳。

在核心机制，比如移动和跳跃方式上，需要反复的练习将其变成为玩家的直觉操作。

同样在游戏序章的部分，对于 Q 按键与环境的交互，也在短时间内经历了三次的反复的练习，在玩家刚刚学会与世界进行互动的时候，让他多尝试几次！

模糊与信息

模糊很重要，玩家不知道边界具体在哪，他们无法立刻知道解法或者谜题，甚至接下来的挑战是什么。边界创造玩家的「不可能性空间」，而模糊则创造了「可能性空间」。

玩家如果没有走到墙边，不会有明确的感知边界的具体位置，但却能够在潜意识里被其影响知道靠近没有意义。这点对于关卡来说很重要，玩家不花费时间和精力去违反设计师的意图，也不会因此感到沮丧。

而模糊在美术中可以具象化为信息，对于看不清的地方，没有很好的信息识别能力的地方，拥有更多的可能性空间，更加吸引玩家前往。之前提到的近暗远明，和近明远暗都是采用了类似的思路。

近明远暗

「屏风」与「狭管」

屏风，中国传统建筑物内部挡风用的一种家具，所谓“屏其风也”。屏风作为传统家具的重要组成部分，历史由来已久。屏风一般陈设于室内的显著位置，起到分隔、美化、挡风、协调等作用。

在设计和美术上来看，「屏风」的作用在于让玩家长期的视觉体验进行变化，一直以来相同的开阔场景难免玩家会感到视觉疲劳。通过一些阻隔，或是通过狭小的区域将玩家的视野变得狭窄，再迎来一个开阔视野的 Key Scene，给关卡视觉带来新的震撼，同时也将节奏打断，通过一段较为平和的节奏，再迎来新的小节，已经是一种形成方法论的关卡设计方法了。

穿过小洞，迎来 Key Scene

而在游戏《SIFU》中，工业区（贫民窟）地图使用了典型的方案，且对于游戏节奏的调整动作游戏中有着更显著的感知。

《SIFU》

在技术上来看，这是一种常用的进行关卡优化的方式，过于深远的可视范围，让 GPU 和内存压力巨大，尽可能地使用高低起伏来打造视野区隔是一个长久的关卡美术命题。在开放世界游戏，一座阻隔视野的山越高，登上去之后可视范围就越大，是有舍有得的。

为了这个 Key Scene 甚至新增了一个交互行为——观察

而在线性关卡中，可以使用如此简单粗暴的方式，在迎来一个视野开阔或是内容丰富的关卡之前，利用一段狭长的通道，来清理之前的缓存，同时起到调整游戏节奏的功效。

《黑神话：悟空》实机演示中也有同样的设计

利用明暗创造焦点

即使整体画面很复杂，令人眼花缭乱，灯光（明暗关系）依旧能够重新整顿画面，利用灯光自然地引导玩家将视线集中在画面重要的部分。

利用光束进行视觉引导

沿着光束放向往下看，光斑洒在的地方，观众往往会将目光放在明暗差异最大的部分，即这幅图的光斑处。可以看到我们的伙伴 AI 已经在等待你的到来了。

光斑的强曝光洒在管道上将画面戏剧化，那么接下来的游戏内容也会变得充满戏剧化。

冲突来临，猫猫失足掉落

第二章：死城

通过不断反复的结构，可以打造画面的节奏感，从而打造纵深与引导。

人们擅长去寻找事物的规律，这是人类掌握真理的方式，所以通过反复的结构去进行引导，玩家会将其归类到自我学习的过程中，而并非是得到提示，这将会给玩家更大的成就感。

画面结构或者元素的重复不仅有着极为难以感知的引导性，并且还可以将杂乱的环境变得有据可循，让一些繁杂画面重新变得清晰。

《泰坦陨落 2》

视觉象征

不同的画面构成，更加具体地说是不同的形状，都会给观众带来不同的感受。形状是很利于联想的，即使玩家并没有发觉，但他们的潜意识进行了联想。

当玩家进入「死城」关卡时，第一幕就是这个画面，甚至是在关卡标题“死城”出现之前。直接的视觉象征就已经为这一关卡的叙事和氛围做了铺垫。

空间的力场

从建筑师角度来说，当我们观察空间时，空间有两种构成元素：虚 Void 与实 Mass；虚是空洞的、易于获取信息的，而实是实体的、会阻挡信息的。

虚实又在空间中形成「正形空间」和「负形空间」，正负形空间相辅相成，单独存在没有意义，互相定义、赋予意义。

正形空间具有形状，负形空间则具有形状的边界。

这是从第三喵称视角看到的死城关卡最初的空间，我们为了方便理解，可以切换到俯视角进行观测。

当我们在空间中放置物体（Mass），物体会和其他实——比如边界——产生力场，会意识到这些图形都是呈现出一种空间的正形感受，甚至在感官上给人一种「这些图形其实连在一起」的既视感。

这非常主观，就像电场一样，但这恰恰是我们日常生活中观测物体的方式；而玩家就像一个铁球，受到空间力场的影响。而灯光或者其他视觉上制造焦点的方式，会让一些物体的力场加大，力场则又分为斥力与引力。

空间力场图

更大的吸引力场

斥力与引力

简单来说，在这个场景中的实体是不可以穿越的，会释放出斥力，而负形空间则会释放出引力，可以看到在这个封闭关卡的左下角和右下角的负形空间极具吸引力。

红色是推力，绿色是玩家的移动趋向

玩家在靠近墙或者物体时，会进入物体的场。虽然玩家是自由移动的，但你会发现玩家的行进路线会倾向于和这些磁场形成对齐关系。

利用空间影响行为

根据空间的场力可以影响玩家的移动趋向，那么我们就可以以此尽可能地去操控玩家的行为模式。

依然是这个空间，在这个空间中，你可以像正形空间一样分辨出自己是否「处于这个空间之内」，而这种分辨的特质，就代表了空间的正形性。

玩家可以很明确的感知到自己所处的空间范围

在正形空间中，物体拥有更多的个性，玩家更愿意靠近与其互动。另外，玩家会更倾向于在正形空间徘徊，它具有家的边界和安全感。

所以当我们想要玩家仔细观察一个区域，将这个区域的空间内部感加强，并非一定是室内，而是边界感。

包围的室内空间解谜关卡

反之在边界不明确的负形空间，玩家倾向于动起来，移动、离开这片区域。

我们同样也可以利用力场来打造急迫的关卡流向，大量排斥力的狭窄区域会加快玩家的移动趋势。

点只是一个位置空间，没有长度、宽度之类的东西，一个物体是否是「点」的关键在于对比的观测和其作用，在这个画面中，我们可以抽象地将其表现为面和点的情况，你也可以眯着眼睛观察。

关卡设计中有了这个点，当我们移动的时候，我们能够找到自己的位置，我们的移动就有了意义，因为我们比较了我们自己和这个点的相对关系。

在美术方面，点让我们有了目标，视觉的焦点吸引了玩家的眼球，并让他们驱使角色前往焦点。

线的作用无穷无尽，但总是离不开引导和划分。不同的线有着不同的阅读寿命，平线更加平缓，斜线更富有动感，竖线让人更加快速的阅读。

当你不知道如何引导玩家的时候，不妨看看如何更加巧妙地使用线。

值得一提的是，人眼遵从「F 型视觉模型」，即从左往右读、从上往下读，无论是读图还是读书。

F 型视觉模型，是由尼尔森在 2006 年提出的平面设计的基础理论

但我们毕竟是人，并不只是依赖直觉和第一眼，我们仍然会阅读和揣测所有的可能性。

点 + 线 进行关卡引导

线并不只是实体的线，指向性的箭头、枪口、手指都会形成虚拟的线，虚线比实线的指引更强。

完全没有察觉地被指引

外观与功能

物体都拥有外观，红色的涂料和磨损的表面让这两个圆柱体有了更多的内容。方块安插在墙上，就变成了门。

功能和外观紧密地联系在一起，功能总是优先的，而外观的存在为功能提供了一个情景。

猫咪让桶滚动到合适的位置

外观让猫咪滚动空的铁桶变得更加合理，而铁桶作为功能也更加可信。同样的还有木板。

推倒木板，使用其作为功能

外观让游戏空间中，具有身份指向性和目的性的物体，很容易与玩家经历的故事和体验直接相关。以更加具体的形式与背景区分开，成为玩家叙事的一部分，为关卡提供了情景的支持。

没有功能的铁桶

故事和关卡叙事在游戏开发过程中承担了重要得多的角色，游戏作为一种新型的、优秀的叙事传达媒介，定位发生倾斜，功能不再永远大于外观，有越来越多的仅仅为叙事服务的外观。

但当有着有功能的外观的物体不具备功能时，往往会让玩家感到疑惑。比如有按钮不能按，有门不能进，有桶不能推。

有灯光的门，却不是关卡的功能

如今游戏设计师经常容易忽略掉关卡的设计目的和功能，专注于打造绝美的环境，但是关卡承担着向玩家说话的职责，如果没有做好这一点的话，就会让玩家去瞎猜我们想表达的意思，感到迷惑。

第三章：公寓

灯光颜色与色温

游戏在「墙内」关卡时主要使用的是偏向真实感的环境光为主，在进入「死城」后游戏开始以艺术化的人为打灯为主，进行氛围的渲染和加强画面的对比，而到了室内关卡「公寓」时，则可以更加自由地进行灯光塑造。

需要提到的关键是对于灯光颜色的控制，即何时使用色温，何时使用调色会更加真实合理。

灯光色温查找表

在我们今天使用的灯，其发光原理从物理学角度来理解：当电流通过晶片时，N 型半导体内的电子与 P 型半导体内的空穴在发光层剧烈地碰撞复合产生光子，以光子的形式发出能量（即大家看见的光）。在这种发光的方式下，使用色温会更加真实可信。

而像霓虹灯这类通过其中的稀有气体来发出各种颜色灯光的情况下，使用颜色来调整也不会觉得违和。

《SIFU》

很多时候，即使使用了色温，仍然会觉得灯光光很奇怪。在追求真实感的工作中，这可能很重要，但在你想要艺术化处理画面或者有个人的风格时，我并不认为这是一个铁律，但我们这里只讨论真实感。

光是会随着距离衰减的，不仅仅是光的强度，包括它的色温都遵循二次衰减，也称之为平方反比衰减。如果光源不能遵从这个物理定律的话，那么他会看上去很假。比如《生化危机 4》中的洞穴，被一只蜡烛就照的通明，不应该照的到那么广的范围还保持这种亮度。

《生化危机 4》中的「小太阳」蜡烛

除了灯光的强度衰减，另外我们可以在下图看出色温的衰减，光源发出的青色光和黄色光，在发散之后变成褐色和暗红色光。

过去的技术受到限制，而如今的引擎已经可以很好地去模拟真实的灯光衰减以及色温，我们可以在虚幻引擎的灯光组件中看到这些参数。

但并不是引擎升级就可以确保万无一失了，很多时候错误的调参也会打破其物理的表现。

霓虹灯变化多样，且吸引人，控制霓虹灯在场景中出现的位置以及频率是把握包含霓虹灯光效场景节奏的关键，霓虹灯远比比想象中要复杂。如果把握不好，画面的节奏就会变得纷乱繁杂，不易于阅读。

亮度和颜色都是对比出来的，周边亮度暗，那么我们看到的亮部就会感觉更亮。颜色也会受到周边的环境对比出现视误差，常见的例子有这双鞋到底是灰绿还是粉白。

光的颜色和亮度改变了视觉感知

即使灰度（value）一样的情况下，周边的环境影响，仍然会让玩家感知的色彩发生差异。为了强调画面的焦点，比如一些指示牌，指引，我们可以用互补色来强化他们的色彩对比，《Stray》中大量使用了这种方式。

在一种色调环境下使用对比色指引

色彩对比的另一个作用是打造纵深，与灰度打造纵深的方式不同，直接利用不同的颜色来划分空间区域。

《SIFU》

利用冷色或暖色打造氛围应该是大家都明白的道理，夏天的时候用冷白光会感到凉爽，而使用暖色光则更加燥热，在冬天却会感到温暖。

除此之外，冷光还有清冷、寂静的感觉，当我们想要玩家在一个关卡中小心翼翼地进行一些探索时，我们可以使用冷色作为环境的主色。而在危机来临时，我们会使用红色进行预告，通常我们将危险或者敌人的主色设计为红色。

《Stray》的敌人设计

比如在《Grounded》（黑曜石工作室《禁闭求生》）中，当实验室的某处的出现红光时，预示着战斗即将来临。

刚打开门就被攻击

根据本节的学习，我们可以知道上一小节中，利用色彩对比加强纵深感的同时，还意味着什么。

《SIFU》同样是门后即将有一场恶战

视觉叙事（Visual Storytelling）是每一位游戏美术师都应该知道的概念，所有构成、明暗、色彩等美术知识分开来看都不足以打造一个故事，但是当他们结合在一起，就能够通过一个画面就传达出故事。

《哈利波特：魔法觉醒》入学动画

可以从上述例子看出来，即使我们不去一一解释画面的表现和内容，也能很自然地将情感传递给观众，或是诱发他们的好奇、害怕等等。

同样是背光，不同的情绪

视觉叙事是一个很宽泛的概念，包含了各种各样的视觉传达方式，是多种视觉语言共同协作的成果，同样我们在关卡中也可以通过关卡的结构设计在传达故事。

未知剪影：胆怯

未完待续……

> 下载 少数派 2.0 客户端、关注 少数派公众号，解锁全新阅读体验 📰

> 实用、好用的 正版软件，少数派为你呈现 🚀