Godot Shader Generator: 2D Outline, Dissolve and More

Choose one of eight 2D effects, set its colors, widths and speeds while a live preview runs on a sample sprite, and get a ready-to-use Godot 4 canvas_item shader. Every setting becomes a uniform with your value as the default, so you can keep tweaking it in the Inspector or animate it from GDScript.

Step 1 of 3: Effect
Which 2D effect do you need? All of them are canvas_item shaders for Godot 4.

How to use it

  1. Choose an effect such as Outline, Hit flash or Dissolve, and press Next.
  2. Pick the colors and drag the sliders while the preview updates, or press Reset to defaults, then press Next.
  3. Check the uniform list, change the file name if you like, and press Generate shader.
  4. Press Copy code or Download .gdshader, and Copy script for effects you trigger from code.
  5. In Godot, give your sprite a New ShaderMaterial under CanvasItem > Material and drag the .gdshader onto its Shader property.

How a Godot 4 canvas_item shader works

Every 2D shader starts with shader_type canvas_item; and runs its fragment() function once per pixel of the node. COLOR is both the input and the output: it arrives as the node's modulate color multiplied by the pixel from the default TEXTURE, and whatever you write to it is drawn. UV runs from 0 to 1 across the texture, and TEXTURE_PIXEL_SIZE is the size of one texel, for example vec2(1.0 / 64.0, 1.0 / 32.0) for a 64 x 32 sprite, which is how the outline and wave effects measure distances in pixels.

Shaders that sample TEXTURE again at another UV, such as outline, pixelate, palette swap, wave and scrolling, read the texture without the modulate color. These shaders copy COLOR into a varying in vertex() and multiply it back in, which is the method the Godot docs give, so changing the node's Modulate in the Inspector still tints the sprite.

A uniform with source_color shows a color picker in the Inspector, and hint_range(min, max, step) shows a slider. The value after = is the default. From GDScript, call material.set_shader_parameter("outline_width", 2.0) with the uniform's exact name.

Tips for each 2D effect

Outline and wave: a fragment shader can only color pixels inside the node's rectangle, so it cannot draw past the edge of the texture. Leave transparent padding around the art, at least as wide as the outline or the wave amplitude.

Hit flash and dissolve: both keep their animated value at 0 and come with a short GDScript function that tweens it, flash() from 1 to 0 over 0.15 seconds and dissolve() from 0 to 1 over 0.6 seconds before freeing the node. A ShaderMaterial is a shared resource, so if every enemy uses the same one they all flash together; tick Local to Scene on the material and Godot duplicates it for each scene instance.

Palette swap compares each pixel with the original colors, so it suits pixel art with a small palette; raise the tolerance a little for art with slight color noise. Scrolling texture needs a seamless image, and setting CanvasItem > Texture > Repeat to Enabled keeps linear filtering from showing a seam at the wrap. On sprite sheets, UV covers the whole sheet, so the dissolve noise scale and the wave count apply to the sheet rather than to one frame; pixel-based settings like outline width and block size are unaffected.

Moving shaders from Godot 3 to Godot 4

Godot 4 only loads the .gdshader extension, so rename old .shader files. The hint_color and hint_albedo uniform hints are now source_color, and texture filter and repeat modes are set on individual sampler uniforms instead of on the texture files.

The built-in SCREEN_TEXTURE was removed in Godot 4. To read what is already drawn behind a node, declare uniform sampler2D screen_texture : hint_screen_texture; and sample it with SCREEN_UV. The effects in this generator only read the node's own texture, so they need no screen texture.

Frequently asked questions

How do I add an outline to a sprite in Godot 4?
Generate the Outline shader here, save the .gdshader in your project, then select the Sprite2D, choose New ShaderMaterial under CanvasItem > Material and drag the shader onto its Shader property. Make sure the texture has transparent padding around the art, because the outline is drawn inside the sprite's rectangle.
Which Godot versions do these shaders work in?
Godot 4.3 and newer. They use only the Godot 4 shading language features canvas_item shaders have had since 4.0, and were checked in Godot 4.3 and 4.7 with both the Forward+ and Compatibility renderers.
How do I make a sprite flash white when hit in Godot?
Use the Hit flash shader with a white flash color and add the generated flash() function to the sprite's script. Call flash() when the character takes damage and it tweens flash_amount from 1 back to 0.
Does the dissolve shader need a noise texture?
No. It builds value noise inside the shader from the UV, so it works on its own. Raise Noise scale for smaller blobs and Edge width for a thicker glowing border.
Can I use these shaders on AnimatedSprite2D, TextureRect or TileMapLayer?
Yes. They are canvas_item shaders, so they work on any 2D node or Control that has a Material property. On sprite sheets and tile atlases, settings measured in pixels behave the same, while the dissolve noise and wave count span the whole sheet.

See all tools