Tutorial: Expression Enhancement Course #3 Let's Try Using Shaders.

ACTION GAME MAKER OfficialTutorial
,
2

Let’s Create a Blur Shader

  1. Select Sprite2D in the game_scene tab.
    image
    image529×254 20.9 KB
  2. In the Inspector window, create a new ShaderMaterial via CanvasItem > Material > empty > New ShaderMaterial.
    image
    image749×841 66 KB
  3. Select it again to expand, then create a new shader.
    image
    image433×392 24.2 KB
  4. Since this is for blur, rename it to blur.gdshader and create it.
    image
    image383×355 15.2 KB
  5. Clicking blur.gdshader will open the panel where you can write the shader code. Shaders must be created using scripts.
    image
    image1564×531 65.9 KB
  6. Copy the following code and overwrite the entire content:
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. A new item called Blur Radius should now appear under Material’s Shader Parameters. Try adjusting it; you should see a blur effect applied to the background.
    image
    image432×459 17.4 KB

For Those Who Can’t Write Scripts

Godot shaders are written in a proprietary language called GDScript, so scripting is required.
However, many experienced developers have already created numerous shaders. By searching the following sites or the web, you might find a shader that suits your needs.

Integration with Animation Player

Shader parameters can also be used as animation keys. This allows you to easily implement animations using shaders, making them useful in various scenes such as warp effects or battle entry sequences.

That concludes the Expression Enhancement Course.
To enroll in other courses, please visit:

1. Graphics Course
Designed for those who want to animate their own characters.

2. Scripting Course
Designed for those who want to create various movements and systems, even with default characters.

1 Like