Masking a dynamic flxSprite

[gratifist]

Hi guys,

I'm developing a mobile game, and I'm loving the framework so far. However, I've come across a problem I don't think I can figure out myself.

So I have a basic bar which works like below (pls disregard the low quality):

You can probably already tell what the problem is, so I won't elaborate too much on the issue.

The whole bar is a flxGroup, which consists of two flxSprites: the overlaySprite (the border and shadow), and the bar (the white dynamic sprite).
The bar flxSprite moves horizontally (x), i.e. it is not an animation.

My research has concluded in a few solutions:

1. Convert the bar into an animation - I do not prefer this as it will not allow for simple changes later in development
2. Use a camera to mask the area - However it only works on a regular rectangle
3. Add a sprite to cover the edges of the bar - This may have undesired effects when the background changes

My current thoughts are to change the design of the bar to better fit the limitations I've come across.

Any help will be greatly appreciated!

[Gama11]

How about manipulating the white sprite's scale.x?

[Seb Jones]

Instead of moving the bar sprite, why not just scale the width of it? Something like the following:

//In create
bar.origin.x = 0;

//In update
bar.scale.x = (health / maxHealth);

Alternatively, you could achieve a similar thing using the shape drawing functions in FlxSpriteUtil. Check the Drawing Shapes part of the Cheat Sheet for examples of how to use that.

Hope this helps :)

[gratifist]

Thanks guys, for some reason I was convinced that changing the scale.x would distort the image - but it's literally just a white box haha