概要
本手册是 ACTION GAME MAKER 附带的示例项目 “Shader & HDR Sample” 的解说文章。
关于 Shader & HDR Sample
该示例项目展示了通过结合 Godot Engine 的功能——“HDR 2D” 功能、“着色器 (Shader)” 功能和 “WorldEnvironment” 功能,可以实现怎样的画面视觉表现。
以下两张图片使用的是完全相同的、仅限示例素材的内容。
ON
OFF
Shader & HDR Sample 的关卡构成
本关卡由神秘森林、灼热火山洞窟、冰封雪原、明亮耀眼的草原、雨中的霓虹都市这 5 个场景组成,并按照着色器开启/关闭的顺序循环切换。
测试播放的操作方法
键盘左右方向键移动,Z 键跳跃。
技术解说
简单术语说明
- HDR 2D (High Dynamic Range 2D)
HDR 是一种比普通画面在更广阔的色彩区域内表现白与黑的技术。换句话说,它能够表现出更真实、高精度且如同照片般的明暗对比。不过需要注意的是,如果使用的显示器或显卡不支持 HDR,则可能无法完美呈现这种表现效果。 - 着色器 (Shader)
着色器是一种通过程序对图像进行调制、变形或扭曲,从而实时绘制出“光芒闪烁”、“水流”、“画面畸变”等特殊效果的功能。虽然这需要使用被称为着色器语言的专用编程语言,但它能够实现非常高级的视觉表现。
*ACTION GAME MAKER 的滤镜、画面效果功能以及水节点等,也都是利用这种着色器来实现的。 - WorldEnvironment
WorldEnvironment 与着色器类似,同样可以产生特殊效果,但它会影响整个场景。顾名思义,它是用来决定“世界”的“环境”的。特别是在 2D 游戏中,它常用于实现辉光 (Glow,即让明亮的地方产生晕染扩散的效果)。
本示例关卡的制作步骤
本关卡的制作流程如下:
- 前往“项目设置 > 常规 > 渲染 > 视口”,启用 HDR 2D。(此步骤在每个项目中只需设置一次)
- 添加 WorldEnvironment 节点,配置调光和辉光 (Glow) 设置。
- 在各个图像的调制功能中,使用 RAW 参数来调整亮度。
- 如果画面变得过亮,使用 CanvasModulate 节点将整体调暗。
- 利用着色器和粒子系统来配置画面特殊效果。
接下来将解说在各个具体场景中分别进行了怎样的设置。
各场景设置介绍
神秘森林 (scene1_forest.tscn)
WorldEnvironment 节点设置
- 背景 > 模式:Canvas(在 2D 游戏中无需过多思考,直接设置为 Canvas 通常就可以了)
- 辉光 (Glow) > 级别:强度控制亮度,辉光 (Bloom) 控制晕染的范围。混合模式从默认的“Add(相加)”改为了“Mix”,因为默认设置会让画面变得过亮。
- 调整 (Adjustments):为了营造神秘的氛围,调高了对比度以强调明暗,同时将饱和度 (Saturation) 设得较低。
精灵调制 (Sprite Modulation)
为了营造诡异的氛围,我们在微调各个节点颜色的同时,将部分节点的 RAW 值设置为了 2。
在关闭 HDR 的情况下,RAW 值最高只能设置为 1.0。但只有在开启 HDR 时,才能将其设置为超过 1.0 的值。也就是说,1.0 以上代表超越了普通最大亮度的极亮状态。
我们在 WorldEnvironment 中进行了配置,使这些 RAW 值超过 1.0 的节点能够发出辉光。
CanvasModulate 设置
为了产生晕染效果而将 RAW 值设在 1.0 以上时,会带来画面整体过亮的副作用。因此,我们使用 CanvasModulate 让画面稍微变暗。由于 CanvasModulate 的效果是在晕染效果产生之后才会反映出来的,所以能够做到在保持暗色调的同时依然产生光芒晕染的效果。
各有着色器设置
- Godray:用于表现照射进森林中的林间光束。
- Shader_Fog:用于表现雾气。
- Shader_Vignette:用于表现暗角效果。通过将画面四角变暗,来营造出一种类似老胶片电影的氛围。
灼热火山洞窟 (scene2_volcano)
WorldEnvironment 节点设置
- 背景 > 模式:Canvas
- 环境光 (Ambient Light):因为是火山洞窟,所以指定了整体偏暗红的颜色。能量(亮度)设置得比较低。
- 色调映射 (Tonemap):在森林场景中没有更改过此项,但在这里我们将其修改为了 ACES。ACES 能够展现出更强烈、更有生气的辉煌感,因此非常适合暗色调的地图。
- 辉光 (Glow) > 级别:将亮度调得非常高,混合模式设为“Add(相加)”,以此呈现出极为强烈的刺眼光芒。在此之后,通过 CanvasModulate 将整体调暗,从而让这些明亮的地方更加显眼。
精灵调制 (Sprite Modulation)
背景整体都设置了 4 左右的强烈 RAW 亮度值。
CanvasModulate 设置
由于这张地图原本会变得极度明亮,因此我们把红色设为 0.4,其余设在 0.2 以下,让画面变得非常昏暗。虽然在这个示例中玩家身上附加了光源所以能看清,但如果没有光源的话,暗到连玩家的身影都无法看清。
各有着色器/粒子设置
- Shader_Vignette:与森林场景相同,用于表现暗角效果。
- Heat_Noise:用于表现因高温热气而使画面产生扭曲的效果。
- Shadow_Gradation:因为在洞窟内,所以加上了渐变,使得越往上方画面越暗。
- Sparkle_particle:用于表现从地面飘升的火星的粒子系统。
冰封雪原 (scene3_snow)
WorldEnvironment 节点设置
- 背景 > 模式:Canvas
- 环境光 (Ambient Light):因为是雪原,所以选用了蓝色,能量(亮度)设为 0.5,稍微偏低。
- 色调映射 (Tonemap):这里也修改为了 ACES。曝光度 (Exposure,即相机光圈) 设置为 1.2,使画面能够更强烈地呈现明亮感。
- 辉光 (Glow) > 级别:为了表现雪地的反射,将辉光 (Bloom) 稍微调强了一些。此外,将 HDR 阈值设为 1.1,从而防止普通的纯白(仅仅是雪的白色)也错误地发光。
精灵调制 (Sprite Modulation)
这次没有对背景进行调制,相反,我们将瓦片地图 (TileMap) 的值提高到了 1.3,通过使其变亮来表现出雪原在闪闪发光的效果。
CanvasModulate 设置
由于原本的地图紫色调较重,因此我们减弱了红色通道,使整体色调看起来更偏向冰冷的蓝色。
各有着色器/粒子设置
- Shader_Vignette:虽然使用的是和森林、火山相同的着色器,但通过将颜色更改为白色,从而表现出相机镜头边缘被冻结的效果。
- Snow_particle:用粒子系统表现飘落的雪花。(其实这只是把火山的火星粒子稍微修改了一下参数而已)
明亮耀眼的草原 (scene4_grassland)
WorldEnvironment 节点设置
- 背景 > 模式:Canvas
- 环境光 (Ambient Light):带有一点夕阳的感觉,所以选用了橙色。
- 色调映射 (Tonemap):为了让草原明亮地闪烁,设置为了 ACES。
- 辉光 (Glow) > 级别:为了表现草原反射太阳光的效果,将辉光 (Bloom) 稍微调强了一些。
光照设置
为了表现太阳光,这次加入了两个光源:
- DirectionalSunLight2D:太阳光的主体光源。
- PointSunlight2D:在画面右上方向准备了一个巨大的点光源。其设计意图是随着关卡的推进,能呈现出一种微微逆光的效果。
精灵调制 (Sprite Modulation)
因为有太阳光照射,整体原本就很亮,所以背景精灵全部被调制成了较暗的颜色。
相反,唯独将草丛 (BaseDecoration) 的值提高到了 1.2,以此表现出因受到阳光照射而发光晕染的效果。
CanvasModulate 设置
此地图中未使用。
各有着色器/粒子设置
- 草丛 (BaseDecoration) 的 grass_windshader:通过在瓦片地图 (TileMap) 上配置着色器,表现出了草丛随风摇曳的效果。由此可见,不仅是单独的精灵,在这样的瓦片图层上也是可以附着色器的。
- Fluff_Particle:为了表现类似植物绒毛在风中轻飘飘飞舞的效果而加入的粒子系统。
雨中的霓虹都市 (scene5_city)
WorldEnvironment 节点设置
- 背景 > 模式:Canvas(在 2D 游戏中无需过多思考,直接设置为 Canvas 通常就可以了)
- 环境光 (Ambient Light):为了营造出霓虹灯的氛围,加入了一抹微弱的紫色光芒。
- 色调映射 (Tonemap):为了让霓虹灯璀璨夺目,设置为了 ACES。
- 辉光 (Glow) > 级别:这次使用了一个叫做 GlowMap 的功能。通常情况下,晕染会使用原本的颜色(白光则晕染出白光),但配置了该功能后,就会按照指定的颜色进行晕染。在当前的设置下,暗光发蓝,明光发紫,任何晕染都会被强制转换为霓虹色彩。
精灵调制 (Sprite Modulation)
背景精灵虽然只有 DistantView 这一张,但为了使其变亮,将其数值设为了 1.5。商店是在 WallLayer 的 Wall 瓦片地图图层中设置的,同样也将其调亮了。
CanvasModulate 设置
此地图中未使用。
各有着色器/粒子设置
- RainDropEffect:通过对画面的部分区域进行扭曲,从而实现了屏幕表面附着水滴的视觉效果。
- rain:用于表现落雨效果的粒子系统。
- rainsplash:用于表现雨滴在地面上飞溅效果的粒子系统。由于它仅仅是设置在特定的直线上产生粒子,因此在非平坦的地图关卡中可能不太方便直接使用。








