Help with healthbar math

I need to make a healthbar that goes from a normal bar into a circular bar after 50% of the health is lost

the bar im using is shown in this image
(the bar and circle are in the same imagelabel)
im trying to do this using a gradient with offset and rotation

1 Like

I would suggest using some simple math or tween for the bar. Then have the script check if the players health is under 50% then for the circle you can do what Roblox dose for there proximity prompts. What they basically do is have a gradient and then they use math to change the orientation and size of it so it looks like a circular moving bar. (So yeah what you are already doing is good :+1:)

So something like this maby…

local gradient = imageLabel:FindFirstChildOfClass("UIGradient")

-- assume health is from 0 to 100
function updateHealthbar(health)
	local percent = math.clamp(health / 100, 0, 1)

	if percent > 0.5 then
		-- Reveal left-to-right bar
		local t = (percent - 0.5) * 2 -- Remap 0.5–1 to 0–1
		gradient.Rotation = 0
		gradient.Offset = Vector2.new(-1 + t, 0) -- Shift from -1 to 0
	else
		-- Reveal circular part
		local t = percent * 2 -- Remap 0–0.5 to 0–1
		gradient.Rotation = 90 -- or 180 depending on circle layout
		gradient.Offset = Vector2.new(-1 + t, 0) -- Shift again
	end
end

You can also tween it for a smoother look

game:GetService("TweenService"):Create(gradient, TweenInfo.new(0.2), {
    Offset = Vector2.new(...),
    Rotation = ...
}):Play()

While this response is nice this isnt exactly what im looking for i already know how i would need to do it
This is the code i currently have the math might be a bit messy, (gradient starts at 1,1 and not at 0,0)
im also calculating it by 1.1 cause it otherwise looks weird
( also sorry i decided to make it start at 40% now and not 50%)

local HPbar = game.Workspace["3DHPBARATTEMPT"]
local Gradient = script.Parent.UIGradient

local CircularStart = 0.4

HPbar:GetAttributeChangedSignal("HP"):Connect(function()
	local HP = HPbar:GetAttribute("HP")
	if HP > 40 then 
		HP = 80 + (HP-90) 
	end
	local Calc = math.clamp(HP/100,0,1) * 1.1
	if Calc > CircularStart then
		Gradient.Rotation = 0
		Gradient.Offset = Vector2.new(Calc,1)
	else
		--empty cause idk what to calculate
	end
end)

the thing i would need to rotate the gradient and change the offset at the same time while the health changes, atleast thats what im guessing i have to do
i have been at this for a few hours already and just cant figure out the math
cause the health ends here


40% mark starts around here on the gradient

im gonna try to post a rbxm file of the hp bar later just need to talk with the designer of this if hes fine with it being shared here

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.