Healthbar shrinks to the side instead of down?

[obamagremlin (jayp)]

My health is at 50% and it shrinks to the side, I want it to shrink downwards. (Ignore the color and text not updating)

local localPlayer = Players.LocalPlayer
local character = localPlayer.Character or localPlayer.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

function resizeCustomLoadingBar(sizeRatio, clipping, top)
	clipping.Size = UDim2.new(sizeRatio, clipping.Size.X.Offset, clipping.Size.Y.Scale, clipping.Size.Y.Offset)
	top.Size = UDim2.new((sizeRatio > 0 and 1 / sizeRatio) or 0, top.Size.X.Offset, top.Size.Y.Scale, top.Size.Y.Offset) -- Extra check in place just to avoid doing 1 / 0 (which is undefined)

end

function changed(value: number)
	local healthRatio = humanoid.Health / humanoid.MaxHealth
	resizeCustomLoadingBar(healthRatio, script.Parent.Parent, script.Parent)
end

humanoid:GetPropertyChangedSignal("Health"):Connect(changed)

some of the code was borrowed from a custom image health bar tutorial

[AstroStudioz]

you’re adjusting the Size property only for the X-axis (sizeRatio, ... ). To make the health bar shrink vertically (downward), you need to modify the Y-axis instead.

local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer
local character = localPlayer.Character or localPlayer.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

function resizeCustomLoadingBar(sizeRatio, clipping, top)
    clipping.Size = UDim2.new(clipping.Size.X.Scale, clipping.Size.X.Offset, sizeRatio, clipping.Size.Y.Offset)
    top.Size = UDim2.new(top.Size.X.Scale, top.Size.X.Offset, (sizeRatio > 0 and 1 / sizeRatio) or 0, top.Size.Y.Offset)
end

function changed()
    local healthRatio = humanoid.Health / humanoid.MaxHealth
    resizeCustomLoadingBar(healthRatio, script.Parent.Parent, script.Parent)
end

humanoid:GetPropertyChangedSignal("Health"):Connect(changed)

[obamagremlin (jayp)]

Thanks, It’s almost working, but the bar shrinks in the wrong direction (Up). The anchor point for the green fill part is set to (0, 0). This might be caused by some other property that I didn’t set right like scale or position? Any ideas?

[AstroStudioz]

it likely means the Position isn’t adjusted dynamically to account for the reduced size. try this

local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer
local character = localPlayer.Character or localPlayer.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

-- Function to resize the health bar and adjust position
function resizeCustomLoadingBar(sizeRatio, clipping, top)
    -- Adjust the size of the green fill part
    clipping.Size = UDim2.new(clipping.Size.X.Scale, clipping.Size.X.Offset, sizeRatio, clipping.Size.Y.Offset)
    
    -- Adjust the position to ensure shrinking happens downward
    clipping.Position = UDim2.new(
        clipping.Position.X.Scale,
        clipping.Position.X.Offset,
        1 - sizeRatio, -- Move down as the height decreases
        clipping.Position.Y.Offset
    )
    
    -- Adjust the top part if necessary
    top.Size = UDim2.new(top.Size.X.Scale, top.Size.X.Offset, 1, top.Size.Y.Offset)
end

-- Function to update the health bar whenever the humanoid's health changes
function changed()
    local healthRatio = humanoid.Health / humanoid.MaxHealth
    resizeCustomLoadingBar(healthRatio, script.Parent.Parent, script.Parent)
end

-- Connect the health change event to the function
humanoid:GetPropertyChangedSignal("Health"):Connect(changed)

[AstroStudioz]

try setting the anchor point to (0 , 1)

[obamagremlin (jayp)]

almost works but its getting offsetted too much downwards now, tried playing around with it to fix it, nothing worked

[AstroStudioz]

Can you send the actual place file so i can check it out? if not its okay.

[obamagremlin (jayp)]

Hb.rbxl (61.9 KB)

[obamagremlin (jayp)]

sorry the script in the place has an old version of it but the new one i tried basically has the same result

[AstroStudioz]

Hey sorry for the late reply. I had to redo the whole system as the current one was just too messy.

Hb.rbxl (62.0 KB)

It should work as intended now. What i did was Align the GreenLayer to the top of the Clipping frame, regardless of the Clipping frame’s position.

The clipping frame moves down as you lose health and any part of the greenlayer outside of the frame becomes invisible.

The Clipping frame moves downward, hiding parts of the GreenLayer.

[obamagremlin (jayp)]

Thank you for the help! (climit)