Hello. I’m trying to make this type of health bar:
However, when I scale the green bar down on the X axis this is what happens:
As you can see, it kind of squeezes in. So, my question is how do I fix that? I’m trying to achieve a healthbar like Genshin Impact’s one.
Note: I’m bad at explaining so please do tell me if you need me explain more.
Theres a property in GUI Image objects called “ScaleType” and it determines how your image gets scaled. What you want is 9-slice
These should help
Alright, I’ll try it out! I’ll let you know if it works.
I still can not figure out how to do this.
Here’s the roblox file:
Hpbar.rbxl (39.2 KB)
I’d love it if you’d check it out and see what I’ve done and perhaps help me out with it.
You have to create a frame inside the background (in your case, the transparent white thing), check ClipsDescendants, make it invisible with BackgroundTransparency, then place the green bar itself into the newly created frame, and finally, set the green bar’s scale in offset to the size of your background (checked the rbxl file and it seems to be offset). This will not work if you use Scale for the background.
Oops! I forgot to convert it to scale size.
Hpbar.rbxl (40.6 KB)
I’ve done everything you’ve told me and the issue still persists. Above is the updated version of it.
Well, I’ve managed to find a way to make it work with Scale either way. You gotta insert a LocalScript into the bar, type this in:
local Parent = script.Parent.Parent.Parent -- Edit this if you're going to use this later...
-- Updates size in offset
script.Parent.Size = UDim2.new(0, Parent.AbsoluteSize.X, 1, 0)
Note: this only works in game, also you’ll need to modify the invisible frame, not the bar itself.
Oo! This works!!! Could you please explain the logic behind this?
Thank you for the explanation! I really appreciate your help.