LayoutOrder Issue with Custom Backpak UI

[ConnorPlayz115]

I created a Custom Backpack UI, Inside the UI is a UIListLayout to center the tool buttons, however it messes up the order the tools are in and I don’t know how to fix it.

List Layout In Studio Testing

Toolbar
UIListLayout
[ToolButton1]
[ToolButto2]

Images:

Image 1/2

Image 2/2

Code:

function UpdateBackpack()
	local Objects = Hotbar:GetChildren()
	local Tools = GetTools()

	for _, Frame in pairs(Objects) do
		if Frame:IsA("GuiObject") then
			Frame.Num.Text = Frame.LayoutOrder
		end
	end

	for _, Tool in pairs(Tools) do
		if not GetFrame(Tool) then
			AddHotbarButton(Tool)
		end
	end
end

[Nyxifier (nyxon)]

From the images, it seems to work how it should. What exactly is the problem?

[ConnorPlayz115]

It doesn’t go 1, 2, 3… It goes 2, 3, 4… because of the UIListLayout

[OniiSamaUwU (UwU)]

Well how exactly are the LayoutOrder being set? Make sure you are ignoring non GuiObjects (in this case your UIListLayout).

[ConnorPlayz115]

What do you mean by the “LayoutOrder being set”?

[OniiSamaUwU (UwU)]

Your code is dependent on the button’s LayoutOrder, which I assume you are changing when you clone via AddHotbarButton. How is the LayoutOrder being set.

[ConnorPlayz115]

The way the tools are listed in the players backpack.

Backpack:
[1] Phone
[2] Car Key

UI:
[1] Phone
[2] Car Key

But in the UI it’s going
[2] Phone
[3] Car Key

[OniiSamaUwU (UwU)]

I don’t think you understand my question. Although Roblox does order their backpack by the time in which a Tool has been added, it can be overriden by the Player by dragging, however, that is not what I am asking.

Your code is dependent on the LayoutOrder of your Frame, specifically this line:

Frame.Num.Text = Frame.LayoutOrder

How is that Frame’s LayoutOrder being set?

[ConnorPlayz115]

This?
NewToolButton.LayoutOrder = #Hotbar:GetChildren() + 1

[OniiSamaUwU (UwU)]

That is your issue. The UIListLayout is included with that GetChildren. If you are guaranteed to only have 1 non-hotbar child, you can remove that + 1 in your code. Alternatively, this code accounts for future changes:

local function getHotbarCount(): number
    local count: number = 0
    
    for _: number, child: Instance in Hotbar:GetChildren() do
        if child:IsA("GuiObject") == true then -- can change to "guarantee" hotbar
            count += 1
        end
    end

    return count
end

NewToolButton.LayoutOrder = getHotbarCount() + 1

[ConnorPlayz115]

It worked with the new changes, Thank you so much!