Java-Gaming.org    
Featured games (91)
games approved by the League of Dukes
Games in Showcase (578)
games submitted by our members
Games in WIP (499)
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] Highlighting sprites when hovered  (Read 3401 times)
0 Members and 1 Guest are viewing this topic.
Offline marcuiulian13

Senior Member


Medals: 5
Exp: 3 years



« Posted 2012-11-30 22:40:36 »

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!

Getting a project done is by far the most hard thing in game development.
Offline Best Username Ever

Junior Member





« Reply #1 - Posted 2012-11-30 22:49:48 »

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

Senior Member


Medals: 5
Exp: 3 years



« Reply #2 - Posted 2012-11-30 22:57:21 »

Shader? How to use that?  Clueless

Getting a project done is by far the most hard thing in game development.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Best Username Ever

Junior Member





« Reply #3 - Posted 2012-12-01 00:00:25 »

Or you could create two versions of each sprite. Smiley
Offline marcuiulian13

Senior Member


Medals: 5
Exp: 3 years



« Reply #4 - Posted 2012-12-01 00:41:16 »

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?

Getting a project done is by far the most hard thing in game development.
Offline ReBirth
« Reply #5 - Posted 2012-12-01 03:11:33 »

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.

Offline RobinB

JGO Knight


Medals: 37
Projects: 1
Exp: 3 years


Spacegame in progress


« Reply #6 - Posted 2012-12-01 11:17:04 »

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?
Offline marcuiulian13

Senior Member


Medals: 5
Exp: 3 years



« Reply #7 - Posted 2012-12-01 17:12:44 »

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

Getting a project done is by far the most hard thing in game development.
Offline davedes
« Reply #8 - Posted 2012-12-01 18:28:46 »

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

Offline marcuiulian13

Senior Member


Medals: 5
Exp: 3 years



« Reply #9 - Posted 2012-12-01 18:44:18 »

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. Grin 

Getting a project done is by far the most hard thing in game development.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Cero
« Reply #10 - Posted 2012-12-01 19:42:11 »

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.

Offline davedes
« Reply #11 - Posted 2012-12-01 20:13:51 »

Quote
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.

Offline marcuiulian13

Senior Member


Medals: 5
Exp: 3 years



« Reply #12 - Posted 2012-12-01 21:43:09 »

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)

Getting a project done is by far the most hard thing in game development.
Offline davedes
« Reply #13 - Posted 2012-12-01 22:02:42 »

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...

Offline Cero
« Reply #14 - Posted 2012-12-02 00:28:05 »

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:

Offline davedes
« Reply #15 - Posted 2012-12-02 02:11:41 »

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

Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

xsi3rr4x (28 views)
2014-04-15 18:08:23

BurntPizza (25 views)
2014-04-15 03:46:01

UprightPath (40 views)
2014-04-14 17:39:50

UprightPath (22 views)
2014-04-14 17:35:47

Porlus (38 views)
2014-04-14 15:48:38

tom_mai78101 (62 views)
2014-04-10 04:04:31

BurntPizza (121 views)
2014-04-08 23:06:04

tom_mai78101 (221 views)
2014-04-05 13:34:39

trollwarrior1 (188 views)
2014-04-04 12:06:45

CJLetsGame (195 views)
2014-04-01 02:16:10
List of Learning Resources
by SHC
2014-04-18 03:17:39

List of Learning Resources
by Longarmx
2014-04-08 03:14:44

Good Examples
by matheus23
2014-04-05 13:51:37

Good Examples
by Grunnt
2014-04-03 15:48:46

Good Examples
by Grunnt
2014-04-03 15:48:37

Good Examples
by matheus23
2014-04-01 18:40:51

Good Examples
by matheus23
2014-04-01 18:40:34

Anonymous/Local/Inner class gotchas
by Roquen
2014-03-11 15:22:30
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!