Teleport effect

Make an object dissapear in a bright glow, like it is being teleported away. See the effect in action in the animation below.

Glow
Adding the shader code will make the character dissappear but it won’t make the effect glow. For that you will have to add an Environment node:

  1. Add an Environment node to the scene
  2. Set Background > Mode to “Canvas”
  3. Under Glow, check “Enabled”.
  4. Play with the “Intensity”, “Strength” and “Blend Mode” properties to get the effect you want. (I use Screen blend mode.)
  5. You can also set color as “Raw” values over 1.0 to crank up the glow (the default color is set like this, in a cyan hue).
Shader code
/*
Shader from Godot Shaders - the free shader library.
godotshaders.com/shader/teleport-effect

This shader is under CC0 license. Feel free to use, improve and 
change this shader according to your needs and consider sharing 
the modified result on godotshaders.com.
*/

shader_type canvas_item;

uniform float progress : hint_range(0.0, 1.0);
uniform float noise_desnity = 60;
uniform float beam_size : hint_range(0.01, 0.15);
uniform vec4 color : hint_color = vec4(0.0, 1.02, 1.2, 1.0);

// We are generating our own noise here. You could experiment with the 
// built in SimplexNoise or your own noise texture for other effects.
vec2 random(vec2 uv){
    uv = vec2( dot(uv, vec2(127.1,311.7) ),
               dot(uv, vec2(269.5,183.3) ) );
    return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
}

float noise(vec2 uv) {
    vec2 uv_index = floor(uv);
    vec2 uv_fract = fract(uv);

    vec2 blur = smoothstep(0.0, 1.0, uv_fract);

    return mix( mix( dot( random(uv_index + vec2(0.0,0.0) ), uv_fract - vec2(0.0,0.0) ),
                     dot( random(uv_index + vec2(1.0,0.0) ), uv_fract - vec2(1.0,0.0) ), blur.x),
                mix( dot( random(uv_index + vec2(0.0,1.0) ), uv_fract - vec2(0.0,1.0) ),
                     dot( random(uv_index + vec2(1.0,1.0) ), uv_fract - vec2(1.0,1.0) ), blur.x), blur.y) * 0.5 + 0.5;
}

void fragment()
{
	vec4 tex = texture(TEXTURE, UV);
	
	float noise = noise(UV * noise_desnity) * UV.y;
	
	float d1 = step(progress, noise);
	float d2 = step(progress - beam_size, noise);
	
	vec3 beam = vec3(d2 - d1) * color.rgb;
	
	tex.rgb += beam;
	tex.a *= d2;
	
	COLOR = tex;
}
Tags
dissolve, environment, glow, space
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 pend00

VHS and CRT monitor effect

2D mirror effect

Energy Beams

Related shaders

Electric arc effect

2D mirror effect

VHS and CRT monitor effect

guest
14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lazyProgrammer
lazyProgrammer
5 months ago

This is a great shader effect

Thanks for sharing

cyzaine
cyzaine
4 months ago

Clear instructions and a great effect that’s super versatile! Using it as a death animation in a pixel art prototype. Thanks a lot.

VanillaGameDev
VanillaGameDev
4 months ago

Great shader I use it in my dash mechanic and is more like 101% better than before.

Beebster
Beebster
4 months ago

Works perfecty! Thank you for you’re clear steps. Any ideas how I could make the effect more low-res and pixelated? Noise density is great but I would love to be adjust the pixel resolution so that it was nice and chunky 🙂

Last edited 4 months ago by beebster
dhead92
dhead92
4 months ago

im sorry noob here. i put the shader as the material on my animated sprite. i can manually set the progress as say .1 and so on but how do i make the effect play out?? im missing something here. it doesn’t play the effect but im sure its something im not doing.

dhead92
dhead92
4 months ago
Reply to  pend00

Thank You!

Maxim Kim
Maxim Kim
4 months ago

It doesn’t look like in your gif at all :). For me it looks like dissolve — no top to bottom “disappearing” effect —comment image

And would/should it work with GLES2?

Maxim Kim
Maxim Kim
4 months ago
Reply to  pend00

I have just applied material with this shader to the sprite (256×256).

Huh, let me check — my sprite is a texture with 16 frames, it might be the reason

Yes, indeed! It works if applied to a non-framed sprite. Now I have to figure out how to apply it for a framed one.

Last edited 4 months ago by Maxim Kim
Maxim Kim
Maxim Kim
4 months ago
Reply to  pend00

Unfortunately no, It would take too much efforts to redo all my animations. I might have a workaround, like replace spritesheet with single cutout sprite when I need this effect to be applied. Again not sure about it.

And the shader itself is really cool, thank you!

If only it would be possible to apply the shader to the parent node…

— Node2D: <— with material and shader
———Sprite: <— with framed texture animated by AnimationPlayer

Last edited 4 months ago by Maxim Kim