How to create powerbar animations like in golf games

[stanchat]

am creating an horseshoe simulation and I am at the point of creating my game interface. I tried playing around with the fillrect method but it does not give me the effect that I am looking for. Does anyone know how to create the bitmaps for a powerbar animation. I have tried Paint Shop Pro to no avail and also Pro Motion from Cosmigo. Here is a screenshot of my game and the interface I am trying to build.

http://www.tccons.com/ringerking2/screen_shot1.jpg

The animation on the right is the starting animation and the one on the left is what you would get holding down the mouse button for power/accuracy etc..

Thanks in Advance
Stan Chatman
http://www.tccons.com

[Nemesis]

If you can live with the bar going across the horseshoe horizontally, you could create a full and an empty version of the horseshoe powerbar and draw fractions of them e.g. let's say that its size is 100 x 50 pixels and you want to draw it at 60% power. You could draw the left part of the full bar image (0,0 - 59, 49) and the right part of the empty bar image adjacent to it (60, 0, 99, 49). I'm assuming you can actually draw rectangular segments within an image.. I have no idea what language / tools you're using.

[Nikster]

You don't really need two full images, just the empty bar graphic (the whole shebang) then just overlay a graphics that represents the fill using the same method as Nemesis said, or you could do your fill as an 8bit graphic and precreate cells, each cell having different index colour, that way you can give it the curvy look, albeit, only 255 segments, but those are two of the simplest ways.

[luggage]

Firstly ignore the arrow, that can be placed on afterwards.

One way would be to have 2 graphics. One full bar and one empty but make sure the segment is circular. The 2nd graphic should be made by drawing the empty graphic on the background and grabbing a rectangle of everything. In the attached picture it's the second one (this presumes pink is the colour key ).

Now the idea is you just rotate the bar behind the other graphic.

Rotate the full graphic depending on how much you want to show.
Draw the other graphic over the top to hide the unwanted parts of the bar.
Now take care of the arrow using the other method described.

I've attached an image to help describe it a bit (sorry about the jpegness). Only works if you can rotate gfx though. Anyone know of an easier way that wouldn't involve rotating gfx? Or dozens of frames.