Advanced Special Meters and Health Bars

Hi, I'm fairly new to c2 (2 weeks) but I'm doing pretty well. I'm making an advanced fighting game. So far I've photoshopped all the hud elements, coded all the movement/jumping/dashing/airdashing/dodging/rolling etc type techniques, and animated my character using placeholder sprites I snagged from guilty gear (hehe). Most of the stuff in the game I haven't had a problem with so far, but I am not sure the best way to handle my current problem.

This is the meter bar when it is full... it has a red trim and full red bars.

<img src="http://i28.photobucket.com/albums/c238/Acryte/GAMEIMAGES/SPBARFULL-P1.png" border="0" />

This is when the meter is empty:

<img src="http://i28.photobucket.com/albums/c238/Acryte/GAMEIMAGES/SPBAR-EMPTY-P1.png" border="0" />

The meter will fill up in slivers/chunks as you gain meter from doing certain attacks and actions.

Intermediate layer for when meter is full it has red outline:

<img src="http://i28.photobucket.com/albums/c238/Acryte/GAMEIMAGES/SPBAR-FULL-P1.png" border="0" />

Meter Bars (when a bar subsection is full it will turn red)

<img src="http://i28.photobucket.com/albums/c238/Acryte/GAMEIMAGES/SPBAR-METER-P1.png" border="0" />

Meter Bars (when a subsection is partially full it is yellow)

<img src="http://i28.photobucket.com/albums/c238/Acryte/GAMEIMAGES/SPBAR-FILLING-P1.png" border="0" />

How can I, and how should I, go about making this to where I can use sprite layers, blending modes, etc... in order to not have to animate out every frame aka every sliver of meter that fills up?

I basically want it to use the blank meter sprite but then reveal the partial meter sprite until it fills a whole subsection, then hide that subsection of the sprite and use the red meter subsection piece.

I could probably also make the red meter part easier by making each individual piece for the red meter subsection's their own sprite... that's fine, but it still doesn't help me with the filling up of the current subsection of meter with the yellow bar.

I don't want to stretch the width obviously as that would constrain the image, or can I have it keep the image aspect ratio and then clip the image as it resizes it? Any help would be much appreciated. It should go without saying I'm trying for the most concise and straightforward approach that minimizes number of sprites and animated frames.

Obviously if there is 150 SP total in the meter, I could have 150 animation frames and then just have it show the frame in the animation of how many SP you have, but that is a lot of overhead in frames and I'd prefer a more dynamic way of doing things.

HI Acryte,

If I read correctly then I believe it is fairly straightforward

Check out the capx I knocked up that should give you something to work from.

https://www.dropbox.com/s/j4l0llasnohdod8/FIllTheMeter.capx

The filling meter is a tiled background. The back is a sprite with the origin point set top left just like the tiled background.

Much appreciated, it's almost perfect, but you see how the segments are tilted diagonally? When I resize it's width the clipping is straight up and down, if I was to rotate the sprite, I'm guessing that it will still have a straight up and down line? or will the X axis be relative to the sprite itself and allow me to maintain that diagonal line as it fills the segments?

EDIT:

Would it be possible for my to throw it into a container that way I can rotate the container while counter rotating the sprite/tiled BG?

EDIT2: I made it work by going into photoshop and rotating the original image 18 degrees clockwise, and then using the rotated image in c2 and rotating it -18 degrees so that the X axis is at the same angle as the subsection lines.

Is there a non-destructive way to accomplish this? Rotating rasterized images reduces the quality of the image, and while most of are shapes, I would assume there is another way to accomplish this inside C2 alone.

Containers don't seem to work the way I assumed they would. Rotating the container doesn't rotate the objects contained within them from what I tried, and changing the width of the container doesn't seem to clip and hide the objects contained within it...

Is there a good way to accomplish this without having to physically rotate the sprites in photoshop?

If each section was a smaller version of the other I guess you could have multiple overlapping tiledbackgrounds. Gets a bit messy though.