Resizing GUIS, based on two values

Hey guys, so i have a gui displaying two values, current health / max health. What i want is when current health decreases the size of the gui shall decrease with it, and when it increases it should too. Currently i have no idea on how to achieve this and i havent found tutorials on this. If anyone can help me that’d be great!
Good Bye!

1 Like

You could use TweenService [ Udim2] for it.

Here are some articles:


First Step:

Create a frame

Second Step:

Add another frame into it, and name it bar, then set its size to {1,0,1,0}

Third Step:

Create a local script in Frame and type the following code
(Using task.wait() as @Valkyrop mentioned that its good for performance)

local player = game.Players.LocalPlayer
local character = player.CharacterAdded:Wait() or player.Character

local humanoid = character:WaitForChild("Humanoid") or character:FindFirstChild("Humanoid")
local health = humanoid.Health
local maxHealth = humanoid.MaxHealth

while task.wait() do
    local ratio = (health/maxHealth),0,1,0), Enum.EasingDirection.In, Enum.EasingStyle.Linear, .2)

(Using tween to make it more cool)
Our health bar ui is now ready!

Grab rbxm file from here (drag and drop)
CoolHealthBar.rbxm (2.8 KB)


Grab the model from here:


You could even add 3 layers to your health gui!

Top = green
Middle = white
Bottom = black/red

Top will be the green that goes down, after you’ve taken damage (changes size)
Middle is the interesting one! You could do the same with this as you did with Top, but delay this by 1 second or so in the tween. This will make the effect, so that a player can see what how far their health went down.
Bottom will be the background, so no need to do anything with this.

I hope the explanation was alright, didn’t fancy giving out the finished script. :slight_smile:

1 Like

thank you! and thanks everyone else that helped in such a quick response time!

1 Like