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 pixels = SCREEN_UV / SCREEN_PIXEL_SIZE;
	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;
}

Tags