Problem with non-square progressbar (we can not use "filled")

[artfabrique]

Good day!
Can you tell us the approach to do this type of progress bar? (notice state 0 and 1)


We can not use filled texture, because we want non-square fill tip while progress.
We have one big ui atlas (2k x 2k) with all the elements.
This atlas has a material/shader etc.
We think the right way is to mask progressbar fill somehow but it seems that we can't because all UI sprites is inside single atlas (single mat, single shader). And if we will have shader with mask support for that atlas it will mask all other elements besides progressbar fill.

[ArenMook]

NGUI works with square sprites, so if you want something cut at an angle like that your best bet is to create a custom widget. Simply derive from UISprite and write your own custom OnFill function that will make it slanted the way you want.

[artfabrique]

NGUI works with square sprites, so if you want something cut at an angle like that your best bet is to create a custom widget. Simply derive from UISprite and write your own custom OnFill function that will make it slanted the way you want.

We don't want to cut sprite with geometry, because we have non uniform tip.
As you see we have a mask there but dont get what is the right strategy.
What if we have this shape?

[ArenMook]

Sliced sprice corners / sides don't get stretched or cut. They get drawn as-is. In your case you want the side sprite parts to actually get cut. NGUI doesn't offer something like that, so again -- create a custom OnFill function. No masks needed. It's much more difficult to get this done with masks, and you'll be adding an extra draw call for no reason.