🛠️布局

如何绘制楼层的自上而下的平面图,包括流程和类型

为什么要设计布局

布局在关卡设计中有两个类似的含义:

  • 关卡的整体结构;“布局太混乱了,我不知道该往哪里去”
  • 用于规划的概览图,有时称为“自上而下”,因为它是从自上而下的视角绘制的;“你画完布局了吗?我们得尽快封锁”

布局图可以是简单的或复杂的,符号的或具象的,抽象的或具体的。它可以是餐巾纸涂鸦或详细的平面图,这一切都取决于!

“好的布局图”是任何能有效传达核心设计的图像。

Img Which of these layout sketching styles is most effective for you? you have to decide

但请记住:计划不是魔法。 布局图无法告诉您您的关卡是否有效,只有 blockout 和 playtest 可以开始回答这个问题。布局不是关卡,玩家永远不会玩您的绘图。

a dev consulting a paper world map layout for Grand Theft Auto 1 (1996) by DMA Design, photo from Steve Hammond a dev consulting a paper world map layout for Grand Theft Auto 1 (1996) by DMA Design, photo from Steve Hammond

布局概念

在设计布局时,请使用以下设计概念:

  • Flow 是在关卡中移动的感觉。
    • 玩家的移动是快速还是缓慢,平稳还是突然?
    • 所需的流程取决于体验目标。突然流动还不错。
    • 关键路径是完成关卡的理想路径。
    • 循环是现实世界的建筑师对流动的看法。
    • 垂直性是关于支持垂直流。
  • Parti 是布局的核心结构/主要思想。
    • 将整个布局绑定在一起的整体概念是什么?
    • 清晰的部分有助于您专注于设计中最重要的部分。
  • 类型学是关于常见的布局模式和功能。
    • 简化您对布局的思考方式
    • 共享设计词汇可帮助您学习其他级别并进行交流。

Layout

如何设计布局

设计布局没有单一的最佳方法。每个人(和项目)都可以以不同的方式进行布局。但如果你感到迷茫,试着做所有事情:

  1. 前期生产:定义设计目标
  2. Parti thumbnails:集思广益核心形状
  3. 气泡图:可视化区域之间的大小/流量
  4. 平面图:更详细地绘制特定的房间形状
  5. Gameplay markup:添加标签和设计说明

对于小型 solo jam 项目,请根据需要进行尽可能多(或尽可能少)的布局规划。

对于大型小组项目,请尝试在共享白板上一起执行所有这些步骤。

Layout drawing iterations from abstract grid (left) to floor plan (right) from "Architectural Graphics" by Francis Ching

前期制作计划

设计没有任何目的的东西是很困难的。在前期制作阶段,我们会先尝试定义和规划我们想要制作的东西,然后再尝试制作。

因此,在绘制布局之前,请至少定义一个玩家体验目标。在这个级别中,玩家应该学习、感受或做什么?

您可以编写具体的体验目标(“教玩家如何在科幻下水道中二段跳 5 分钟”)或更抽象(“感受与大自然融为一体”)。 但更具体 = 更容易设计。

制定一些目标后,您可以规划节奏,即有助于实现体验目标的特定事件和活动的顺序。

