InventoryUI Item to Slot assignment


Working on player inventory UI, and as you can see, they are all lined up accordingly and in order, but then when i play the game, this happens: (Ignore the Text, this is an issue with the order)

But ya, as you can see, the item button UI was correctly assigned to each slot, but slot35 is where slot1 should be and slot1 and 2 are in positions 2 and 3…My code is as below:

--//Services

local ReplicatedStorage = game:GetService("ReplicatedStorage")

--//Variables

local Player = game.Players.LocalPlayer
local Mouse = Player:GetMouse()
local InventoryGUI = Player.PlayerGui:FindFirstChild("InGameInterface").Inventory
local InventoryUIFolder = ReplicatedStorage.Assets.GUI.Systems.InventoryUI

local numSlots = 36
local Container = InventoryGUI.MainContainer.ItemsHolder

--//Remote Events

local UpdateInventoryUI = ReplicatedStorage.RemoteEvents.PlayerDataEvents.UpdateInventoryEvent
local EquipItem = ReplicatedStorage.RemoteEvents.PlayerDataEvents.EquipItemEvent

--//Dependencies

local LookUpTable = require(ReplicatedStorage.LookUpTables.LookUpHandle)

--//Tables

local InventoryButtons = {}

local Inventory = {}

local function CreateItem(Key, Quantity, Slot)
	local ItemTemplate = InventoryUIFolder.CommonItemSlot:Clone()
	if ItemTemplate then
	ItemTemplate.ItemName.Text = Key ---When lookup table is implemented use that
	ItemTemplate.Name = Key
	ItemTemplate.ItemQuantity.Text = "x"..Quantity
	ItemTemplate.Size = UDim2.new(1,0,1,0)
	ItemTemplate.Position = UDim2.new(0,0,0,0)
	ItemTemplate.Parent = Slot
	ItemTemplate.AnchorPoint = Vector2.new(0.5,0.5)
	ItemTemplate.Position = UDim2.new(0.5, 0, 0.5, 0) 
	Slot.ImageTransparency = 1 
	table.insert(InventoryButtons, ItemTemplate)
	end
end

local function FindEmptySlot()
	for i = 1, numSlots do
		local slot = Container:FindFirstChild("Slot_" .. i)  -- Find slot by name
		if slot and not slot:GetAttribute("Occupied") then  -- Check if the slot is not occupied
			return slot  -- Return the first available empty slot
		end
	end
	return nil  -- No empty slot found
end

local function LookUpItem(GivenItem)
	for Key, ItemButton in pairs(InventoryButtons) do 
		if ItemButton.Name == GivenItem then
			return ItemButton
		end
	end
end

local function InventoryOutOfSync() -- will be called if no button for said item is found within the UI
	
end

local function ClearInventory() -- Implement at some point!
	
end

local function UpdateInventory(Key, Action, Quantity)
	if typeof(Key) ~= "string" then return end
	if Action == "Insert" then
	CreateItem(Key, Quantity)
	elseif Action == "EditQuantity" then
		local ReturnedItem = LookUpItem(Key)
		if not ReturnedItem then return end
		ReturnedItem.ItemQuantity.Text = "x"..Quantity	
	elseif Action == "Remove" then
		local ReturnedItem = LookUpItem(Key)
		if not ReturnedItem then return end
		local Slot = ReturnedItem.Parent
		if ReturnedItem and Slot then
		Slot:SetAttribute("Occupied", false)
		Slot.ImageTransparency = 0
		ReturnedItem:Destroy()
		end
	end
end

local function LoadInventory(Inventory)
	if typeof(Inventory) ~= "table" then return end
	for Key, Item in pairs(Inventory) do
		if not Key or not Item.Quantity then continue end
		local ReturnEmptySlot = FindEmptySlot()
		if ReturnEmptySlot then
		ReturnEmptySlot:SetAttribute("Occupied", true)
		CreateItem(Key, Item.Quantity, ReturnEmptySlot)
		print(Key, ReturnEmptySlot)
		end
	end
end

UpdateInventoryUI.OnClientEvent:Connect(function(Inventory, LoadPlayerInventory, Quantity)
	if LoadPlayerInventory == "True" then
		LoadInventory(Inventory)
	else
		UpdateInventory(Inventory, LoadPlayerInventory, Quantity)
	end
end)

return Inventory

If yall do not know the fix or why this happens, I am open to other methods for assigning items to slots, but this was the best way I could come up with.

If the GridLayout’s SortOrder is set to LayoutOrder you can just set LayoutOrder on each button in the order that you want it, starting from 0.

button.LayoutOrder = 1

You can also set SortOrder to Name if you want to sort it that way but that might behave weird with regards to numbers.

try ZIndex or high LayoutOrder

Instance.ZIndex = 5
Instance.LayoutOrder = 5

so i can just create an init function and loop through and set?

Just set LayoutOrder on the image in the properties window? I dont think you’re dynamically creating the UI so that should work.

Yea it worked thanks! Also, if my game will always have 36 slots for players inventories, its fine to do it this way right? I know dynamically generating slots is a better way, but I just do not need to do that

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.