so i see games like typical colors 2 make this so i know it is possible, but the question is how do they do it?
it looks like this
(not the character too, just the health bar)
ive a idea where the whole healthbar is a cross image and it deletes/hides part of it but im not sure if its a real gui thing or not
2 Likes
You could probably pair a Imagelabel with a UIGradient to create a similar effect. Rotate the gradient and use the Offset value according to health is how I’d do this. The text and rest should be simple.
how would i do that scripting ui gradient is kinda new for me
For the Offset, you can get the offset by dividing the humanoid’s current health with maxhealth to get a number between 0-1.
Afterwards, you can create a Vector2 value out of your results, for example, Vector2.new(DividedNumber,0) and set it to the gradient’s offset using Tweenservice or by setting it to the value immedailty.
Connect that to the humanoid’s HealthChanged event, and you should achieve a similar result. The rest like text is up to you.
how do i change the ui gradient so it dosn’t do it gradually but straight like a line?
set 0.999 to the color same as before and set the end the color that you want for the part that isn’t supposed to be filled in
what? can you show an image please
What @Qariter’s formula does is make it so that the gradient move. You only need to add 3 nodes. (The starting one that is black, another one at 0.001 to white and 1 to white)
1 Like
For the arrow marked in 1, you should set that to 0.999
Afterwards, for arrow 2, change it to the color you want for the filled in part.
Repeat arrow 1 but this time set it to 1, then set arrow 2 to color for the part that’s not filled in.
I’m sorry I can’t send a actual screenshot, as im off pc.
So this looks like 2 nodes. But they are 3. Let me explain.
Step 1: we make a new gradient. This is what you will see:
Step 2: Take node 1 and change it to black. Result:
Step 3: Create a new node by clicking any part of the gradient. Then in the “Time” parameter put it to 0.001, change the color to white. Result:
Step 4: In the properties change the gradient’s rotation to 90:
And done! Now if you change offset to let’s say 0.2 you will see this (Be sure to set background transparency to 1):
2 Likes
hmm changing the offset does nothing, am i supposed to do something else to make it move?
Hmm, have you tried messing around with the gradient a bit in studio? Check if rotating it upside down works or setting the offset to let’s say -1.5.
It could also be your script breaking. Let me know the results.
2 Likes
Did you change rotation and it worked?
1 Like
Did you rotate it correctly (Rotation: 90?) Or do you have a node at 0.999 instead of 0.001.
I believe that you have the correct rotation. however I think you have the node at 0.999. A simple fix would be to set the rotation to -90 and use positive offset (I believe).
1 Like
too late- i changed all teh colors backwards and it worked… only now i am left with dealing with negative numbers
1 Like
You could just multiply by -1 to make a number negative.
Scratch that, sorry, for your UI, do 0 minus DividedNumber.
1 Like
alr whats the math here?
local Player = game:GetService("Players").LocalPlayer
local Character = Player.Character or Player.CharacterAdded:Wait()
local Humanoid = Character:WaitForChild("Humanoid")
local uig = script.Parent
local function UpdateHealthbar()
uig.Offset.Y =
end
UpdateHealthbar()
Humanoid:GetPropertyChangedSignal("Health"):Connect(UpdateHealthbar)
Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(UpdateHealthbar)
local function UpdateHealthbar()
uig.Offset.Y = Humanoid.Health/Humanoid.MaxHealth * -1;
end
1 Like