[libGDX] Highlighting sprites when hovered

[marcuiulian13]

Hello!
Can anyone suggest me how to do a "highlighting" effect on a sprite when it is hovered? (i am using libGDX)
I know how to check if mouse is pointing a sprite, but i don't know how to do this effect.

Thank you!

[Best Username Ever]

How about draw another texture on top of it or change the color via a shader?

[marcuiulian13]

Shader? How to use that? 

Games published by our own members! Check 'em out!

[Best Username Ever]

Or you could create two versions of each sprite.

[marcuiulian13]

I've tried to learn something about shaders and this is what i have now:

1   2   3   4   5   6   7   8   9   10   11

public void render(SpriteBatch batch) {       if (!hovered) {          batch.draw(region, position.x, position.y);       } else {          ShaderProgram.pedantic = false;                    batch.setShader(Shader.Highlight.SHADER);          batch.draw(region, position.x, position.y);          batch.setShader(null);       }    }

And this is the shader:

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15

public static class Highlight {       private static String vertexShader =             "void main()" +             "{" +             "   gl_FrontColor = gl_Color;" +             "   gl_Position = ftransform();" +             "}";       private static String fragmentShader =             "void main()" +             "{" +             "   gl_FragColor = gl_Color;" +             "}";             public static final ShaderProgram SHADER = new ShaderProgram(vertexShader, fragmentShader);    }

The problem now is that the shader only makes my sprite disappear, and also it drops my FPS to 50 (from 60).
Any solution?

[ReBirth]

I dont know about shader, but for highlighting I use:

1. blink through Action
2. brighter/darker color through color field
3. add a semi-transparant color sprite on top of it.

[RobinB]

Your sprite dissapheres because your ngt using the texture parameters, gl_color only returns the passed or default color.
But using shaders for such a simple task is maybe overkill?

Cant you use glColor with the needed blend function to add the color instead of multiplying?

[marcuiulian13]

Might be, but this is a good time for me to learn how to use shaders.

[davedes]

Using shaders isn't necessarily overkill, as it leads to less overdraw and thus potentially much better performance (especially on limited systems like Android or WebGL). It really depends on your game and how you plan to implement the feature.

If you are using GL11 then you can work with plain old texture combiners, which should be more performant than glBlendFunc and multiple draws.

I've explained the GL11 and GL20 approaches with some code here:
http://www.badlogicgames.com/forum/viewtopic.php?p=28839#p28839

[marcuiulian13]

I am using GL2.0. This really can't be achived by just setting a shader to the batch, draw the sprite, then set the shader to null? I need to do this "brightening" only to the selected sprite, so a ShaderBatch won't help me very much...

Still, thanks for the advice.  

Games published by our own members! Check 'em out!

[Cero]

the button is a graphic which you will save as the "bright-version"
normally you now render it with a color filter like "new Color(0.8f,0.8f,0.8f,0.8f)"
on hover you dont use a color filter or set it to 1f

Sprite has setColor, if you just render, for example a textureregion, with a batch, there is a Color parmeter

thats all.

[davedes]

I am using GL2.0. This really can't be achived by just setting a shader to the batch, draw the sprite, then set the shader to null? I need to do this "brightening" only to the selected sprite, so a ShaderBatch won't help me very much...

You can use setShader but it won't be as efficient. Every time it's called, matrix data is sent to the new shader. Ideally you will want to minimize the number of flushes and the amount of data being passed to the shaders per frame. Here is a breakdown of what's happening:

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20

//sends matrix data to default shader batch.setProjectionMatrix(cam.combined); //sends matrix data to default shader batch.begin(); //put some sprites batch.draw(...); //flushes the batch, sends matrix data to myShader batch.setShader(myShader); batch.draw(...); //flushes the batch, sends matrix data to default shader batch.setShader(null); ..draw more sprites... //flushes the batch batch.end();

(As you can see, SpriteBatch could probably use some code changes to minimize redundant glUniform calls.)


If you are just rendering a single highlighted sprite per frame, you could use a Mesh and ShaderProgram and skip the batching. Then it would look like this:

1   2   3   4   5   6   7   8   9   10

batch.begin(); ...draw your sprites... batch.end(); //render our brighten sprite brightenTexture.bind(); Gdx.gl.glEnable(GL20.GL_BLEND); Gdx.gl.glBlendFunc(blendSrcFunc, blendDstFunc); brightenMesh.render(brightenShader, GL10.GL_TRIANGLES);

The ShaderBatch I posted doesn't add much overhead, and it's a bit more flexible than using a mesh (it's usable with Stage). If you want to optimize it further you can remove the "contrast" uniform, and you could also send the uniform data manually (instead of doing it every time begin() is called). I would suggest using my ShaderBatch instead of using multiple shader programs.

[marcuiulian13]

Okay, so the way i did it is this:

1   2   3   4   5   6   7   8   9   10

public void render(SpriteBatch batch) {       batch.draw(region, position.x, position.y);       if (hovered) {          batch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE);          batch.setColor(0.3f, 0.3f, 0.3f, 1f);          batch.draw(region, position.x, position.y);          batch.setColor(1f, 1f, 1f, 1f);          batch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);               }    }

But i still want to learn how to use shaders in libGDX because lately i will want to add some shadows, and as i know, it is done using shaders. Can anyone point me to some good tutorials about shaders? (also, about meshes because i don't really know what that is)

[davedes]

I wrote an intro to shaders here. It's aimed at Slick users, but the concepts should be applicable to LibGDX or LWJGL.

There is also more info on shaders in these tutorial series:
http://open.gl/
http://opengl-tutorial.org/
http://www.arcsynthesis.org/gltut/ (Java port)

The best way to learn shaders is by trying various effects yourself, and tweaking other people's code to see how it affects the result. This site and ShaderToy are very helpful in that regard.

Here are some other effects, mostly in Slick. The shader code (GLSL) is what's important, though...

• Normal mapping in LibGDX
  
• Two-pass blur in Slick based on this tutorial.
  
• Simple invert color shader in Slick
  
• Photoshop blend modes and Slick implementation
  
• More info on brightness/contrast
  
• Soft shadows. Definitely not the most efficient way of achieving shadows, but it is done using only shaders and would be a good practice if you're trying to learn.

[Cero]

btw do you guys know the easiest way, without shader, to colorize a sprite ?

I mean like "draw all pixels which arent alpha = 0, as RED (1,0,0,alpha)"
to showcase that someone is getting hit for example

with the least lines of code in libgdx or pure opengl

its the equivalent of Slicks .drawFlash()
and I looked at that code, somehting about MODULATE, but I didn't get it to work in libgdx, maybe because of the batch or maybe I copied one or two lines too many or too few


like this, when pink is actually transparent, as per png, and the white could be any specific color, in this case RED:

[davedes]

Option A: Use a shader (GL20)
Option B: Use texture combiners (GL11)
Option C: Grab the pixel array, modify it, and then re-upload to your texture