Teleport effect

pend00

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;
}
Live Preview
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

Related shaders

Comments 24

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

    4

  4. 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 :)

    1

    2. Don't know if you tried, but I had to go back and try it for myself just to see the effect. Making it more pixelated is actually really cool! And simple, just replace the old noise generation (line 41) with this and add a uniform for pixel_amount.

      vec2 grid_uv = round(UV * float(pixel_amount)) / float(pixel_amount);
float noise = noise(grid_uv * noise_desnity) * UV.y;
      3

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

        1

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

    1

    1. Yes, so you will have to animate the value. I think the simplest way is to use an AnimationPlayer and hook up the 'Progress' shader parameter like you would hook up any other property. You could also do it in code with, for example, a Tween.

      2
  6. Maxim Kim

    It doesn't look like in your gif at all :). For me it looks like dissolve -- no top to bottom "disappearing" effect -- https://i.imgur.com/waY0Z4r.png

     

    And would/should it work with GLES2?

    0

    1. That's odd, not sure why that is without knowing more about your setup. It should work fine with GLES2. It is the multiply with UV.y on row 41 that makes the vertical movement. Perhaps try to play around with that and see if there is any effect.

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

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

         

        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.

        0

        1. Ok, so it is probably applying the effect on the whole texture. It should work with an AnimatedSprite, if that could be a solution.

          0

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

            0

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

      1
  7. Kirby

    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~

    0

  8. @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!

    0

    1. 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);
      2
  9. Loneliiii

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

    15

    1. Thanks for sharing.

       

      How did you go about reproducing the glow in Godot 4.3? I put the material on a sprite and experimented a bit with a WorldEnvironment, but it turned everything solarized and wasn't specific to the sprite's position.

      0