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
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

Frosty Rotative Deformation

Trampoline

Swirl/Sink

Related shaders

Animated Fade Shader with Additional Effects

2D Topdown Shadow that goes out of bounds

9-slice shader

Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
rsvd
rsvd
9 months ago

doesn’t work for me

RoseBloom
RoseBloom
6 months ago

Thank you very much! It can work ,very good