Creating complex, tweenable UI progress bar-like elements

[BatBut]

Hey all!

I'm trying to make UI elements that are essentially sprites that act like progress bars in that they fill up or empty out as different things happen. I would like the empty and fill to be smooth and have a bit of animation to it and tweens would be perfect, but the shapes are varied instead of just a rectangle that I can change the height of. 

Something like the attached image is what I'm talking about but that isn't the sprite that I'm using:

I did find this solution here using bitmapdata but it only seems to look right when you're increasing or decreasing it by 1 and any other increments make it jump around. It's also not tweenable so I have concerns about making the animation look smooth and nice. While it doesn't seem to be the right solution in this case, the images in that first post in the link are pretty close to what I'm going for, I think I may just have different requirements

I've also looked into stacking two of the same sprite on top of each other and cropping one down to give the illusion of an actual health bar-type thing, but I couldn't get it to work as I'm imagining it. There's every chance that that is the right solution and I just don't know how to write it though. The final game will have several of these in a row to make a visual status bar type thing, so being able to control how full each one is individually is important, which hopefully doesn't make things even more complicated.

Thanks for any help at all!

[samid737]

You can create A new sprite from bitmapData and use masks to cover the sprite and tween the mask to imitate loading:

You don't necesarilly need A tween to move the mask like in the example. You can use your own variable, whichever indicates the status and move the mask sprite upward/downward according to that variable. The color interpolation can also use the same variable.

[BatBut]

That seems like an interesting approach! I have been working on this too and growing increasingly frustrated with bitmapdata so I had another look at cropping and came up with this solution: //phaser.io/sandbox/cByFYpzH/play

It does pretty much everything I need it to in this state, is there a reason you would choose bitmapdata or crop from a functionality standpoint for a use like this?

[samid737]

 

The mask is just being offset. Bitmapdata creates brand new pixels that you can manipulate to create things like silhouettes. Cropping A texture will crop the base texture, so all sprites using that texture will also be cropped, which might be undesirable.  
Update: seems that you can crop without modifying the base texture, forget what I said. Another use  of masks is that you can use different shapes as masks,  circles, triangles etc. I'm not sure if crop() will allow this, I have to look into it. Pick what is best for your game, your solution seems like it will work fine.