How would I make different layers for a health bar

Help and Feedback Scripting Support
#1

I want to make a health bar with layers similar to the likes of dragonball xenoverse.

The thing is, I want to have requirements for each layer, so it would be tricky trying to calculate how much each layer would be worth.

I’ve tried to make this myself even without the layers, but it was too confusing to me

what I am wanting to make

#2

Create as much health bar layers you want, then put one over another using ‘zindex’.
For scripting wise you could make the layer on top decrease and disappear once it drops under a specific minimum health vice-versa

#3

well yeah I already know that, its just the logic part that is holding me back. I don’t know how to make the logic act right and make the layers correspond with it

#4

What do you mean by logic? Also, using Zindex is basically like a Priority for UIs. The higher the Zindex value, it would be of most priority and be on top of other UIs with a lower Zindex value. You can look at this documentation for further clarification.

#5

By logic i mean calculating how much of each healthbar to display based upon the current health, max health, et.c

#6

Do you mean like the different colours? If so, you can use UI Gradients so that you wouldn’t need to use so many frames but keeping everything in one frame.

#7

For example,

The requirement for a second health bar is 50k max health right

If I have 50k health and I have 50k regular health, both bars would be full. But if i had 25k health out of 50k, only the one below it would show. I want each bar to represent a portion of the health. So the top bar’s portion would be the health ABOVE 50% and the lower bar would represent the lower 50% or under 50% health. (So at 50% health the lower bar would be full, and the top bar would be depltedd)

#8

A basic health bar script looks something like this:

local HealthBar = script.parent.HealthBar --The health bar

local MaxHealth = 200 --Easier to make multiple layers just doing 100 200 300 max health imo
local Health = 180

HealthBar.Size = Udim2.New(Health/MaxHealth,0,1,0)

Still trying to figure out the multiple bar system. Going to take a bit because I’m rusty.

#9

I’ve already implemented this system though. The thing I am asking is how to make each part of the health bar worth only a percentage of the health. Like if you have to health bars, one represents the top 50%, and the other represents the bottom 50

#10

I believe this is your solution but would have to be tweaked for your implementation.

You would only have to copy the code for the first bar and display it onto the second.

If you mean that the bottom bar is 50% of the top, which would be 50, that would in turn be 25.
This formula would give you the math needed for both bars.

Using math.clamp you can prevent the bottom bar from dropping below 0.

1 Like
#11 
local Size1 = 100
local Size2 = 200
local Size3 = 300

Humanoid.HealthChanged:Connect(function()
	local Health1 = math.clamp(Humanoid.Health,0,Size1)/100
	local Health2 = (math.clamp(Humanoid.Health,Size1,Size2)-Size1)/100
	local Health3 = (math.clamp(Humanoid.Health,Size2,Size3)-Size2)/100
end)

Health 3 counts as the very top health bar which runs out first.

For example Health 3 is calculated by locking the health between 200 and 300,
It returns a number between 200 and 300 at all times so I can take away Size2 (200) to get only their difference.

250-200 = 50
50 / 100 = 0.5

This probably isn’t the best way to do it but this one works at least.
I haven’t tested on values in the thousands so it might use some tweaking to get it to work properly. (Mainly changing the /100 at the end to have the same amount of zeros as the max health)

#12

I think it might just be an image label with multiple colors.

1 Like