Tetris Based Inventory System

How would I achieve this sort of system? The only thing I’m really stuck on is how you determine the positions of these items. Any clue to achieve this?
image

I do have the slots named based on their locations
image

I would probably make a table with number values for the grid layout like such
{ 11, 12, 13, 14, 15, 16, 17 } and use that to mark which ones are full and not full. You can use string functions to separate the numbers, and then use that to access the right frame. You can check which one is closest open spot with math, and then simply fill it in. I would probably use the table like this, which slot - item pairs

{ [11] = “Apple” }

You could also use this kind of table in a module script.

kindof late but how would things like positioning works

1 Like

Assuming Your items have uuids, you might just be able to have a table with n children where n is the amount of rows with slots. And then in the itemdata (im assuming when you add an item to the player’s inventory it references the itemdata for that item) you could have a span variable that is a table with an xSize and ySize value.

Psuedo code:


local InventoryRows = {
  ...
   -- 10 rows of 10
}

-- row example: {[1]: {value = nil}, [2]: {value = nil}, [3]: {value = nil}, [4]: {value = nil}}

local ItemData = {
   ['Apple'] = {
    Span = { x = 1, y = 1  }
  }
  ...
}

local MyItem = {
   Source = 'Apple',
   UUID = '5f8b3070-7cc1-4d04-849d-057bf4e3e3b9',
   ...
}

then you could probably just loop through each row and each slot until you find an open slot, then just continue along each row for the y and x span, and if you dont hit a slot that has a non nil value, then you can place the item, and then you’d render the items icon above those slots.

Should be a 2D array, from the second image it’s 9x7 (9 is X and 7 is Y)

to axis an item you do inventory[x][y].Item, why .Item and not just set it as the only value? That’ll help add support for larger items, just keep reading.
An inventory is made up of an array of rows, each row is just an array of columns (making this a 2D array), each column is an array of Cells. Simple type definitions for what I’ve said above:

type Cell = {
	Item: Instance, -- Or whatever you are going to store (eg. custom class).
	Size: Vector2, -- Vector2 for size cus it's just easier to work with.
}
type Column = { Cell }
type Row = { Column }
type Grid = { Row }

So for example to fill in the grid (aka inventory), you do:

local inventory: Grid = {} -- Defined type for intellisense (simply, code suggestions)!

for x = 1, 9 do
	inventory[x] = {}

	for y = 1, 7 do
		inventory[x][y] = {
			Item = ..., -- Whatever the tool is
			Size = Vector2.one, -- Multiply to make bigger items like 2x2 or use `.new`!
		}
	end
end

Then you can manipulate it how you want. This is a simple demonstration of how this will be so it’ll surely need edits to fit your needs, shouldn’t be any major edits though.