《游戏原画设计》第6章

第6章游戏场景设计与绘制签到扫码下载文旌课堂APP扫码签到（2022.3.2515:00至2022.3.2515:10）签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。本章首先讲解游戏场景设计基础知识，包括建筑结构、建筑风格、透视规律等，然后讲解节奏在游戏场景设计中的运用，最后以酒神坊和荒漠之城的设计与绘制为例，演练游戏场景的设计过程及绘制方法。通过实战演练，读者可以清楚地知道游戏原画设计的实际流程，从而为以后的工作打下良好的基础。本章导读本章目标学习目标了解建筑结构、建筑风格，以及透视规律。掌握节奏在游戏场景设计中的运用。熟悉游戏场景的设计过程及方法。思政目标具备良好的观察能力、理解能力和空间思维能力。拓展学习的深度和广度，为成为游戏原画师打下坚实的基础。目录游戏场景设计基础知识节奏在游戏场景设计中的运用设计并绘制游戏建筑——酒神坊6.16.26.3设计并绘制游戏场景——荒漠之城6.4游戏场景设计基础知识6.16.1.1

建筑结构一幅游戏场景原画作品中通常包括自然风景（如山、川、树、木等）、建筑（属于人造环境，如房屋、桥梁、雕塑等）、人物等。其中，绘制房屋建筑需要先了解建筑结构。建筑结构是指房屋建筑中由各种构件（包括屋架、柱等）组成的能够承受各种作用的体系。通常，房屋建筑的设计都是在此结构基础上进行的。提示需要注意的是，房屋建筑中不同位置的材质表现是不同的；绘制自然风景或其他建筑同样需要了解它们的结构，此处仅选择房屋建筑进行讲解，读者可根据实际需要自行了解其他元素的结构。6.1.1建筑结构6.1.2建筑风格1．中国建筑风格中国建筑早已自成流派，它们代表着不同年代、不同区域的文化风貌和历史沉淀，其中典型的有徽派建筑、京派建筑、闽派建筑等。（1）徽派建筑：是江南古建筑的代表，建筑特点是依山面水、构思精巧、自然得体等。（2）京派建筑：最具代表性的莫过于老北京四合院，建筑特点是青砖灰瓦、红漆大门、造型古朴等。（3）闽派建筑：主要代表为土楼和马鞍墙。其中，土楼是以土作墙而建造起来的集体建筑；马鞍墙是一种封火墙，因状似马鞍而得名。6.1.2建筑风格2．国外建筑风格国外常见的建筑风格有古希腊风格建筑、拜占庭风格建筑、哥特式风格建筑等。（1）古希腊风格建筑：早期为长方形有门廊的建筑，后来加入柱式建筑元素。（2）拜占庭风格建筑：带有穹顶、拱门和尖顶等建筑元素。（3）哥特式风格建筑：使用了尖形拱门、横接拱顶和巨大的花窗玻璃等建筑元素。6.1.2建筑风格这些建筑风格广泛应用于游戏场景中。例如，京派建筑在《剑侠情缘三》场景中的运用；哥特式风格建筑在《战锤Online》场景中的运用。6.1.2建筑风格说一说你还知道哪些建筑风格，它们的特点是什么，哪些游戏中运用了这些建筑风格。6.1.3

透视规律1．平行透视平行透视是指正方体的上下两个面与地面平行，一个面与画面平行，观看者能看到这个面的真实形状时所产生的透视现象。其中，与画面垂直的线无限延长后都将消失于一个心点（观看者眼睛正对视平线上的一点），因此平行透视又叫一点透视。提示与人眼等高的一条水平线称为视平线。6.1.1建筑结构6.1.3

透视规律2．成角透视成角透视即两点透视，是指正方体的上下两个面与地面平行，观看者能看到的两个面与画面成一定角度时所产生的透视现象。此时与画面成一定角度且与地面平行的两组线无限延长后分别消失在视平线上的两个点上，这两个点称为消失点。6.1.3

