How to make a quick health bar [Edited]

The Advanced One ā€”> How To Make Advanced Health Bar - Resources / Community Tutorials - DevForum | Roblox

About the Health Bar

The health bar is a think that show the player health only the client can see it

Setting up the Health Bar

image
The Size and the Position of the Frame in the red border Should Be Like this:
image

Enable The Reset on Spawn Property in the Health Gui
image

image

The Script

Put The Script in the localscript

repeat wait() until game.Players.LocalPlayer.Character  --Wait For The Player Character
repeat wait() until game.Players.LocalPlayer.Character:FindFirstChild("Humanoid")--Wait For The Player Character Humanoid

while wait() do --Loop
	script.Parent.Size = UDim2.new(game.Players.LocalPlayer.Character.Humanoid.Health/game.Players.LocalPlayer.Character.Humanoid.MaxHealth,0,1,0) --Set The Size Of The Frame To The PlayerHealth
end
19 Likes

Nice tutorial, but Iā€™d say you forgot the important aspect of AnchorPoint. It can really change how the UI looks.

yea ur right but ik that but i like to use auto scale plugin for that

You should try using variables and events in your code! This is a cleaner, probably more efficient, way to do the same thing (without loops):

--[[
    If the local player has a character, use it. If not, wait
    until it's spawned.

    You might use a `while` loop in place of the `WaitForChild`
    call, if you can't guarantee "Humanoid" is the name
    of the Humanoid object.
--]]
local Player = game:GetService("Players").LocalPlayer
local Character = Player.Character or Player.CharacterAdded:Wait()
local Humanoid = Character:WaitForChild("Humanoid")

local Healthbar = script.Parent

--[[
    Wrap the updater up in a function so we can reuse it.

    We clamp the health value to prevent it from going
    below 0 or above 1.

    You may swap the values of `.fromScale` if you wanted
    a vertical healthbar.
--]]
local function UpdateHealthbar()
    local health = math.clamp(Humanoid.Health / Humanoid.MaxHealth, 0, 1)
    Healthbar.Size = UDim2.fromScale(health, 1)
end

--[[
    Update the healthbar in case their health is not 100%
    when the script loads.
--]]
UpdateHealthbar()

--[[
    Listen for changes in Health or MaxHealth
--]]
Humanoid:GetPropertyChangedSignal("Health"):Connect(UpdateHealthbar)
Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(UpdateHealthbar)
10 Likes

the health bar i put there is a basic one

Nice tutorial! Health bars are a fun and simple start for people new to scripting. Though, I have a little feedback for this tutorial. I feel that the script in this tutorial could do well to teach about events, variables, and functions, all important principles to programming in Roblox and in general (and all of which would come into play when scripting a health bar). Basic or not, I believe that practical tutorials like these should reflect good practices and design patterns (especially when your tutorial is meant for absolute beginners!)

3 Likes

thx for the feedback @Optikk i will try to put some functions and other stuff in the future posts

ik that but this is just a basic one i am gonna make advanced one later with tween and other stuff