Slice and Fade out

This shader allows you doing the oldschool “slice and fade” or “ninja fade” effect.

  • offset : The UV offset (in x)
  • fade : The max UV offset upon the fade out is complete (thus, if offset equals fade, the sprite disappears).
  • strip : The stripe thichness in pixels.
  • direction : The direction in which the sprite divides

Use an animation player to make a progression of offset from 0 to fade . Note that the optimal values of offset and fade depends on your taste. Please also note that the effect takes place in a sprite. If your sprite padding is not big enough, you won’t be able to perform the effect (unless you use a trick like enclosing the sprite into a wider container).

Shader code
shader_type canvas_item;

uniform vec2 direction = vec2(.0, .5);

uniform float offset : hint_range(0., 1.);

uniform float fade : hint_range(0., 1.);

uniform float strip = 4.;

void fragment() {
	vec2 norm = normalize(direction);
	vec2 pdir = vec2(norm.y, -norm.x);
	vec2 corrected_uv = UV + ((float(int(dot(pdir, pixels) / strip) & 0x1) * 2.) - 1.) * offset * pdir;
	vec4 color = texture(TEXTURE, corrected_uv);
	color.a *= clamp(1. - offset/fade, 0., 1.);
	COLOR = color;
fade out, ninja, slice
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from CasualGarageCoder

2D Fountain

Shield with impact waves

Shining Sprite Effect

Related shaders

Cut Out shader

9-slice shader

Color reduction and dither


Inline Feedbacks
View all comments