透视规律3．倾斜透视倾斜透视也叫三点透视，是指正方体的所有面既不与画面平行，也不与地面平行时所产生的透视现象。此时沿各可见面边的线无限延长后分别消失在三个点上，其中有两个消失点在视平线上，还有一个消失点在视平线以上（称为天点）或以下（称为地点）。提示除上述内容外，在进行游戏场景设计时还要注意光线及构图。（1）光线：试想一下，在没有光线的情况下观察一件事物，将难以观察其具体形态，可见良好的光线可以让观看者提高对事物的认识。不仅如此，光线也是场景气氛塑造的重要因素。6.1.3透视规律提示（2）构图：是指通过一定的形式美法则对画面中的元素进行有序的排列，从而构成一个协调、完整的画面。构图方式有很多，常见的有中心点构图、十字形构图、三角形构图、对角线构图等。另外，与设计游戏角色一样，设计游戏场景时也要注意空间比例。6.1.3透视规律节奏在游戏场景设计中的运用6.26.2.1

节奏是什么节奏是一个很玄妙的设计理念，通常将节奏想象成音符更容易理解，如将多个“do”音符和停顿以不同的形式组合起来就可以得到多种不同的节奏。（1）无节奏：多个“do”音符重复、不停地出现，就是无节奏。（2）随机节奏：多个“do”音符无规律、不停地出现，就是随机节奏。其中，“do”音符的大小（也可以说波峰的高低）代表强弱，两个“do”音符之间的波谷距离代表停顿时间。这种节奏是非常自然的节奏，但易给人混乱的感觉，让人无法找到明确的设计感，通常用于表现自然生物生长状态或事物随机摆放。6.2.1

节奏是什么（3）规律节奏：多个“do”音符有规律、不停地出现，就是规律节奏。这种节奏有明确的设计感，一般用于简单场景设计或局部场景设计中。“do”音符的强弱一样的，每隔两个“do”音符会停顿一拍，如此往复。在上一节奏的基础上加了一个强音，相当于用一些重复的弱音去衬托一个强音，这个强音就是明显的视觉重点，通常用来放置主体。6.2.1

节奏是什么（4）复杂节奏：多个“do”音符不停地出现，但在强弱、停顿上都有变化，就是复杂节奏。例如，

下图中清晰可见三个明显的波峰，也就是三个细节点，但它们之间又有强度差异，层次非常丰富。这种节奏适用于复杂的场景设计中，如《哈利·波特》中的霍格沃茨学院。6.2.2节奏的运用通过6.2.1节的介绍，相信大家已经了解了节奏，现在将节奏拆分成多个元素（也就是“do”音符），每个元素都可以当作节奏的一部分进行控制，这样节奏就可以千变万化了。例如，“1”是单纯重复并且上下波动的节奏；“2”是重复并且指数式缩小的同时上下波动的节奏；“3”是在“2”的基础上对视觉重点进行了处理，处理方法是让某个元素脱离原本的规则，并且为其添加强化色——橙色。6.2.2节奏的运用“1”是单纯重复并且向内旋转排列，因为没有变化所以看不出来效果；“2”是重复并且指数式缩小的同时向内旋转排列；“3”是在“2”的基础上对视觉重点进行了处理，处理方法也是让某个元素脱离原本的规则，为其添加强化色——橙色，并且改变其形状。提示（1）与游戏角色设计一样，游戏场景设计也可以本体为原型设计、通过组合与嫁接设计及通过天马行空创造场景。其中，通过组合与嫁接设计包括不同风格建筑的结合、建筑与人物形象结合、建筑与生物形象结合等。（2）设计游戏场景时，还要注意体现其功能。（3）节奏也可以运用到游戏角色设计和游戏道具设计中。另外，游戏角色也会有不同的风格，如暗黑、哥特、朋克等。6.2.2节奏的运用设计并绘制游戏建筑——酒神坊6.3本节以游戏建筑“酒神坊”为例讲解游戏建筑的设计与绘制方法。本案例最终效果可参考本书配套素材“素材与实例”→“第6章”文件夹中的“酒神坊.psd”文件。6.3.1分析策划方案“酒神坊”设定文案酒神坊是洛阳城中有名的建筑之一，是侠义之士、逍遥剑客的必到之处，在这里他们可以举杯畅饮、高谈阔论。酒神坊也是洛阳城中最具特色的建筑，从外观上看，青砖灰瓦、红漆门窗，造型古朴；从内部装饰上看，有屏风、酒架、隔扇等，虽为酒坊，却清新优雅。从设定文案中提取关键词，得到游戏的时代背景和建筑风格。（1）时代背景：从酒神坊的到访人群可以看出，其时代背景为中国古代，因此在建筑中可加入一些中国元素，如中式酒瓶、书法等。（2）建筑风格：酒神坊的外观描述为“青砖灰瓦、红漆门窗，造型古朴”，与京派建筑风格相似，因此可以参考京派建筑进行设计。6.3.2

