Sprite brightness/highlight manipulation

[vpochapuis]

First of all I would like to thank all the bevy maintainers for this amazing game engine and ecosystem.
It is really refreshing and amazing to be able to have access to such tools.
Thanks for all the hard work!

(Why) Original issue / use case scenario

I was trying to "highlight" 2D sprites on mouse hover for a Point&Click style game.
For this purpose I tried to use the bevy_mod_picking then realized that the actual highlight for the Sprite had to be done elsewhere.

What

Note: I have never worked on rendering in the past and I do not have much knowledge in the area, I am seeking some help understanding and making decent software design choices as well as contributing if the need surfaces.

Here are the key points I would need help with:

• What would be the most efficient way to achieve this Sprite "Highlight"?
• I have had some ideas and would like opinions on them in term of feasibility, performances and coherence:
  • Asset Modification Approach: My first working approach after several trials and errors was to copy the Image asset, iterate over its data and increase the RGB data of each pixel, then store the new asset. Then swap the assets handles on hover and leave (cf reference 2). I worry about the scaling and performance of such practice. (Maybe would need to add a "processing asset" state after loading assets to apply this operation before Gameplay starts).
  • Material2d/Shader Approach: Then i saw a lot of examples and discussions about Material2d (actually about the 3D version, but in this case the 2d version would apply). I have never written shaders and am wondering whether it could be possible (and better) to make a shader that would apply some operations on visible pixels only in order to achieve this goal.
  • Builtin Approach: Actually originally I tried to use the color field of the Sprite and increasing the value to the whitest of whites thinking it would brighten the Sprite. But then by experiencing it I saw it was actually the default value which just gave back the same texture as is (cf reference 1). I would have expected to have a way to brighten the Sprite builtin in this component as this field let us change the Sprite tint as well as darken it. (If I missed something important please let me know!). (Note: if this is not present, I would be more than happy on learning bevy's insides and contribute to implement it, if it was deemed meaningful to implement it inside bevy).

Thank you for taking the time to read this.
I am sorry if i missed existing features and I would be pleased to hear about them.

---

References

Reference 1: Current builtin Sprite color modifier behavior

SpriteColorPicker.webm

Reference 2: Desired behavior

SpriteHighlight.webm

[poporo89]

As you mentioned, Sprite isn't suitable for your needs. Sprite multiplies colors like base_color * texture, but you require color addition, such as texture + highlight_color. Instead of Sprite, consider using Material2d. I provide an implementation for you (see attached file). In this example, I've created a custom highlight shader and applied it within a MaterialMesh2dBundle.

material2d_example.zip

highlight.mp4

[vpochapuis]

Thank you very much for your answer!
And you even provided a working example, amazing!!
I really appreciate, thank you so much!
It will help me a lot~

Also, just out of curiosity and understanding, Is there any reason or history as for why Sprite is only for color multiplication and not other type of operations?

[poporo89]

Glad I could help.

Well, I'm not really up on the history...
But personally, I think even the color field in Sprite is not necessary. Generally, sprites are mainly used to control where characters or objects appear on screen, so the image's color isn't a big deal. But having a color field in Sprite does make it easy to change up the look. I guess that's why they include it.

[vpochapuis]

Ok, thank you!