Tutorial: Expression Enhancement Course #3 – Using Shaders

ACTION GAME MAKER OfficialTutorial/チュートリアル
,
1

In this course, you’ll learn various visual expression techniques in ACTION GAME MAKER.
The third session focuses on how to use shaders.

Preparation Before Starting the Course

We’ll continue using the same project from Course #2.
If you have not done so yet, please open the project now and get ready.

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.