教程:表达式增强课程 #3 – 使用着色器

在本课程中,您将学习 ACTION GAME MAKER 中的多种视觉表现技巧。
第三讲将重点介绍如何使用 着色器(shaders)


课程开始前的准备

我们将继续使用 课程 #2 中的同一个项目。
如果您尚未打开该项目,请现在打开并做好准备。

让我们创建一个模糊着色器

  1. 打开 game_scene 标签页并选择 Sprite2D 节点。
  2. Inspector(检查器)中,进入 CanvasItem > Material > empty,然后选择 New ShaderMaterial
  3. 再次点击它以展开菜单,然后创建一个新的 Shader
  4. 由于这是一个模糊着色器,保存时将其命名为 blur.gdshader
  5. 点击 blur.gdshader。面板将切换到着色器脚本的代码编辑器。
  6. 复制并粘贴以下代码以覆盖着色器中的所有现有内容:
shader_type canvas_item;

uniform float blur_radius : hint_range(0.0, 10.0); // 模糊强度

void fragment() {
    vec2 size = vec2(textureSize(TEXTURE, 0));
    vec2 uv = UV;

    vec4 sum = vec4(0.0);
    int blur_size = int(blur_radius);

    for (int x = -blur_size; x <= blur_size; x++) {
        for (int y = -blur_size; y <= blur_size; y++) {
            vec2 offset = vec2(float(x), float(y)) / size;
            sum += texture(TEXTURE, uv + offset);
        }
    }

    float samples = pow(float(blur_size * 2 + 1), 2.0);
    COLOR = sum / samples;
}
  1. Material > Shader Parameters 中,您现在会看到一个名为 Blur Radius 的新参数。调整该值即可看到背景变得模糊。
    ![image|432x459]

对于那些说“我不会写脚本!”的人

Godot 使用其自己的着色语言 GDSL,着色器必须用代码编写。
然而,许多创作者已经制作了各种各样的着色器。您可以通过在线搜索或访问以下网站找到适合您需求的着色器:

:globe_with_meridians: https://godotshaders.com/


与 AnimationPlayer 配合使用

blur_radius 着色器参数也可以使用 AnimationPlayer 进行动画处理。
这使得使用着色器创建动画效果变得非常容易——非常适合制作传送效果、战斗过渡等。


视觉特效课程 到此结束。
如果您对其它教程感兴趣:

1. 图形课程
适合希望动画化自己原创角色的用户。

2. 脚本课程
适合希望使用默认角色但构建各种机制和系统的用户。