How to make custom guis in Roblox! (Part 2: Health Bar)

HEALTH BAR

First, We’ll start off with a screen gui again!
16.06.2022_09.08.30_REC

Then we’ll create the essentials:

  • A frame
  • Another frame (place in main frame)
  • TextLabel (optional) (place in minor frame)
  • Local Script (place in minor frame)

Finally, we’ll start scripting!

We’ll start off with determining our variables!

local player = game.Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

Next up, we’ll remove the regular roblox health bar core gui!

local player = game.Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false) -- this makes the visibility of the normal roblox health bar false.

Now, we’re moving on to the main function,

local function updateHealthBar()
local healthChange = humanoid.Health/humanoid.MaxHealth

The healthChange variable defines how much of the minor frame will cover the main frame.
So if the player has 90 health, we’ll divide 90 by 100 to find the percent of how much the minor frame will cover the main frame, which would be 90%.

We’ll then tween the frame to the healthchange percent

Horizontal Frame:

local function updateHealthBar()
local healthChange = humanoid.Health/humanoid.MaxHealth

script.Parent:TweenSize(UDim2.fromScale(healthChange, 1), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, .5)
end

Vertical Frame:

local function updateHealthBar()
local healthChange = humanoid.Health/humanoid.MaxHealth

script.Parent:TweenSize(UDim2.fromScale(1, healthChange), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, .5)
end

Finally, we’ll make it so that this function plays every time the health or maxhealth changes

humanoid.HealthChanged:Connect(updateHealthBar)

Final Code:

local player = game.Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)


local function updateHealthBar()
local healthChange = humanoid.Health/humanoid.MaxHealth

script.Parent.Parent.HealthDisplay.Text = humanoid.Health .. " /" .. Humanoid.MaxHealth

script.Parent:TweenSize(UDim2.fromScale(healthChange, 1), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, .5)
end

humanoid.HealthChanged:Connect(updateHealthBar)
3 Likes

I did a a topic in the same category and they told me to put some photos or footage of it working

Can you do that?

1 Like