How do I make overlaping healthbar?

I’m trying to make a boss with multiple healthbar overlaping one another
each bar will have its own color and represense 200 point of hp

for example if the boss have 600 HP

we’ll have 3 bar which stack on top of each other and will be update one by one
when the damage exceed 200 point (aka worth one bar) it will delete the top most bar then proceed to update the next one down the line

How it look at full hp (100%)

How it look at 500 hp (90%)

How it look at 250 hp (41.66%)

How it look at 0 hp (0%)

If each bar has exactly 250 Hp, then you could probably make it like a normal health bar and just add checks if it reached below a certain value and then you’d just swap the bar its changing the size of

you could try this

local greenbar = -- put your frame here
local orangebar = -- put your frame here
local redbar = -- put your frame here

function setbar(health, maxhealth)
	local nmh = maxhealth/3
	greenbar.Size = Udim2.FromScale(math.clamp((health-(nmh*2))/nmh,0,1),1)
	orangebar.Size = Udim2.FromScale(math.clamp((health-nmh)/nmh,0,1),1)
	redbar.Size = Udim2.FromScale(math.clamp((health)/nmh,0,1),1)
end

You can create health bar like this:

  • Frame - transparent background
  • Filter - second color
  • Bar - primary color

Then you can create module with name of Health bar and set Colors for specific HP values, for example:

HealthBarColors  = {
    1000 = "Red",
    500 = "Orange",
    200 = "Green"
}