收集素材根据策划方案的分析结果收集素材。6.3.3绘制原画下面根据策划方案和素材图绘制酒神坊。步骤1利用3D软件创建出酒神坊的模型，并导出为Photoshop支持的格式。此处需注意，先将酒神坊合理地拆分成多个组成部分，然后将各部分简化成基本图形，如球体、圆柱体等（方便建模），接着将这些图形按照一定的节奏放置，从而形成疏密有致、主次分明的模型。步骤2在Photoshop中打开建好的模型，然后新建一个图层并以模型为基础绘制草稿。绘制完成后隐藏模型图层。步骤3新建一个图层，然后细化草稿，加入与时代背景相符合的建筑元素，并做好功能划分，让酒神坊布局更加合理，此时需注意酒神坊的透视、比例等。加入一个人物，借此表现酒神坊的大小。绘制完成后隐藏草稿图层。步骤4新建一个图层并细化出酒神坊的线稿，此时需注意线条的流畅度。细化完成后设置其图层混合模式为“正片叠底”。需要注意的是，如果想绘制直线，可首先在起点处单击，然后按住“Shift”键的同时在终点处单击；对于带有重复纹样的部分，如窗户，可暂时不进行细致刻画，后续统一添加纹样。6.3.3

绘制原画步骤5新建一个图层并为其中一扇窗户添加纹样，然后按住“Alt”键的同时拖动纹样至其他窗户处，即可复制并应用纹样到其他窗户上，采用此方法为所有窗户、墙面等添加纹样。在画面中合适位置添加文本，将其字体样式设置为书法字体，如草书、行书，并调整文本的大小和位置，然后调整酒神坊的不足之处，如修改文化长廊，增加其透气性。步骤6将除背景和隐藏图层外的所有图层合并，并设置其图层混合模式为“正片叠底”，然后在其下方新建一个名为“铺色”的图层，并用灰色（#a0a0a0）为酒神坊铺色，此时需注意色块边缘要清晰。步骤8新建一个图层并设置其图层混合模式为“正片叠底”，同样将其剪贴于“铺色”图层中，然后用灰色（#a0a0a0）绘制酒神坊中光线难以到达的地方和投影，使明暗关系更加明显。步骤7新建一个图层并设置其图层混合模式为“正片叠底”，然后将其剪贴于“铺色”图层中，接着根据光源照射方向用灰色（#a0a0a0）绘制酒神坊的背光面，此时可在图像编辑区合适位置绘制简易的光线示意图，避免绘制过程中忘记光源的照射方向。采用上述方法为地面铺色并绘制酒神坊的投影。6.3.3

绘制原画步骤9新建一个图层并设置其图层混合模式为“正片叠底”，还是将其剪贴于“铺色”图层中，然后用深灰色（#3f3f3f）绘制酒神坊中闭塞的阴影区域，如门洞。步骤10新建一个图层并设置其图层混合模式为“叠加”，将其剪贴于“铺色”图层中，然后用浅灰色（#d3d3d3）绘制酒神坊的受光面，此时需注意不要涂抹到酒神坊的背光面。步骤11将除背景和线稿图层外的所有图层合并，然后按“Ctrl+J”组合键创建图层副本，接着按“Ctrl+L”组合键打开“色阶”对话框，在其中设置参数后单击“确定”按钮调整酒神坊亮度，最后设置其图层混合模式为“正片叠底”并剪贴于原合并图层中。步骤12选择原合并图层，并在按住“Ctrl”键的同时单击图层缩览图将其载入选区，然后为其填充白色，并按“Ctrl+D”组合键取消选区。步骤13置入本书配套素材“毛笔笔刷效果.png”并放置于背景图层上方，然后设置其图层不透明度为“25%”，接着在线稿图层下方新建一个图层，并在酒瓶上方绘制烟雾。6.3.3

绘制原画步骤14在原合并图层上方新建一个图层，然后为酒神坊的各部分上固有色，此时可在图像编辑区合适位置放置线稿图和所用颜色色块，以方便绘制。再次新建一个图层，并为酒神坊门口的条幅添加纹样。步骤15新建一个图层，设置其图层混合模式为“叠加”，图层不透明度为“60%”，并剪贴于原合并图层中，接着用浅黄色（#e5e4dd）绘制酒神坊的受光面。可多次为酒神坊的受光面叠色，使其效果更加自然，然后采用同样方法绘制草坪。步骤16新建一个图层，设置其图层混合模式为“正片叠底”，图层不透明度为“55%”，并剪贴于原合并图层中，然后绘制瓦片纹理。步骤17新建一个图层，设置其图层混合模式为“柔光”，并剪贴于原合并图层中，然后绘制树木纹理。步骤18新建图层并剪贴于原合并图层中，然后绘制石头及其投影。6.3.3

