Java-Gaming.org Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (777)
Games in Android Showcase (231)
games submitted by our members
Games in WIP (856)
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 191 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 (288 views)
2018-11-16 13:46:03

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

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

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

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

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

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

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

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

nelsongames (2247 views)
2018-04-24 18:14:32
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

Deployment and Packaging
by philfrei
2018-08-20 02:33:38

Deployment and Packaging
by philfrei
2018-08-20 02:29:55

Deployment and Packaging
by philfrei
2018-08-19 23:56:20

Deployment and Packaging
by philfrei
2018-08-19 23:54:46
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!