Healthbar image scaling issue

Help and Feedback Art Design Support
#1

Hello. I’m trying to make this type of health bar:
image

However, when I scale the green bar down on the X axis this is what happens:
image

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.

1 Like
#2

Theres a property in GUI Image objects called “ScaleType” and it determines how your image gets scaled. What you want is 9-slice

https://developer.roblox.com/en-us/api-reference/enum/ScaleType

These should help

1 Like
#3

Alright, I’ll try it out! I’ll let you know if it works.

1 Like
#4

I still can not figure out how to do this. :sweat_smile:

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.

#5

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.

1 Like
#6

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.

#7

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...

-- Functions
-- Updates size in offset
function _updateSize()
	script.Parent.Size = UDim2.new(0, Parent.AbsoluteSize.X, 1, 0)
end

Parent:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	_updateSize()
end)
_updateSize()

Note: this only works in game, also you’ll need to modify the invisible frame, not the bar itself.

1 Like
#8

Oo! This works!!! Could you please explain the logic behind this?

#9

GUI part:

  • The invisible frame itself is what I call a “clipper”. It uses the ClipsDescendants property to achieve this effect, if the property is enabled, every children of the UI will not be rendered (parts of them) if outside of the parent’s size.

Script part:

  • It’s extremely simple, it just listens when the parent (in this case, the background) changes screen sizes, and adapts the bar’s size to it. If you simply set the bar’s size to 1, 0, 1, 0, it would not work.
1 Like
#10

Thank you for the explanation! I really appreciate your help.

1 Like