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

Shield with impact waves

Water-like wavelet

Frosty Rotative Deformation

Related shaders

Animated Fade Shader with Additional Effects

Cut Out shader

slice texture

Notify of

Newest Most Voted
Inline Feedbacks
View all comments
4 months ago

doesn’t work for me

1 month ago

Thank you very much! It can work ,very good