Help with health bar GUI

[SamuelaNutella (snailenjoyer)]

Hi so I’m making a custom health bar GUI and the way it works is there’s a full health bar imagelabel and an empty health bar imagelabel inside a frame with clipsdecendants (the frame is inside the empty health bar imagelabel) on and every time you take damage the frame clips the full health imagelabel making the bar go down. It only crops the full health imagelabel when it’s on offset and not scale, so it doesn’t scale the full health bar to all platforms.

How can I make it so the frame crops the full health bar but make it scale size and position to all platforms?

[jvdad2222]

Hi I don’t have the time to share the code with you but the basic concept is:

1) Create the bar the way you want but use “Scale” not “Offset” to both position and size it and make sure to set the anchor point to 0,0

This means that it will look the same on all screen sizes (because using scales)

2) Rather than do the clip descendent thing use percentages

Because the anchor point is set to 0,0 we can scale up and down the width from 0% to 100%

100% = the full width of the health bar

So, for example, to change the size of the health bar to, say 80%,
You could make the new width = fullWidth * 0.8

Hope this helps sorry I can’t paste code right now.

[kingerman88]

Here is an outline of what you potentially may want to do

local player = game.Players.LocalPlayer -- Get the local player
local character = player.Character or player.CharacterAdded:Wait()
-- Get the character, if it is not already a created it will wait for it's creation through the CharacterAdded function
local humanoid =  character:WaitForChild('Humanoid') -- Get the humanoid 

humanoid.Changed:Connect(function()
   -- Create your code that changes the health bar
end)

You will want to use their health divided by their max health in order to determine how far the bar should be

[jvdad2222]

Building on what @kingerman88 mentioned here’s some code for ya:

local barHeight = 0.5
local healthBarSIze = percentHealthLeft * healthOnePercent
player.PlayerGui.ScreenGui.Frame.HealthBar.Size = UDim2.new(barDoneSize, 0, barHeight, 0)

You can get healthOnePercent by dividing the original width by 100.

[SamuelaNutella (snailenjoyer)]

Sorry if I forgot to mention this but the health bar is an odd shape so I can’t just scale its size.

[Album] imgur.com

That’s why I was using clipsdescendandts.

[Thereasonableplayer (Reasonable)]

I’m not the greatest at explaining, but I’ll try.
To decrease the size you would want to link the size of the GUI to the max health of the player. How would you do that? Well you can get the original size of the GUI with something as simple as local originalsize = script.Parent.wherever it is.Size, and then multiplying it by the (health/max health), so the GUI gets to the correct size(user tween service if you want it to be smooth)

You would want to use the :GetPropertyChangedSignal for the health of the user every single time the user loses hp(Humanoid:GetPropertyChangedSignal(“Value):Connect(function()) to pick up the change in the hp of the user.

What explained goes for losing health, but what about gaining health? Well you can use variables in the script to pick up the “original” hp of the player, and compare it to the property changed signal hp of the player. Make an if statement for that, and add the hp!

[SamuelaNutella (snailenjoyer)]

You mean scale? Offset doesn’t scale size for all devices

[Thereasonableplayer (Reasonable)]

Oh yeah you are right that’s my fault.

[SamuelaNutella (snailenjoyer)]

That’s the issue here, I need it to scale to the screen size but not scale to the frames size.

[jvdad2222]

Ideally you should separate the images/and make the green line just a rectangle ImageLabel and change the size of it dynamically as mentioned above.

In may case I made it out of 2 empty ImageLabels. They were just a background color. I set the todo bar as 0.75 transparent (just as a guide for the user to know where it will go). And then set the done line as 0% transparency.