How to make a UI start from the top to bottom

Help and Feedback Scripting Support
1

Please is someone goods with UIs? Im trying to make the bar go start from the top currently its starting from the bottom:

PROBLEM - Currently the bar starts from the bottom:

image
image624×597 72.8 KB

WHAT I WANT TO ACHIEVE - The bar starts from the top:

image
image652×568 72.9 KB

UI ELEMENTS:

image
image303×103 2.31 KB

local player = game.Players.LocalPlayer
local char = player.Character or player.ChildAdded:Wait()
local hum = char: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

while true do task.wait()
	local healthRatio = hum.Health / hum.MaxHealth
	resizeCustomLoadingBar(healthRatio, script.Parent.ImageLabel.Clipping, script.Parent.ImageLabel.Clipping.Top)
end
1 Like
2

Is the white part or the gray part the bar?

3

The white part is the bar and the grey part is the one that serves as the background for the bar

4

Which one are you trying to resize?

5

The white bar is the one I am trying to resize its also called “Top”

6 
local player = game.Players.LocalPlayer
local char = player.Character or player.ChildAdded:Wait()
local hum = char:WaitForChild("Humanoid")

function resizeCustomLoadingBar(sizeRatio, clipping, top)
    -- Update the size and position of the clipping element
    clipping.Size = UDim2.new(clipping.Size.X.Scale, clipping.Size.X.Offset, sizeRatio, clipping.Size.Y.Offset)
    clipping.Position = UDim2.new(clipping.Position.X.Scale, clipping.Position.X.Offset, 1 - sizeRatio, clipping.Position.Y.Offset)
    
    -- Adjust the top overlay to match the clipping height
    top.Size = UDim2.new(top.Size.X.Scale, top.Size.X.Offset, (sizeRatio > 0 and 1 / sizeRatio) or 0, top.Size.Y.Offset)
end

while true do
    task.wait()
    local healthRatio = hum.Health / hum.MaxHealth
    resizeCustomLoadingBar(healthRatio, script.Parent.ImageLabel.Clipping, script.Parent.ImageLabel.Clipping.Top)
end
1 Like
7

Try changing the AnchorPoint of it.

8

This is what happened:

image
image583×628 63.3 KB

9

How can I change the achorPoint?

10

can you try this rq?

local player = game.Players.LocalPlayer
local char = player.Character or player.CharacterAdded:Wait()
local hum = char:WaitForChild("Humanoid")

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

while true do 
    task.wait()
    local healthRatio = hum.Health / hum.MaxHealth
    resizeCustomLoadingBar(healthRatio, script.Parent.ImageLabel.Clipping, script.Parent.ImageLabel.Clipping.Top)
end
1 Like
11

GuiObject.AnchorPoint

12

I would suggest using this instead of manually offsetting it with code.

13

My health is 80 and its still similar to the 1st screenshot I have sent:

image
image1920×940 96.7 KB

14

Change the anchor point of the white part to Vector2.yAxis

15

why don’t you just use a UIGradient?

1 Like