Requesting help with OverHead health gui

Hey, so recently I started attempting to make a server-sided OverHead health bar. As you can guess it probably didn’t go so well…

So; https://gyazo.com/1527d98619e8c3968e99e18b0293eb59.gif
As you can see the health bar is all fine etc…

And then; https://gyazo.com/49775fc16ae97b7e801f020c30f4742d.gif
I had to zoom out…

Anyone know how to fix this issue?

The green bar is using Offset.
image

The “Frame” has ClipDescendants on.

Script: Support from Quoteory.

local Player = script.Parent.Parent:WaitForChild("Humanoid")
local Board = script.Parent
local BackFrame = Board.Back 
local Frame = BackFrame.Frame
local Bar = Frame.Bar 

function ResizeClip(X)
	Frame:TweenSize(UDim2.new(X, 0, 1, 0), "Out", "Quad", 0.25, true)
end

function ResizeBarOffset()
	ResizeClip(Player.Health/Player.MaxHealth)
end

Player.HealthChanged:Connect(ResizeBarOffset)

This is what happens when I use Scale for the green bar

3 Likes

Hello @AnimeDevotee,
Try the other two things also offset to make everything offset. If it hifts that will be glad for me.
Your Sincerely,
FroschCrafterLP

I attempted that - I thought I had added a gif of what happens when it uses scale - mb. I’ll add one right now.

As the “Health” lowers the image starts to become rectangular.

I struggled to understand what you mean - I assume I have deciphered your message tho; do you mean I should make everything Offset if I am going to make a single thing Offset?

If I make everything Offset then the entire GUI shrinks/enlarges depending on magnification(Zoom)

Would not that be what you want?

No - what I want is for the GREEN BAR to go to the left as the player loses “Health”.

This is what happens when I make EVERYTHING Offset.

(It shrinks when I get closer and enlarges when I get further away)

… I don’t think players want the Healthbar to be getting bigger when they zoom out.

I have attempted that before;

If I changed Tweened the position rather than the size then the object moves to the left - https://gyazo.com/aeea4febea42ad0f430324f486aeea29?token=37a8178bf55899cd51b1f9f9f7e79ec0

That is very confusing.
Could you clarify please?

Sure!

Descendants are only clipped if they reach the border of the image label. It is always a rectangle. But the frame image you are using is rounded meaning it won’t completely reach the genuine border of the label. That causes things inside the frame to “leak out”.

1 Like

What I am looking for is actually;

Background Bar
Health Bar

As the player loses health the Health Bar moves from the Right towards the Left WITHOUT changing shape.

Ok so you need to use Scale on everything the billboard, background, and healthbar. No offsets unless you need stud offset for height above the players head. This will keep it from resizing to large when you are away from it. I have also included the way to resize the bar you can change this into a tween if you like.

Example is:
Billboard size {5, 0},{3, 0}
Background size {0.95, 0},{0.2, 0}
HealthBar size {0.95, 0},{0.2, 0}

Billboard.HealthBar.Size = UDim2.new(.95/(MaxHP/CurrentHP), 0,.2, 0)

The problem with that is; the smaller the image is tweened the more the image loses its shape and becomes a rectangle.

HpBar.rbxm (3.8 KB)

This Bar uses clip descendants, positioning and Image Labels.
If you disable the loop in the local script you can set the value manually to see it work. Something like this may work for you.