Java-Gaming.org Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (797)
Games in Android Showcase (234)
games submitted by our members
Games in WIP (864)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Shader Transition with libGDX  (Read 956 times)
0 Members and 1 Guest are viewing this topic.
Offline Rickodesea
« Posted 2018-12-04 07:07:40 »

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
1  
2  
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
1  
2  
3  
4  
sp_transit.begin();
      sp_transit.setUniformf("cutoff", cutoff);
      sp_transit.setUniformf("smooth_size", smooth_size);
sp_transit.end();


  • Draw the mask
1  
2  
3  
4  
5  
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
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
//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.

https://github.com/Rickodesea/alricksur

Happy coding  Grin !

Pages: [1]
  ignore  |  Print  
 
 

 
hadezbladez (3659 views)
2018-11-16 13:46:03

hadezbladez (1302 views)
2018-11-16 13:41:33

hadezbladez (3667 views)
2018-11-16 13:35:35

hadezbladez (702 views)
2018-11-16 13:32:03

EgonOlsen (4007 views)
2018-06-10 19:43:48

EgonOlsen (4535 views)
2018-06-10 19:43:44

EgonOlsen (2695 views)
2018-06-10 19:43:20

DesertCoockie (3553 views)
2018-05-13 18:23:11

nelsongames (3711 views)
2018-04-24 18:15:36

nelsongames (4742 views)
2018-04-24 18:14:32
Java Gaming Resources
by philfrei
2019-05-14 16:15:13

Deployment and Packaging
by philfrei
2019-05-08 15:15:36

Deployment and Packaging
by philfrei
2019-05-08 15:13:34

Deployment and Packaging
by philfrei
2019-02-17 20:25:53

Deployment and Packaging
by mudlee
2018-08-22 18:09:50

Java Gaming Resources
by gouessej
2018-08-22 08:19:41

Deployment and Packaging
by gouessej
2018-08-22 08:04:08

Deployment and Packaging
by gouessej
2018-08-22 08:03:45
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!