Screentone scene transition

In Color is the color of transition in effect
Out Color is the color of transition out effect

In Out set which color to pick, If the value greater than 0.5. The color will be Out color otherwise it will be the In color.

Position the a slide from -1.5 to 1 if it set to 1, whole screen will be reveal. If it -1.5, whole screen will be cover.

Size size of circles

Shader code
shader_type canvas_item;

uniform vec4 in_color:hint_color;
uniform vec4 out_color:hint_color;

uniform float in_out:hint_range(0.,1.)=0.;

uniform float position:hint_range(-1.5,1.) = 0.856;
uniform vec2 size = vec2(16., 16.);

void fragment(){
    vec2 a = (1./SCREEN_PIXEL_SIZE) / size;
    
    vec2 uv=UV;
    uv *= a;
    
    vec2 i_uv = floor(uv);
    vec2 f_uv = fract(uv);
    
    float wave = max(0.,i_uv.x/(a.x) - position);
    
    vec2 center = f_uv*2.-1.;
    float circle = length(center);
    circle = 1. - step(wave,circle);
    
    vec4 color = mix(in_color, out_color, step(0.5, in_out));
    
    COLOR=vec4(circle) * color;
}
Tags
screentone, transition
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 vanviethieuanh

2D lightning

Related shaders

Screentone – Black spaced pixels

Hex Transition Shader

Hole Texture Transition

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Samuel Onome Harrison
Samuel Onome Harrison
3 years ago

Amazing. Thank you

NVenture
NVenture
3 months ago

Anyone interested in using this for Godot 4.x, some adjustments to make compared to the example project:
You’ll need to clear the Tween node out of the Changer scene (this Node type no longer exists). Replace that by adding

var tween = create_tween()

Into both the In and Out functions. Then replace the $Tween references to tween. Also replace .start() with .play()

Replace the interpolate_property stuff with new Tween class methods like this:

tween.tween_property(self.material, "shader_parameter/position", 1.5, duration).set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_IN)

for the new Tween options.

Finally, when I was testing I found the Out function strangely lagged, while the In function worked fine. Seems the solution is to always write the shader position as a float in your function, i.e. the example just used 1 for the initial position, so change that to 1.0 or another float value. If the initial position is mistaken as an integer it will only show the tween positions that align with integer values aka 1, 0, -1.

Unfortunately I see a momentary screen flicker when the scene transitions. Haven’t worked with it enough to solve that yet. I’m guessing the flicker is a single frame where the new tween for the In function is created after the Result scene loads. So maybe if Changer isn’t a child of both From and Result, but instead everything is handled inside a scene managing parent node; that way Changer is persistent even when the displayed game scene changes? Hopefully this helps anyone else make it work, as this is a nice looking transition effect.