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

Waveforms

2D mirror effect

VHS and CRT monitor effect

Related shaders

2D Wavy Effect

Glitch Effect Shader

Glitch Effect Shader for Godot Engine 4

Subscribe
Notify of
guest

21 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lazyProgrammer
3 years ago

This is a great shader effect

Thanks for sharing

hani098
2 years ago
Reply to  lazyProgrammer

how did you setup your world environment?

cyzaine
cyzaine
3 years 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
3 years ago

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

Beebster
Beebster
3 years 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 3 years ago by beebster
sean
sean
2 years ago
Reply to  pend00

is there any way to offset so that the pixel effect matches the sprite, for me it is shifted over when I put in the pixel amount for my sprite (covers a quarter of each pixel but never a full pixel) https://imgur.com/a/MwHbozD

dhead92
dhead92
3 years 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
3 years ago
Reply to  pend00

Thank You!

Maxim Kim
Maxim Kim
3 years 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
3 years 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 3 years ago by Maxim Kim
Maxim Kim
Maxim Kim
3 years 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 3 years ago by Maxim Kim
JUN
JUN
3 years ago
Reply to  Maxim Kim

maybe you should change the beamsize(it performs perfect when i change it to 0.02

Kirby
Kirby
3 years ago

Hey there!
Just wanted wanted to know if someone else here has an idea on how to fix my issue with this shader.
Im trying to apply this shader to a panel with a custom style but as soon as I apply this shader it turns the whole panel white and I’m unsure as to what is causing this and how to fix it.
On everything else that is not using a custom style it is working splendidly though.

Much love~

Sven
Sven
2 years ago

@pend00 Hi, that’s a really nice shader.
Is there any way to “flip it”, so the disappear starts at the bottom and ends at the top?
That would help me a lot!

Beider
1 year ago
Reply to  Sven

Hey, I just wanted to do the same and the key line is line 41,

float noise = noise(UV * noise_desnity) * UV.y;

If you change it to UV.x you will get horizontal. And if you want to get the inverse change it to (1.0 – UV.x)

So here is a list for all directions, pick the one you need. Or implement an input and switch between them, which is what I did.

float noise = noise(UV * noise_desnity) * UV.y;
float noise = noise(UV * noise_desnity) * UV.x;
float noise = noise(UV * noise_desnity) * (1.0- UV.y);
float noise = noise(UV * noise_desnity) * (1.0- UV.x);
Loneliiii
Loneliiii
1 year ago

The Shader is awesome, it also works with Godot 4, but one line need to be changed 🙂

uniform vec4 color : source_color = vec4(0.0, 1.02, 1.2, 1.0);