Hi !
Featured games (91)
games approved by the League of Dukes
Games in Showcase (754)
Games in Android Showcase (229)
games submitted by our members
Games in WIP (842)
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  
  LibGDX Radial fading shader effect within a moving area  (Read 1309 times)
0 Members and 1 Guest are viewing this topic.
Offline devinjv

Junior Newbie

Exp: 4-6 months

« Posted 2014-05-07 00:51:42 »

I'm relatively new to graphics and the magic that happens behind the scenes so I'm probably jumping ahead of myself here.

With that said I am trying to achieve the shader effect shown in this picture, where the grey broken line fades from visible (closer to player) to invisible (further from player).

While the broken line fades, the background items are always visible

I followed mattdesl's guide and was able to create a flashlight type vignette effect which is close, but I didn't have much luck because the only way I know to call the shader effects my whole sprite batch.

ShaderProgram.pedantic = false;
shader = new ShaderProgram(Gdx.files.internal("data/vignette.vsh"), Gdx.files.internal("data/vignette.fsh"));

My main question would be what type of sprite batch and shader calls in LibGDX. player circle's radius fade in / out of view. I know this can be achieved with a vignette type effect but my situation is a little more specific. I want the rest of the screen fully visible at all times and only a select layer of textures to be effected.

As I inch my way closer, your tips will help a lot!
Offline BurntPizza

« JGO Bitwise Duke »

Medals: 485
Exp: 7 years

« Reply #1 - Posted 2014-05-07 00:55:42 »

Draw the background with normal shading, and do the grey line stuff in a separate pass with shaders on.

Simply make alpha a function of y position with an inverse relationship, so that pixels closer to 0 in Y (near bottom of screen) are low-alpha, and far away ones are opaque.

EDIT: made a quick example on shadertoy:

void main(void)
   vec2 uv = gl_FragCoord.xy / iResolution.xy;
   vec4 c = vec4(uv.x, uv.x, uv.y, 1.0);  // consider this the background image
   // draw grey boxes, multiplying by Y coord to provide alpha effect
   if(mod(uv.x, 0.1) < 0.02 && mod(uv.y, 0.1) < .05) {
      c += 0.3 * uv.y * uv.y; // squaring for more intense effect
   gl_FragColor = vec4(c);
Pages: [1]
  ignore  |  Print  

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

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

nelsongames (70 views)
2018-04-24 18:14:32

ivj94 (752 views)
2018-03-24 14:47:39

ivj94 (82 views)
2018-03-24 14:46:31

ivj94 (623 views)
2018-03-24 14:43:53

Solater (98 views)
2018-03-17 05:04:08

nelsongames (179 views)
2018-03-05 17:56:34

Gornova (405 views)
2018-03-02 22:15:33

buddyBro (1065 views)
2018-02-28 16:59:18
Java Gaming Resources
by philfrei
2017-12-05 19:38:37

Java Gaming Resources
by philfrei
2017-12-05 19:37:39

Java Gaming Resources
by philfrei
2017-12-05 19:36:10

Java Gaming Resources
by philfrei
2017-12-05 19:33:10

List of Learning Resources
by elect
2017-03-13 14:05:44

List of Learning Resources
by elect
2017-03-13 14:04:45

SF/X Libraries
by philfrei
2017-03-02 08:45:19

SF/X Libraries
by philfrei
2017-03-02 08:44:05 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‑
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!