Creating a Progress bar using sprite.scale

[shvalb]

Hi guys,

I'm trying to create a progress bar.
I have 2 images:
1. Black frame
2. The bar itself which is a linear horizontal gradient (or something close to that).

Because I'm trying to keep the gradient effect I'm not using a mask but a scaling the bar itself from zero to 1.

Here is how it looks:
https://demo-project-shvalb.c9users.io/Phaser.io/index.html

If you pay close attention to the first 5 seconds at the left of the scrollbar you see that it starts outside of the frame and fixes itself afterwards.

I'm trying to fix this problem by using a BitmapData.alphaMask, just cutting a mask from the bg image. but it doesn't work.

If someone has an idea, please share...

Thanks!

 

[Dio]

The link does not work.

Anyway, maybe you could make bar using crop instead of scaling? Something like here with health bar:

http://codepen.io/jdnichollsc/pen/oXXRMz

[shvalb]

Hi,

Don't know why Cloud9 not working - the link used to work well!, 

Anyway, Thank you very much! eventually I switched to simple mask and works well.

Thanks again :-)