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

VHS and CRT monitor effect

2D waterfall

Related shaders

Glitch Effect Shader

Earthbound-like battle background shader w/scroll effect and palette cycling

Mosaic/Pixelization Effect Shader

guest

18 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lazyProgrammer
lazyProgrammer
1 year ago

This is a great shader effect

Thanks for sharing

hani098
hani098
22 days ago
Reply to  lazyProgrammer

how did you setup your world environment?

cyzaine
cyzaine
1 year 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
1 year ago

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

Beebster
Beebster
1 year 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 1 year ago by beebster
sean
sean
8 months 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
1 year 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
1 year ago
Reply to  pend00

Thank You!

Maxim Kim
Maxim Kim
1 year 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
1 year 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 1 year ago by Maxim Kim
Maxim Kim
Maxim Kim
1 year 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 1 year ago by Maxim Kim
JUN
JUN
1 year ago
Reply to  Maxim Kim

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

Kirby
Kirby
11 months 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~