How can I make a circular health bar with percentage

Help and Feedback Scripting Support
#1

I would like to make a circular health bar that whenever you take damage the health bar moves and the percentage lowers.

Basically like what it shown below except for when it takes damage
It loses a portion like that except in the post I want it to be opposite and have a percentage.
No I am not a good scripter I just can’t figure out how to do it circular would anyone be able to help me?

Screen Shot 2022-02-10 at 9.27.55 PM

Or having it segmented.
3 Likes
#2

I just modified the code to check the MaxHealth and the Health of the Player’s Humanoid.

Which looks like: (Humanoid.Health / Humanoid.MaxHealth)*100

Here’s the full script:

local Player = game:GetService("Players").LocalPlayer

game:GetService("RunService").RenderStepped:Connect(function()
	
	local Character = Player.Character
	local Humanoid = Player and Character:FindFirstChild("Humanoid")
	
	if Character and Humanoid then
		script.Parent.Value = (Humanoid.Health / Humanoid.MaxHealth)*100
	end

	local PercentNumber = math.clamp(script.Parent.Value * 3.6,0,360)
	local F1 = script.Parent.Parent.Frame1.ImageLabel
	local F2 = script.Parent.Parent.Frame2.ImageLabel
	
	F1.UIGradient.Rotation = script.FlipProgress.Value == false and math.clamp(PercentNumber,180,360) or 180 - math.clamp(PercentNumber,0,180)
	F2.UIGradient.Rotation = script.FlipProgress.Value == false and math.clamp(PercentNumber,0,180) or 180 - math.clamp(PercentNumber,180,360)
	F1.ImageColor3 = script.ImageColor.Value
	F2.ImageColor3 = script.ImageColor.Value
	F1.ImageTransparency = script.ImageTrans.Value
	F2.ImageTransparency = script.ImageTrans.Value
	F1.Image = "rbxassetid://" .. script.ImageId.Value
	F2.Image = "rbxassetid://" .. script.ImageId.Value
	if script.MissingPartType.Value == "Color" then
		F1.UIGradient.Color = ColorSequence.new({ColorSequenceKeypoint.new(0,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.5,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.501,script.ColorOfMissingPart.Value),ColorSequenceKeypoint.new(1,script.ColorOfMissingPart.Value)})
		F2.UIGradient.Color = ColorSequence.new({ColorSequenceKeypoint.new(0,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.5,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.501,script.ColorOfMissingPart.Value),ColorSequenceKeypoint.new(1,script.ColorOfMissingPart.Value)})
		F1.UIGradient.Transparency = NumberSequence.new(0)
		F2.UIGradient.Transparency = NumberSequence.new(0)
	elseif script.MissingPartType.Value == "Trans" then
		F1.UIGradient.Transparency = NumberSequence.new({NumberSequenceKeypoint.new(0,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.5,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.501,script.TransOfMissingPart.Value),NumberSequenceKeypoint.new(1,script.TransOfMissingPart.Value)})
		F2.UIGradient.Transparency = NumberSequence.new({NumberSequenceKeypoint.new(0,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.5,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.501,script.TransOfMissingPart.Value),NumberSequenceKeypoint.new(1,script.TransOfMissingPart.Value)})
		F1.UIGradient.Color = ColorSequence.new(Color3.new(1,1,1))
		F2.UIGradient.Color = ColorSequence.new(Color3.new(1,1,1))
	elseif script.MissingPartType.Value == "TransAndColor" then
		F1.UIGradient.Transparency = NumberSequence.new({NumberSequenceKeypoint.new(0,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.5,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.501,script.TransOfMissingPart.Value),NumberSequenceKeypoint.new(1,script.TransOfMissingPart.Value)})
		F2.UIGradient.Transparency = NumberSequence.new({NumberSequenceKeypoint.new(0,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.5,script.TransOfPercentPart.Value),NumberSequenceKeypoint.new(0.501,script.TransOfMissingPart.Value),NumberSequenceKeypoint.new(1,script.TransOfMissingPart.Value)})
		F1.UIGradient.Color = ColorSequence.new({ColorSequenceKeypoint.new(0,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.5,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.501,script.ColorOfMissingPart.Value),ColorSequenceKeypoint.new(1,script.ColorOfMissingPart.Value)})
		F2.UIGradient.Color = ColorSequence.new({ColorSequenceKeypoint.new(0,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.5,script.ColorOfPercentPart.Value),ColorSequenceKeypoint.new(0.501,script.ColorOfMissingPart.Value),ColorSequenceKeypoint.new(1,script.ColorOfMissingPart.Value)})
	else
		script.MissingPartType.Value = "Trans"
		error("Unknown Type. Only 3 available: “Trans”, “Color” and “TransAndColor”, changing to “Trans”.")
	end
end)
#3

wait- OHH but quick question instead of it just changing can it be nice and smooth like the one in the post and is it possible to change the direction of when you lose HP.

#4

circle health.rbxl (40.3 KB)

2 Likes
#5

thanks a lot man appreciate it.

1 Like
#6

No problem. Glad i could help.

1 Like