例如,如果你的体验目标是“逃离可怕的怪物”,那么你需要将体验分解成更小的具体节拍——比如“(1)听到婴儿在门后哭泣,(2)发现僵尸熊发出婴儿的哭声,(3)跳出窗户逃离怪物。 (这个简单的计划已经有很大帮助了,现在我们知道我们需要一扇门、一扇窗户、一只熊......

有关规划体验目标的更多信息,请参阅前期制作。

有关规划活动和 Beats 的更多信息,请参阅 Pacing。

Parti 概览

在建筑中,parti 是整个建筑的基本形状/理念。

a. 绘制一个小的简单图表(缩略图)

b. 用短语标记

哪种基本形状适合您的体验目标/节奏计划?

parti 可以是象征性的(“倒置的船”)或抽象的(“减去盒子”),也可以关注人们将如何使用建筑(“核心将公共和私人分开”)或与周围环境的关系(“手指伸入树林”)。

或者您可以先感受一些形状,然后再进行整理。重点是开始毫无压力地进行视觉思考。如果您不喜欢某个 parti,没问题,您可以随意画一个。

Img parti diagrams from "101 Things I Learned in Architecture School" by Matthew Frederic

对 PARTI 缩略图的建议

绘制至少 5-10 个缩略图以生成多种方法。如果你画了 100 个 partis,那么其中至少一个会很好,因为不可能设计 100 个可怕的建筑。你抽到的越多,你这边的可能性就越大。

不要在每个上面花太长时间。有时你只需要 30 秒来写下一些行,这就足以表达核心思想。

如果你不能说出它的名字,那可能是它太原始了。尝试以不同的方式再次绘制它,或尝试将纸张旋转 180 度以从另一个角度想象它。

气泡图

将最有前途的部分扩展为气泡图:一组不同的椭圆,每个椭圆都象征着不同的房间。

a. 为部件的每个部分绘制一个气泡

b. 标记每个气泡

c. 绘制箭头以强调某些连接或方向

气泡图的目标是在您的关卡中建立比例和关系。什么需要做大?什么需要相互连接?

先不用担心细节。这是关于你的空间的逻辑。

请看下面的示例气泡图。哪些空间与客厅相连,为什么?为什么那里有浴室?卧室在哪里?如果有人不能使用楼梯怎么办,他们将如何住在这所房子里?

Img example bubble diagram of F10 House in Chicago, from The Architecture Handbook: A Student Guide to Understanding Buildings by Masengarb et al.

气泡图的建议

您的前几个气泡图会有问题并提出新问题。有些气泡会太大或太小,或者它们可能会接触到错误的气泡。也许有一些气泡你忘了添加?或者气泡太多了。

  • 坏的气泡图是好的。这意味着你很早就发现了设计问题,你可以再画一个来尝试另一种排列。
  • 绘制至少 3 个气泡图来想象多种排列和大小。
  • 你可以偏离 parti。该 parti 的目的是帮助您开始绘制气泡。如果它不再对您有帮助,那就不要使用它

平面图

在建筑中,自上而下的布局图形称为楼层平面图。

a. 想象一个平面切割,一个穿过建筑物的假想水平切片

b. 在此平面剪切下方绘制结构形状 - 墙段、门口、窗户和重要的家具或固定装置

c. 要在平面剪切上方绘制相关对象,请使用虚线或虚线

在下图中,请注意 Ching 如何使用各种线条类型、线条粗细、阴影和色调模式来区分平面图的各个部分。Ching 使墙壁变厚和变暗,但使用较细的线条来标记楼梯或表示房屋的区域,并使用较微的线条表示旋转门的弧线。

游戏《防空洞》的一个场景布局设计

ADVICE FOR DRAWING FLOOR PLANS

  • 从大处着手。使用整个页面。从大的主要形状开始,逐渐减少到较小的功能,如门和窗。不要以 100% 的细节绘制。
  • 要四四方方。矩形比奇角或弯曲的墙壁更容易构建。~90%+ 的角应该是 90 度并与网格对齐。
  • 使用 2+ 线条粗细。对不同类型的墙使用不同的线宽。
  • 笔更强大。要快速布局,请使用钢笔或铅笔。
  • 我们不是建筑师。绘制想象玩家体验所需的最低限度。

YouTube 关于布局的一些视频

玩法标记

标记和标记布局图形的重要部分。

  • 流。对于单人游戏关卡,绘制或标记关键路径。对于多人游戏地图,请对团队重生区域和主要流通区域进行轻微的阴影或突出显示。
  • 地区。标记主要区域和地标。对于竞技多人游戏地图,请开始考虑可能的 “标注”。
  • Game Objects。标记对了解玩家体验至关重要的重要目标、NPC、物品、陷阱等。 但不要用太多东西弄乱图纸。

Img note the copious gameplay markup in this isometric layout drawing for "Nova Prospekt" in Half-Life 2 by Eric Kirchmer, from the art book Half-Life 2: Raising The Bar

Img note the player flow arrows in this isometric layout drawing for a puzzle in Portal 2, from Game Informer, March 2010

Img actual Valve whiteboard with isometric layout drawing + pacing outline, used for planning Half-Life 2: Episode Two... however, note that this drawing differs a bit from the final game; photo by Phil Co (via Interlopers.net)

布局示例图

《半条命 2》(Valve) 的“Nova Prospekt”,由 Eric Kirchmer 和 David Sawyer 制作

单人 FPS 游戏《半条命 2》(2004 年)进行到 2/3 时,玩家必须在一个名为 Nova Prospekt 的废墟监狱建筑群中战斗。这是一个很长的章节,充满了许多与快速移动的小队敌人的多层近距离战斗遭遇,旨在大量使用玩家的“虫饵”武器,该武器可以命令飞行的“蚁狮”怪物攻击敌对士兵。

  • 研究:深受加利福尼亚州旧金山恶魔岛州立监狱的启发
  • 类型: 地面场馆两侧是狭窄的 T 台和牢房,经常有门禁
  • 遭遇战:逐个街区、逐个房间设计,每个部分都提供了一个中心构想,为贯穿整个章节的 Antlion vs. Combine 遭遇空间增添了新的转折

Img map of Alcatraz (left) and Nova Prospekt cell block bubble diagram (right) from art book "Half-Life 2: Raising The Bar"

请注意 Nova Prospekt 计划(上图右)是一个相对简单的布局图,它标出了区域以及玩家如何通过这些区域。它省略了每栋建筑内的各个房间和走廊。这是一组级别的布局图像,而不仅仅是一个级别。它基本上是一个气泡图,侧重于每个区域的足迹及其连通性。

对于单个牢房和遭遇战,Valve 概念艺术家 Eric Kirchmer 将关卡设计和游戏标记直接整合到概念艺术草图中,这可能是协作小组白板设计会议的结果。这些战斗遭遇具有理想化的关键路径“解决方案”的预期流程,将每场战斗视为一个有待解决的谜题。这些草图为关卡设计师 David Sawyer 提供了宝贵的设计文档,以便他们进行草图绘制和原型设计。

在所有等距布局图中,请注意沉重的游戏标记:玩家开始位置、关键路径箭头和大量使用文本标签,以帮助我们想象玩家体验。

Img isometric layout drawings for various Nova Prospekt encounters, from art book "Half-Life 2: Raising The Bar"

《雷神之锤 1》的“无题”,安德鲁·约德 (Andrew Yoder)

在他的单人游戏 Quake 关卡中,设计师 Andrew Yoder 迭代了一个涉及房间中央悬浮笼的场景遭遇战。在这里,Yoder 在布局和草图之间反复流畅地切换,有时会丢弃整个房间,并使用布局草图重新审视设计。以下是他的一些笔记:

Img level layout sketches with perspective views (ink on paper), courtesy of Andrew Yoder

“我的流程是关于迭代的,这有时意味着回到规划阶段。[...]有时我会花一个小时迭代一个区域,然后它就会发出咔嗒声。 其他时候我会花同样的时间,嗯,也许最好把它放在一边,尝试其他事情。[...]我怎么知道?从过去建立类似级别的经验中,有一种直觉。还有一堆启发式和模式需要检查。玩家知道目标吗?他们能否预见到解决方案并为此制定计划?

请注意编号、大量使用注释、标记草图的不同部分以及偶尔使用透视缩略图来阐明整体结构。当关卡布局涉及高度变化时,透视缩略图特别有用,因为从自上而下的透视图很难绘制这些变化。

各种各样的草图和大量的标记帮助 Yoder 传达了他的设计意图。布局过程帮助 Yoder 用语言表达和阐明设计问题。

Img screenshot of the resulting suspended cage area blockout in Quake 1, courtesy of Andrew Yoder

《看门狗 2》(Ubisoft)的《机械纪元 - 电视台》,作者:Iuliu-Cosmin Oniscu

在开放世界黑客游戏《看门狗 2》中,设计师 Iuliu-Cosmin Oniscu 构建了一个具有多个目标、入口和关键路径的任务。

在他的博文“看门狗 2 - 机械纪元 - 关卡设计回顾”中,他包括了具有大量游戏标记和最小架构的布局图:

Img layout of WKZ Station in "Automata" for Watch Dogs 2, as drawn by the designer Iuliu-Cosmin Oniscu

设计师的一些注意事项和意图:

在这个特定场景中,诀窍是玩家可以穿过激光并触发警报,但他也可以:

  • 当守卫远离激光巡逻时禁用激光,然后进入红色区域并悄无声息地将 AI 击倒。
  • 使用连接到墙壁的 Camera 通过从一个摄像机角度移动到另一个摄像机角度来侦察位置。在游戏的这一点上,这是一种已经成熟的侦察内部位置的方法。
  • 使用无人机探索走廊并使警卫失去行动能力。

远处的走廊还有一堆战略性放置的接线盒,可以被黑客入侵以使其丧失能力,从而同时使两名守卫失去能力。

请注意,关卡设计师的绘图(如上图)比实际的游戏内实现(如下图所示)要简单得多。建筑细节、家具,甚至一些游戏元素(如中立 NPC 和壁挂式摄像机)都不会在布局图中表示。这些都与规划通过击倒守卫 NPC 来绕过安检的核心体验目标无关。

这里的教训是:不要用不必要的设计功能弄乱你的布局图。

Img player view of finished WKZ Station lobby in "Automata" for Watch Dogs 2, by Iuliu-Cosmin Oniscu

《War path》为《Team Fortress Classic》出品 (Valve),由 Robin Walker 等人创作

在基于职业的多人射击游戏《军团要塞经典》(1999 年)中,“Warpath”是由 Robin Walker 和他在 Valve 的团队合作设计的控制点(“CP”)地图。TFC 的 CP 游戏模式类似于《军团要塞 2》或《守望先锋》中的现代 CP 模式,其中两支队伍竞争占领中央车道上的所有控制点。

  • 流程:一条带侧路的中央车道,总共 5 个控制点,带有动态重生室
  • 平衡:对称地图,所有 9 个职业都必须可行,每个 CP 的攻击/防御都可行
  • 类型:串珠项链,一条长长的盘绕走廊,点缀着每个 CP 的竞技场

Img compare the original plan vs the final level layout; image of "Warpath" from Team Fortress Classic

在《半条命 2》画册“Raising The Bar”中,Walker 详细介绍了他们的流程以及绘图布局如何影响他们的协作多人游戏关卡设计工作流程:

“在初步的设计讨论之后,设计小组绘制了地图草图,然后由关卡设计师构建。初始版本完成后,定期游戏测试开始。在整个游戏测试周期中进行了许多更改,这通常会导致地图的原始计划发生重大变化。 [...][Warpath] 是第一张 TF 地图,其中团队根据团队控制的控制区域在不同的位置重生,这导致了一个漫长的测试周期,重生点被多次移动。 -- 罗宾·沃克,摘自《半条命 2:提高标准》,第 48 页。

在上面的图纸中,请注意编号的控制点和标记的标注。每个控制点区域都像一个迷你竞技场/parti,有特定的地标标签:狙击台、隧道、石拱门、兵营等。从头开始命名和主题地图区域。标签还突出显示了对地图体验目标至关重要的最重要部分。

另请注意,该图仅显示了地图的一半,其中镜像的对称性在中央桥处分裂。因为他们已经确定地图布局是对称的,所以没有必要绘制整个地图。因此,设计约束会影响布局的绘制方式。

Img the central bridge arena, facing south from the Blue team's sniper ledge; "Warpath" from Team Fortress Classic

反对布局?

虽然布局对于关卡设计来说似乎很重要,但许多关卡设计师并不绘制布局,并且经常从前期制作跳到草图。反对制作布局图的一些论点:

  • 您无法对 layout 绘图进行游戏测试。
  • 图纸是视觉文档,很快就会过时和过时。
  • 现实世界的架构师进行布局是因为他们必须这样做;我们不应该盲目地复制它们。
  • 3D 游戏移动更多地依赖于直觉而不是计算。

对于有影响力的 3D 平台游戏《超级马里奥 64》(1996 年),宫本的团队只制作了最少的概念艺术/布局草图来规划主要的节奏节拍:

...在创建关卡地图时,您是否事先绘制了模型/蓝图?

宫本: 其实,不,一点也不。只有一些概念艺术草图和简短的笔记/备忘录。例如,我会与课程主管 Yoichi Yamada 讨论一个关卡的想法,然后他会快速绘制一些草图。山田不是艺术家,但他画的东西很奇怪。(笑)然后我们会查看这些内容并进行更多讨论(“哦,这里应该有一个雪人!”),然后关卡的那些关键元素将被写下来。然后,Yamada 和其他关卡设计师在使用我们的软件开发工具设计关卡时会参考这些笔记。

-- 来自《超级马里奥 64 策略指南》的采访(通过 shmuplations.com

Img scan of a magazine spread featuring a clay diorama of Super Mario 64's "Bob-omb Battlefield" level; does it feel pre-planned? because it wasn't!... from "Super Mario 64 Complete Clear Guide Book" (via shmuplations.com)

反对布局?

你也可以说宫本的方法不太适用于其他类型、情况或团队。他们是十几位相互了解和信任的资深专业开发者,当然他们可以在没有计划的情况下即兴创作小型低多边形单人游戏关卡。

回顾...

布局图(或“布局”)是关卡结构和关键节奏节拍的初始视觉计划。您应该预料到您的最终水平会有很大差异。

  1. 从基本的预生产计划开始,定义所需的体验目标和节奏。
  2. 草图和标签零件,核心形状的简单缩略图草图。
  3. 用气泡图布置空间,气泡图是强调整体比例和关系的草图。
  4. 绘制平面图,即包含墙壁和地板的自上而下的绘图。
    • 从简单的大形状开始,省略细节。使用多个线宽和阴影地板区域。
    • 对于具有多个楼层的房间,绘制等轴测视图,并注意楼层平面。
    • 对于重要或复杂的布景房间,也许可以绘制一个透视图并标记它。
  5. 使用玩家流程和游戏说明标记计划。帮助其他人想象这种体验,尤其是在您与他人协作时。
    • 名称和标签区域。将关卡的每个块视为其自己的部分。

也就是说,许多关卡设计师不制作布局图。尝试一下,如果它有助于您思考,或者有助于您的团队沟通,请继续这样做。但是,不要觉得有义务。

接下来

详细了解重要的布局设计概念。 继续到 Blockout 阶段。