This is the meter bar when it is full... it has a red trim and full red bars.
This is when the meter is empty:
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:
Meter Bars (when a bar subsection is full it will turn red)
Meter Bars (when a subsection is partially full it is yellow)
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.