How to fix Image Health Bar Appearance when Size is changed?

Image does not scale as I’d like it to. I tried experimenting with rect size/offset with no luck. Does anyone know how I can approach this?

3 Likes

Instead of animating it using its scale, could you try adding a UIGradient to it and tweening the Offset of that? The image would stay still, but you would be able to animate its transparency. It’s how I’ve done loading bars for my games and yours looks like the same app but a health bar of sorts.

2 Likes

How do you think I could approach this using UI gradient. I’ve never tried that before.

1 Like

Sure, add a UIGradient to the bar. Edit its Transparency number sequence (click the “…” to get to the graph editor). Make it have a sharp jump from 0 to 1 transparency at the end of the sequence, like having time 0 set to value 0, time 0.999 set to value 0, then time 1 set to value 1.
Now, you can make the bar animate by setting the UIGradients’ Offset vector2. Without rotating it, you’ll be animating the Offset.X value from 0 (100% full) to -1 (0% full). You can see how that would look by setting UIGradient.Offset = Vector2.new(-0.5, 0) to make the bar half-empty.

This Vector2 can be animated using TweenService too.

13 Likes

Well thanks very much, that seemed to have worked perfectly!

1 Like

How would you code it? Because when I devide current health by max, the ratio isnt sensible since if it is a ratio like -
image_2023-02-22_215722030
0.25 or 25% health, it visually shows something that would be 75%
image_2023-02-22_215730666

-1+(health/maxhealth) do this instead

2 Likes

haha, found that fix 5 months ago :sweat_smile: