开发日志 08｜第七章：同一个场景，怎么变出四种风格？

修改于3 小时前5 浏览综合

大家好，我们是要在聚光灯里狠狠做福瑞游戏的“未知名称工作室”。

这次，我们采访了团队里的 TA，也就是技术美术老师，聊聊游戏画面背后的制作。

之前介绍战斗系统时，我们提到过民谣、电子、协奏曲和摇滚四种风格。除了招式和音乐，我们也希望画面能呈现不同的感觉。

为此，TA 老师在 Godot 中搭建了一套后处理系统。这篇就结合效果图，看看这些变化是怎么做出来的。

【同一套画面，四种风格】

四种风格需要分别制作四套后处理吗？

目前的方案是共用一条处理链，通过不同的参数预设调整画面。

颜色基调、像素颗粒、描边、泛光、纸纹，以及屏幕干扰等效果，都可以分别控制。组合这些效果、调整各自的强度，就能在同一套基础上呈现不同的观感。

制作时也方便对照：某种风格的颗粒太粗了，就调整对应的参数；某一层效果影响了画面，就先关掉，检查问题出在哪里。

下面挑几个比较直观的部分展开聊聊。

【先换颜色，再保留明暗】

最先处理的是颜色重映射，用来确定画面的基调。

但换颜色时，还有一个问题要处理：原来的阴影怎么办？

如果直接替换最终画面里的颜色，明暗关系也可能受到影响，物体就容易显得平。因此，这套方案将基础色与阴影分开处理，先调整底色，再根据阴影信息恢复明暗。

这样，配色可以变化，原本的层次也能尽量保留下来。

轮廓则通过深度和法线描边强化。简单来说，系统会参考相邻位置的远近和表面朝向变化，寻找物体边缘，再结合阴影信息调整描边颜色。

晶体、霓虹等高亮部分，还可以通过泛光来突出：提取画面中的亮部，经过模糊，再叠回画面。

这些步骤分别处理颜色、轮廓和亮部，最后一起决定我们看到的效果。

这次 TA 老师特别介绍了 Bayer 有序抖动。

名字看着有点陌生，先看对比图会容易理解一些。

【图1】Bayer 关闭与开启对比

使用有限色板时，画面能用的颜色变少了，渐变容易出现明显的分层。

Bayer 点阵会按照固定的阈值排列，让邻近像素交替选择两种色板颜色，通过改变它们各自占据的比例，表现中间色，减轻色带。

有点像用两种颜色的拼豆做渐变。每一颗的颜色没有变化，但排列比例不同，整体看上去就有了更多层次。

目前使用的是 4×4 矩阵。以 50% 的覆盖率为例，每组 16 个格子里，大约有 8 个会使用次选色。

【图2】Bayer 矩阵效果图

这些点阵固定在逻辑像素格上，不会每一帧随机变化。它负责的是色阶表现，并不是阴影边缘的抗锯齿。

在阴影分离的处理路径中，底色和阴影的抖动还可以单独控制，分别调整程度。

另外，像素覆盖采样会统一颗粒尺寸，再配合色板和点阵，让整体的像素质感保持一致。

【VHS 和 CRT，复古的方式也不一样】

接下来是两种比较容易从画面上辨认的效果。

VHS 主要模拟磁带播放时的抖动、色彩错位与噪声；CRT 则加入屏幕曲面、扫描线和栅格等表现。

【图3】原图、VHS、CRT 对比图

同一个场景，经过这两种处理，就有了不同的观看感觉。

不过，这些效果都需要控制强度。扫描线、噪声和色差加上去之后，还得检查角色和场景细节是否清楚。静态截图里合适的效果，放到持续移动的战斗画面中，也需要再看一遍。

所以，目前各模块都可以单独开关、调整参数，方便比较不同程度下的表现。

Glitch 故障效果也是处理链中的一部分。

它通过画面切片偏移、局部扭曲和颜色通道错位，再叠加扫描线与噪声，制造数字干扰的感觉。

【插入 Glitch 故障效果图】

它和 VHS 都可能出现抖动、错位，但具体的组合方式不同，呈现出来的质感也不同。

除此之外，系统还加入了柔化、纸纹、明暗层级和漫画网点，用来补充画面的不同质感。暗角则通过调整边缘的明暗和颜色，让视线更集中。

这些效果最终要根据风格需要进行取舍，并不需要每一项都开到最明显。

【这么多效果，怎么接到一起？】

TA 老师也介绍了这套系统的处理顺序。

场景颜色先经过重映射和风格合成，再进行描边，随后依次处理 Glitch、VHS、暗角和 CRT，最后显示 HUD。

不同阶段之间，通过 BackBufferCopy 读取上一阶段的结果，让后面的处理接着前面的画面继续进行。像素、纸纹和色板等模块，则合并在风格 Shader 中。

深度与法线信息用来生成边缘遮罩，供描边使用；高亮部分单独提取和模糊后，再进入风格合成。

每个模块保留独立开关，就能逐层查看变化。效果不对时，可以先排除某一层，而不用面对整张画面猜原因。调好的参数保存成预设，也方便反复切换、比较四种风格。

HUD 放在处理链的最后，让场景效果和界面显示分开安排。

#聚光灯gamejam开发者日志

聚光灯游戏创作挑战

9.1

前往论坛