Hello, so I’m revamping my game’s ui. Since all of it are place holders. My one problem is, my healthbar becomes really scaled down. What happens is, it wont scale like a slider. Instead it’ll make it look like it’s scaling on all axises It uses a imagelabel with scale type set to crop(not sure if it has anything to do with that)
This is how it looks:
This is my script
local Player = game.Players.LocalPlayer
local TweenService = game:GetService("TweenService")
local Character = Player.Character or Player.CharacterAdded:Wait()
wait(1)
local Humanoid = Character:FindFirstChildWhichIsA("Humanoid")
if Humanoid then
Humanoid.HealthChanged:Connect(function(Health)
script.Parent.HealthLabel.Text = math.floor(Health) .. "%"
script.Parent.HealthBar:TweenSize(UDim2.new(Health/Humanoid.MaxHealth,0,1,0), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.75, false,nil)
end)
end
For something like this, I recommend a neat little trick using the ClipDescendants property. What ClipDescendants does is if there is a GUI object parented to it that is positioned outside of its border, it will be clipped at that border.
Have the red image of the health bar parented to an invisible frame. Make sure the frame and the red image are both the same exact size. Have the invisible frame’s ClipDescendants property set to true. Then, as the player’s health goes down, move the frame to the LEFT and the red image to the RIGHT. This will make the red area visually stay in the same position while part of it from the right is clipped due to ClipDescendants when the frame is moved left.
For example, let’s say a player’s health is 100%. The Frame’s position would be UDim2.new(0, 0, 0, 0) along with the red image parented to it.
If it was 80%, the Frame’s position would be UDim2.new(-.2, 0, 0, 0) and the red area’s position would be UDim2.new(.2, 0, 0, 0). Notice how they’re spaced apart the exact same amount - just the Frame’s is negative.
An easy way to make this into code would be:
local health = humanoid.Health
local maxHealth = humanoid.MaxHealth
local ratio = health / maxHealth
frame.Position = UDim2.new(-1 + ratio, 0, 0, 0)
frame.RedArea.Position = UDim2.new(1 - ratio, 0, 0, 0)
Can you tell me more about what happens when the script runs? I’ve used this method a lot in the past when dealing with health bars that aren’t perfectly rectangular and it’s pretty reliable for me. I’m happy to help!
local Player = game.Players.LocalPlayer
local TweenService = game:GetService("TweenService")
local Character = Player.Character or Player.CharacterAdded:Wait()
wait(1)
local Humanoid = Character:FindFirstChildWhichIsA("Humanoid")
if Humanoid then
Humanoid.HealthChanged:Connect(function(Health)
--script.Parent.HealthLabel.Text = math.floor(Health) .. "%"
--script.Parent.HealthBar:TweenSize(UDim2.new(Health/Humanoid.MaxHealth,0,1,0), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.75, false,nil)
local MaxHealth = Humanoid.MaxHealth
local ratio = Health / MaxHealth
script.Parent.HealthBar:TweenPosition(UDim2.new(-1 + ratio, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.75, false, nil)
end)
end
This is what happens:
As you can see, the frame goes outside of the healthbar
You should not only tween the HealthBar, but also the invisible frame that it’s parented to. Tween it to the right as this is moving left. This will make the red area appear to stay in the same place while the right side of it goes down like a normal health bar.
Assuming the health bar is parented to the invisible frame, you’d do:
Your thing works. But for me it doesn’t work. This is my script:
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local character = player.Character
local ratio = 100
while wait() do
if not character then
character = player.CharacterAdded:wait()
end
local currentRatio = character.Humanoid.Health / character.Humanoid.MaxHealth
if currentRatio ~= ratio then
ratio = currentRatio
script.Parent.InvisibleFrame:TweenPosition( -- move invisible frame left
UDim2.new(-1 + ratio, 0, 0, 0),
Enum.EasingDirection.In,
Enum.EasingStyle.Linear,
.5,
true -- override if needed
)
script.Parent.InvisibleFrame.HealthBar:TweenPosition( -- move health bar right
UDim2.new(1 - ratio, 0, 0, 0),
Enum.EasingDirection.In,
Enum.EasingStyle.Linear,
.5,
true -- override if needed
)
end
end
This is the health bar in a separate place file if you want to see how its done.
I’ve fixed it for you. You never turned on ClipDescendants in the invisible frame which was a pretty important step. I’ve also parented the back of the health bar and the front of the health bar differently to avoid sizing errors.
