Health Bar GUI problems

What do you want to achieve?
I wanna make a working health bar and understand the code.

What is the issue?
The issue is whenever damage is taken the health bar gets a little bigger and it goes the wrong way. What I mean by the wrong way is when the size decreases, it decreases from the bottom, not the top.

Video
https://gyazo.com/4cf8d4e4b53757ad632b848d5ae664ae

What solutions have you tried so far?
I’ve tried flipping the numbers around seeing if that’s the problem, but nope. I’ve tried switching some numbers to negative, but that didn’t work either.

Local Script

local screenGui = script.Parent
local background = screenGui.Background
local healthGui = background.Health
local player = game.Players.LocalPlayer
local char = player.Character
local humanoid = char:WaitForChild("Humanoid")

humanoid.HealthChanged:Connect(function(damage)
	healthGui.Size = UDim2.new(.7, 0, damage / humanoid.MaxHealth, 0)
end)

image

Background GUI Properties
image

image

Health GUI Properties
image

image

1 Like

Since your bar scale size is constrained within 0-0.9, simply do

healthGui.Size = UDim2.new(.7, 0, (damage / humanoid.MaxHealth) * 0.9, 0)

And to change the direction, it is better if you change the bar anchor point to 0, 1 and change it’s Y scale position to 0.95. This way, the “center” of your health bar will be on the bottom left instead of the top left, affecting both it’s position and scale.

1 Like

But then how do I make the health get eaten from the top and not the bottom?

See I don’t like how it’s eating the health from the bottom.

Did you change the anchor point to 0, 1 and it’s position to {0.15, 0}, {0.95, 0}?

It does this:

image

If you’re still confused on how Anchor Points work, here’s a simple illustration:

The red dot represents the “center” of the GuiObject. When you set the position of the frame, you’re essentially “moving” that red dot around, with the frame following.

The red arrows represent the direction of which it will change it’s size.

Play around with the position and scaling till you see fit.

Edit:
By having the bar at an AnchorPoint of 0, 1, any scaling done to it (assuming you go from a high value → low value), will change it’s size from top to bottom.

2 Likes

I don’t quite understand that completely. When you say “(assuming you go from a high value → low value)” I don’t understand what you mean?

Did you want me to do this?

Yes. It will look the same, but play test it now.

By high value → low value, I meant with an anchor point of 0, 1, going from,
{0.7, 0}, {0.9, 0}{0.7, 0}, {0.1, 0} (Notice how the Y scale value goes from 0.9 to 0.1) will scale it from top to bottom.

If the anchor point was 0, 0 instead, changing from 0.9 to 0.1 will scale it from bottom to top.

It still goes from bottom to top.

Did I do something wrong?

BackgroundGUI
image

image

No, the BackgroundGui doesn’t matter. You’ll need to be changing the actual Health Bar. Besides, the anchor point defined is wrong. Revert that and refer to the image I posted.

It works now, thank you! I don’t quite understand the anchor points but I’ll come back to this later on.