At the time of posting this, there is no concrete tutorial that shows exactly how to use shaders to create a transition effect in libgdx, unlike the many tutorials to do the same in Godot and Unity. This is the exception. This tutorial shows exactly how to get those fancy transition screen effects using only the shaders in libgdx. Example codes :
- initialize the shader program
ShaderProgram.pedantic = false;
sp_transit = new ShaderProgram(roFile(shader_transit_vert), roFile(shader_transit_frag));
roFile() is a custom method for reading libGDX readonly files.
- Update the shader
sp_transit.begin();
sp_transit.setUniformf("cutoff", cutoff);
sp_transit.setUniformf("smooth_size", smooth_size);
sp_transit.end();
- Draw the mask
if(drawCover) {
begin(sp_transit, vp_screen);
draw(image_default, region_default_shader, unitScreen);
end();
}
begin(), draw(), end() are custom methods that call on libGDX SpriteBatch internally.
the image drawn here is the pattern for the transition.
- Fragment shader logic
//my inputs
uniform float cutoff;
uniform float smooth_size;
void main()
{
vec4 color = v_color * texture2D(u_texture, v_texCoords);
float value = color.r;
float alpha = smoothstep(
cutoff,
cutoff + smooth_size,
value * (1.0f - smooth_size));
gl_FragColor = vec4(color.rgb, alpha);
}
The is the shader code contained in the file referenced by shader_transit_frag.
This is the code that creates the transition effect. You do not need to change the code to
change the transition effect - the only thing that is changed is the texture/image mask.
Here is the link to the full working example. Download it and give it a try. I hope this helps out a lot.
Happy coding ;D !