手册: Shader & HDR Sample

概要

本手册是 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,即让明亮的地方产生晕染扩散的效果)。

本示例关卡的制作步骤

本关卡的制作流程如下:

  1. 前往“项目设置 > 常规 > 渲染 > 视口”,启用 HDR 2D。(此步骤在每个项目中只需设置一次)
  2. 添加 WorldEnvironment 节点,配置调光和辉光 (Glow) 设置。
  3. 在各个图像的调制功能中,使用 RAW 参数来调整亮度。
  4. 如果画面变得过亮,使用 CanvasModulate 节点将整体调暗。
  5. 利用着色器和粒子系统来配置画面特殊效果。

接下来将解说在各个具体场景中分别进行了怎样的设置。

各场景设置介绍

神秘森林 (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。商店是在 WallLayerWall 瓦片地图图层中设置的,同样也将其调亮了。

CanvasModulate 设置

此地图中未使用。

各有着色器/粒子设置

  • RainDropEffect:通过对画面的部分区域进行扭曲,从而实现了屏幕表面附着水滴的视觉效果。
  • rain:用于表现落雨效果的粒子系统。
  • rainsplash:用于表现雨滴在地面上飞溅效果的粒子系统。由于它仅仅是设置在特定的直线上产生粒子,因此在非平坦的地图关卡中可能不太方便直接使用。
2 个赞