Customizable Health Bar

Resources Community Resources
#1

Hello! I made a custom health bar that replaces the default Roblox health bar, and I would like to share it with you. Using the default settings, it fits in perfectly with the Roblox topbar buttons, but there are a variety of settings that you can change to make it fit in with your game. You can change the animations, transparency, size, font, and more!

image

How to Use:

Insert the model into your game, and move it into StarterPlayerScripts. The default Roblox health bar will automatically be replaced.

https://www.roblox.com/library/6433479950/Health-Bar

How to Customize the Health Bar:

Select the script, and go to the Properties window. There are several Attributes that specify how the health bar will look. Note that the default settings make the health bar fit in with the Roblox topbar, but you can change them to make them fit the theme of your game, if you’d like.

  • AnimationTime: the duration of the animations (in seconds)

  • BackgroundTransparency: background transparency of the health bar

  • CornerRadius: UICorner CornerRadius property (if you set this to 0, 0, no UICorner will be created)

  • EasingStyle: the name of the EasingStyle used for animations

  • Font: the name of the Font used by the health TextLabel

  • FrameXPosition: the distance from the right side of the screen (in pixels). Useful if you have other buttons on the right side of the topbar.

  • HealthTransparency: the transparency of the colored section of the health bar

  • Width: the width of the health bar when expanded (in pixels)

If you want more customization than what is provided here, you can tell me in a reply and I’ll try to add it if it’s reasonable, or you can just edit the script yourself.

Source Code:

The script is just 145 lines long, so I’ve included the code here. If you don’t want to use the model, you can copy and paste this into a LocalScript and it will work.

-- Services
local textServ = game:GetService("TextService")
local tweenServ = game:GetService("TweenService")
local players = game:GetService("Players")
local player = players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

-- UI Instances
local healthBarGui
local healthBar
local uiGradient
local healthTextLabel

-- Attribute Values
local animTweenInfo = TweenInfo.new(script:GetAttribute("AnimationTime") or 0.6, Enum.EasingStyle[script:GetAttribute("EasingStyle") or "Exponential"])
local backgroundTransparency = script:GetAttribute("BackgroundTransparency") or 0.5
local cornerRadius = script:GetAttribute("CornerRadius") or UDim.new(0, 8)
local font = Enum.Font[script:GetAttribute("Font") or "GothamSemibold"]
local frameXPosition = script:GetAttribute("FrameXPosition") or -60
local healthTransparency = script:GetAttribute("HealthTransparency") or 0.3
local width = script:GetAttribute("Width") or 125

-- Values
local textSize = 16
local backgroundColor = Color3.new(0, 0, 0)
local textColor = Color3.fromRGB(243, 243, 243)

--<>-- Functions --<>--

-- Update health bar and run animations
local function onHealthChanged(health)
	health = math.round(health)
	local percent = health / 100
	local healthColor = Color3.fromHSV(percent * 0.325, 1, 1)

	healthTextLabel.Text = health

	-- Resize health bar
	if health == 100 or health == 0 then
		tweenServ:Create(healthBar, animTweenInfo, {Size = UDim2.fromOffset(textServ:GetTextSize(tostring(health), textSize, font, Vector2.new(1000, 32)).X + 16, 32)}):Play()
	elseif healthBar.AbsoluteSize.X ~= width then
		tweenServ:Create(healthBar, animTweenInfo, {Size = UDim2.fromOffset(width, 32)}):Play()
	end

	-- Change text color and background color
	tweenServ:Create(healthBar, animTweenInfo, {BackgroundColor3 = healthColor}):Play()
	tweenServ:Create(healthTextLabel, animTweenInfo, {TextColor3 = health == 100 and healthColor or textColor}):Play()

	-- Move gradient position
	tweenServ:Create(uiGradient, animTweenInfo, {Offset = Vector2.new((health == 100 and 0) or (health == 0 and 100) or percent, 0)}):Play() -- move gradient
end

-- Connect to the new character's Humanoid's health changes
local function onCharacterAdded(character)
	if not character then return end

	local humanoid = character:WaitForChild("Humanoid")
	onHealthChanged(100)

	-- Update health
	humanoid:GetPropertyChangedSignal("Health"):Connect(function()
		onHealthChanged(humanoid.Health)
	end)
end

--<>-- Create UI --<>--

do
	-- Create an instance of a class and set properties
	local function createInstance(className, properties, parent)
		local instance = Instance.new(className)

		for i, v in pairs(properties) do
			instance[i] = v
		end

		if parent then
			instance.Parent = parent
		end

		return instance
	end
	
	-- Create ScreenGui
	healthBarGui = createInstance("ScreenGui", {
		Name = "HealthBar",
		ResetOnSpawn = false,
		IgnoreGuiInset = true,
		ZIndexBehavior = Enum.ZIndexBehavior.Sibling
	}, playerGui)
	
	-- Create health bar frame
	healthBar = createInstance("Frame", {
		Name = "HealthBar",

		Size = UDim2.fromOffset(width, 32),
		Position = UDim2.new(1, frameXPosition, 0, 4),
		AnchorPoint = Vector2.new(1, 0),

		BackgroundColor3 = Color3.new(1, 1, 1),
		BorderSizePixel = 0
	}, healthBarGui)
	
	-- Create UICorner (if corner radius is not 0)
	if cornerRadius.Scale ~= 0 or cornerRadius.Offset ~= 0 then
		createInstance("UICorner", {CornerRadius = cornerRadius}, healthBar)
	end
	
	-- Create UIGradient
	uiGradient = createInstance("UIGradient", {
		Color = ColorSequence.new({
			ColorSequenceKeypoint.new(0, Color3.new(1, 1, 1)),
			ColorSequenceKeypoint.new(0.001, backgroundColor),
			ColorSequenceKeypoint.new(1, backgroundColor)
		}),
		Transparency = NumberSequence.new({
			NumberSequenceKeypoint.new(0, healthTransparency),
			NumberSequenceKeypoint.new(0.001, backgroundTransparency),
			NumberSequenceKeypoint.new(1, backgroundTransparency)
		}),
		Offset = Vector2.new(1, 0)
	}, healthBar)
	
	-- Create TextLabel for current health
	healthTextLabel = createInstance("TextLabel", {
		Size = UDim2.new(0, 100, 1, 0),
		Position = UDim2.new(1, -8, 0, 0),
		AnchorPoint = Vector2.new(1, 0),

		BackgroundTransparency = 1,
		BorderSizePixel = 0,

		Text = "100",
		TextColor3 = textColor,
		TextSize = textSize,
		Font = font,
		TextXAlignment = Enum.TextXAlignment.Right
	}, healthBar)
end

player.CharacterAdded:Connect(onCharacterAdded)
onCharacterAdded(player.Character)

-- Disable default health bar
game:GetService("StarterGui"):SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

I hope you find this useful! If you have any suggestions or ideas or find any bugs, just leave a reply.

38 Likes
#2

It’s great I’m using this it works well

1 Like
#3

This is just… amazing.

It should be the default health bar on Roblox.

Very good job!

1 Like
#4

Suggestions:
-Add a UI Grandient (In colors)
-Add a UI Grandient configuration
-When a player dies, the “0” text should be “You died” with a red text
-The “You died” text can be enabled to configure it
-Add a UI of “Show health bar” (can be disabled)

5 Likes
#5

about the ui gradient i’m pretty sure you can add it yourself (if not, i’ll try to add it for you and send you a modified version of the model i guess) and i’m pretty sure the reason there’s not an ui gradient is because it’s supposed to fit with the default roblox stuff i guess