[Libgdx]How to highlight textures?

Newbie & Debugging Questions
#1

Like, when you mouse over something, it’s texture is brighter, well you, know what I mean every games have some sort of this like a red overlay when receiving damage etc…
Btw I currently don’t have time to read tens of pages of shader so be precise please :slight_smile:

#2

A pity that you don’t have time, because this is indeed not a too easy problem to solve. Since I know nearly nothing about your surroundings, your project and so on, I can only give you a generic answer:

I assume you use shaders etc. You need a mechanism to determine an object is hovered. So you have to provide per object, if it is hovered or not. For example you can pass a boolean uniform to the shader, if every object is drawn seperately, simplest case. If an object is hovered or not can be determined by testing if the current mouse piosition is inside an object’s bounding box (in world space) - for a 2D engine. In 3D, things are slightly more complex: You have to determine the screen position of your mouse, cast a ray from eye position through these coordinates and test every model’s bounding box (again, world space) against intersection with this ray. Finally, you need a piece of logic in your shader that modifies the output color based on the boolean if an object is selected - like if(isSelected) { outputColor *= 1.5; }. Of course there are other options: modern engines could do determination of a selected object pixel-perfect in a shader and no cpu-part is necessary at all. It depends.

EDIT: The same goes for a “wasDamaged” property or something.

#3

Ok I was maybe not precise enough, the “mouse hovered” logic and all that is fine, the question is, how can I have a fully, pure white version of a texture.
if I had to do this manually, I would go to photoshop take a sprite, and set make it white, so that I can then place this sprite with like 0.4 alpha on top of the normal one so that it appears that the normal sprite is highlighted. But I want to generate that white version of the sprite in runtime.

#4

How 'bout this?
Fragment shader:


#define WHITE vec4(1.0, 1.0, 1.0, 1.0)
#define WHITE_FACTOR 0.4
uniform int isSelected; // <- there is no bool for uniforms
...
vec4 col = ...; // sample the texture
if (isSelected == 1)
  col = mix(col, WHITE, WHITE_FACTOR);
gl_FragColor = col;
#5

I actually modified the sprite’s pixmap which is fast and is not a lot of code. I don’t know if it’s efficient but it seems to work

#6

Modifying the pixmap usually means re-uploading the texture which isn’t terribly effective, but ok if it is fast enough for you.
Do you create a new pixmap for every sprite? That would not scale very well, but also does not matter in a simple game.

What about this? https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/Sprite.html#setColor-com.badlogic.gdx.graphics.Color-

#7

The game is very minimal and require little to no CPU/GPU so it’s fine for my case. So what I did is, in the constructor, I instanciate the entity’s normal sprite as well as it’s “flash” sprite, the “flash sprite” is created like so


        Pixmap pixmap = new Pixmap(Gdx.files.internal("textures/" + "puzzle" + (id+1) + ".png"));
        Color color = new Color();

        for (int x = 0; x < pixmap.getWidth(); x++)
        {
            for (int y = 0; y < pixmap.getHeight(); y++)
            {
                int val = pixmap.getPixel(x, y);
                Color.rgba8888ToColor(color, val);
                int A = (int) (color.a * 255f);
                int R = (int) (color.r * 255f);
                int G = (int) (color.g * 255f);
                int B = (int) (color.b * 255f);
                pixmap.setColor(0.85f, 1f, 0.85f, 1);
                if(A != 0 && R != 0 && G != 0 && B != 0) //The flash shouldn't appear on transparent pixels, same for fully black pixels
                    pixmap.drawPixel(x, y);
            }
        }
        this.spriteFlash = new Sprite(new Texture(pixmap));
        pixmap.dispose();

then this is how I call the sprites on the render() method



        this.sprite.draw(Globals.batch);
        this.spriteFlash.draw(Globals.batch, overlayAlpha);

[quote]What about this? https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/Sprite.html#setColor-com.badlogic.gdx.graphics.Color-
[/quote]
This will not work because it’s substractive, that means if you want a red flash for example, it will subtract the blue and green colors to make the sprite appear red but this will usually make the sprite darker. My idea was to ADD the colored tint on top of the normal sprite