Need help with health bar regarding UI corners

[Erex_147 (Erex)]

1. What do you want to achieve? Keep it simple and clear!
   I want to make a health and exp bar for my game. It will involve ui corners and gradients.

2. What is the issue? Include screenshots / videos if possible!
   The health bar scales properly, but the UI corner tends to disturb the look and ruin as we lose more health.
   

3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
   I have looked through some posts about such kind of healthbars, but unfortunately due to my lack of UI design experience, I was not able to grasp the solutions provided by those posts.
   I tried setting ClipDescendants, Zindex but they didn’t work for me (or I didn’t do it properly.)

[realmile (mile)]

This happens because UICorner tries to round the corners of the fill ui and since its aspect ratio is lower than 1 you start getting sides to be flat. Few ways to fix that are:

1. You could check if aspect ratio is 1 or lower and make it so it cant go lower than that (this will however make it so when fill gets down to a circle it wont become any smaller).
2. You could use CanvasGroup as a parent to the fill instead of a normal frame, this would fix the issue, however CanvasGroup’s are a bit more performance heavy than normal frames.
3. The way I usually deal with this is to have fill inside another invisible frame and instead of scaling the fill down I move the invisible frame back and fill forwards by same amount which gives the desired effect.

[Erex_147 (Erex)]

Could you explain the 3rd method please?

[realmile (mile)]

You would have a frame which is your background to the bar, inside of it you will have another invisible frame and inside of the invisible frame you will have another frame which is your fill, background and fill will have UICorner and the invisible frame will have ClipsDescendants on true. Now when you are scaling the fill frame, instead of scaling you will be moving the invisible frame backwards and fill frame forwards (this makes it so the fill frame stays in same spot, but because invisible frame has ClipsDescendants on true, it will appear to get smaller).
Basically instead of doing:

fill.Size = Udim2.fromScale(percent,1)

You would do:

invisible.Position = Udim2.fromScale(0-percent,0)
fill.Position = Udim2.fromScale(percent,0)

percent being a number from 0-1.