You have at least 3 options:

Either prepare 100 textures, or:

You can still use a rectangle that grows/shrinks in horizontal direction, but additionally to update the geometrical co-ordinates you have also to update the texture co-ordinates. This way you map just the wanted portion of the texture onto the quad. And because the quad is changed accordingly in size, too, the resulting picture will look cropped but not distorted. You have to layer the above quad on top of another quad which is used to render the container.

Or you render 2 quads side by side, the left one textured with the "full" health texture and the right one textured with the "depleted" texture. Both quads together ever cover the entire health bar area, but the border where both hit is shifted left and right according to the health state (again both the geometrical as well as the texture co-ordinates are shifted).


(EDIT: In the meanwhile Nanoha has already posted in detail how to compute the cropping co-ordinates.)


Addendum: The 1st option above is both fillrate optimal (okay okay, this is really a small issue) as well as offers the best visual pleasure, but is shifts work to the artist and consumes a multiple of memory in comparison to the other options. The 2nd option has the worst mean fillrate, but has a good visual pleasure when the container is rendered on top of the level quad. The 3rd option again has optimal fillrate but will probably show visual artifacts if the border isn't guaranteed to be aligned with pixels.

[Edited by - haegarr on January 19, 2010 2:19:33 AM]

Yeah I was actually thinking about splitting it up into 100 textures but figured there might be a better way.

I will play around with these methods and see what provides the most pleasing look.

Thank you all for your help!

You can do that fairly easily with 2 textures and 2 quads.

- texture 1 is the bubble overlay
- texture 2 is the green fill, with an alpha mask in the shape of the bubble overlay

- quad 1 has texture 1 and is always drawn the same
- quad 2 has texture 2, it is enlarged/shrunk based on the players life, along with the texture coordinates

Quote:Original post by bluelobster

Quote:Original post by EJH
You can do that fairly easily with 2 textures and 2 quads.

- texture 1 is the bubble overlay
- texture 2 is the green fill, with an alpha mask in the shape of the bubble overlay

- quad 1 has texture 1 and is always drawn the same
- quad 2 has texture 2, it is enlarged/shrunk based on the players life, along with the texture coordinates

This sounds doable but I am not exactly clear how the texture to is enlarged/shrunk...can you provide an example?

The texture is not enlarged/shrunk, it is cropped by choosing appropriate texture co-ordinates! Please re-read especially Nanoha's post above; it shows an example of how to do it.

I just quickly read over this, but how about this idea:

Take the unfilled bubbles and make those the top layer. Figure out the width of the full bottom layer (the green filling) and multiply that width by the percentage of health there is. The render the bottom layer with the constant height and only render so much of the width.

So if you have 90% health and the dimensions (of a rectangle) enclosing it are 100 wide and 30 high, you would print the underlying bubbles with the same height of 30 and a width of 90, clipping of the last 10 pixels/%.

Quote:The texture is not enlarged/shrunk, it is cropped by choosing appropriate texture co-ordinates! Please re-read especially Nanoha's post above; it shows an example of how to do it.

Yes sorry I misread, and was thinking about something else...this is quite easy. Thank you.