绘制原画步骤19新建一个图层，设置其图层混合模式为“叠加”，图层不透明度为“75%”，并剪贴于原合并图层中，然后用浅黄色（#e2c4a4）绘制酒神坊的受光面，为其添加暖色调。可多次为酒神坊的受光面叠加暖色，使其效果更加自然。步骤20新建一个图层，设置其图层混合模式为“线性减淡”，并剪贴于原合并图层中，然后用不同明度的红色绘制灯笼处，为其添加光晕。步骤22选择背景图层并为其填充浅灰色（#f3f3f3），然后在其上方新建一个图层，并设置其图层混合模式为“正片叠底”，接着用“矩形选框工具”在图像编辑区下方绘制矩形选区，并为其填充比背景稍微深一点的灰色（#e5e5e6），最后按“Ctrl+D”组合键取消选区。步骤21在所有图层上方新建一个图层，并采用上述方法在画面合适位置绘制树木，使画面效果更加丰富，然后统一调整树木的不足之处，如添加枝丫。设计并绘制游戏场景——荒漠之城6.4本节以游戏场景“荒漠之城”为例讲解游戏场景的设计与绘制方法。本案例最终效果可参考本书配套素材“素材与实例”→“第6章”文件夹中的“荒漠之城.psd”文件。6.4.1

分析策划方案“荒漠之城”设定文案中世纪，有一座城市名为荒漠之城，它是玩家们初次进入“江湖”的接引地，是玩家们故事开启的地方。这里黄沙漫漫、连绵不绝，但阻挡不了玩家们的热情，他们将在这里谱写惊天动地的“江湖”故事。从设定文案中提取关键词，得到游戏的时代背景和场景风格。（1）时代背景：中世纪是指从公元5世纪后期到公元15世纪中期的这段时间，在这期间，出现了三大典型建筑风格——拜占庭风格、罗马风格和哥特式风格，因此场景中可加入这三种风格的建筑元素。（2）场景风格：此处绘制的游戏场景名为荒漠之城，且设定文案中有“黄沙漫漫、连绵不绝”描述，因此场景中可加入黄沙、石头等元素。6.4.2收集素材根据策划方案的分析结果收集素材。6.4.3绘制原画下面根据策划方案和素材图绘制荒漠之城。步骤1新建文档并新建一个图层，根据选定的透视和视平线高度添加透视网格。此处绘制的荒漠之城采用成角透视，并将视平线高度设置得比较低（仰视），以表现场景中建筑的宏伟、高大，同时避免画面显得呆板。另外，画面中的前景为空旷的沙漠，中景为建筑，但建筑的尽头并没有表现出来，远景为天空，如此安排可以为画面增加层次感和神秘感。步骤2新建一个图层并用不同明度的棕色绘制出荒漠之城的草稿，此时需表现出一定的黑白灰关系。绘制完成后，删除透视网格图层。步骤3细致刻画画面中的各部分，此时需表现沙漠独有的氛围，然后添加石头等元素丰富画面，同时用重色拉开画面的前后关系。步骤4用明度较高的黄色绘制黄沙的受光面。步骤5用明度较低的棕色和黑色绘制黄沙、石头等的背光面，此时需把黄沙和石头分开。答疑时间6.4.3绘制原画6.4.3绘制原画步骤6为建筑附近的天空添加蓝色（橙色的互补色），增强画面的对比，此时需注意蓝色的使用面积和纯度。另外，也可在画面中事物的背光面添加少许蓝色，丰富画面色彩。步骤7细化建筑、黄沙等，此时需表现黄沙的起伏变化，使其形象特征更加明显，然后在画面中添加一个人物，作为衡量其他事物大小的参考。需要注意的是，细化时不要一直“抠”某一事物的细节，要对画面中的所有事物都进行细化（个别情况除外），使画面表现程度统一，整体性高。至此，荒漠之城气氛图绘制完成。步骤8新建一个名为“沙漠”的图层，并细致刻画黄沙、石头等。需要注意的是，刻画时要同步调整