チュートリアル：表現強化コース #3 – シェーダーの使用

アクションゲームメーカー チュートリアル
,
1

このコースでは、ACTION GAME MAKERでさまざまな視覚表現テクニックを学びます。
第3回では、シェーダーの使い方について解説します。

コース開始前の準備

コース#2と同じプロジェクトを引き続き使用します。
まだ開いていない場合は、今すぐプロジェクトを開いて準備してください。

官方教程中文目录汇总
Tutorial/Manual: table of contents
Tutorial: Expression Enhancement Course #2 – Using Light and Shadow
2

Let’s Create a Blur Shader

  1. Open the game_scene tab and select the Sprite2D node.
    image
    image529×254 20.9 KB
  2. In the Inspector, go to CanvasItem > Material > empty, and select New ShaderMaterial.
    image
    image749×841 66 KB
  3. Click it again to expand the menu, then create a new Shader.
    image
    image433×392 24.2 KB
  4. Since it’s a blur shader, name it blur.gdshader when saving.
    image
    image383×355 15.2 KB
  5. Click on blur.gdshader. The panel will switch to a code editor for shader scripts.
    image
    image1564×531 65.9 KB
  6. Copy and paste the following code to overwrite everything in the shader:
shader_type canvas_item;

uniform float blur_radius : hint_range(0.0, 10.0); // blur strength

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. In the Material > Shader Parameters, you’ll now see a new parameter called Blur Radius. Adjust the value to see the background become blurry.
    ![image|432x459]

For Those Who Say “I Can’t Write Scripts!”

Godot uses its own shading language called GDSL, and shaders must be written in code.
However, many creators have already made a wide variety of shaders. You might find one that suits your needs by searching online or visiting sites like:

:globe_with_meridians: https://godotshaders.com/

Working with the AnimationPlayer

The blur_radius shader parameter can also be animated using the AnimationPlayer.
This makes it very easy to create animated effects using shaders—great for teleportation effects, battle transitions, and more.

This concludes the Visual Effects Course.
If you’re interested in other tutorials:

1. Graphics Course
For those who want to animate their own original characters.

2. Scripting Course
For those who are fine using default characters but want to build various mechanics and systems.