Filling a Meter

[Strikerklm96]

Look at this sprite sheet:


It is a meter, that fills with orange. The meter represents energy. As energy gets above 10-20-30%, the sprite animates to the appropriate part of the texture.
I was wanting to make it so the orange fill would fill continuously, not in a discrete fashion like it is now. This would be easy if the meter was a line. As I could just have a separate sprite underneath the meter, and as percentage of energy went up, an equation would dictate how much to stretch the orange background fill. But because it is in a circle, I can't think of any way to do it. Any suggestions?

[Ixrec]

Since the orange segments are all the same, maybe it would help to think about how to draw one of those segments by itself (filled to some arbitrary percentage).  Drawing the entire meter just involves correctly positioning and rotating seven of those segments on top of a static image.

The simplest solution might be having a sprite sheet for a single segment of the meter transitioning from gray to orange pixel-by-pixel.  It doesn't look like you have that many pixels for it to transition through, so that should be practical.

[Laurent]

A sprite to draw the background. For the filled part, a vertex array with the sf::TriangleFan primitive type to create a fraction of the full circle, depending on the energy percentage. Then it's just a matter of calculating the proper texture coordinates for each vertex.

[Strikerklm96]

I made this image for how I understood what you said.


The text got messed up so here it is:
To fill the game object radially, rotate the fanned texture coordinates into the color fill.
That is what you said to do right?

[Laurent]

I'm not sure how to interpret your image and I don't have the time to make one to better explain what I mean, sorry.

The idea is not complicated. There are two images involved: a background, which is a static circle, easy to draw (a simple sprite for example), and the filled part, on top of the background, which is a circle too but not full. Fortunately, such a shape is straight-forward to create with a vertex array of type sf::TriangleFan. The only "tricky" part is to calculate the texture coordinates for each point. You can have the precision that you want, even 1 point for every energy percent would not be a lot (100 points for a single shape is more than ok for your graphics card).