GridPack - Create Grid/Tetris Style Inventories

GridPack

An easy way to create grid/tetris style inventories.

📚 GitHub Repository | 📜 Documentation | 🐶 Wally | 📦 Roblox Releases


Why?

About 2.5 years ago I posted a showcase of a tetris-style inventory that I had made. Ever since I’ve gotten countless requests to give out the source code to it. So I figured it would be best to create an open source library for everyone to edit and use for free!

Pre-release statement

This library is in it’s alpha stage and should not yet be used for production! Updates could introduce breaking changes and there may be missing features.


Features (as of v0.2.0-alpha)

Item Dragging in Grids

Example

RobloxStudioBeta_xKU9G3sgtt

Transfering Items Between Inventories (TransferLinks)

Example

RobloxStudioBeta_zNZe0BlSp6

If you want an inventory to have multiple grids or simply just want to connect two inventories together. Then TransferLinks will be your friend!

Item Rotation

Example

RobloxStudioBeta_sJPuDXzo2t

Single Item Slots (SingleSlots)

Example

RobloxStudioBeta_cFQ7Jmdsc1

These slots only allow one item at a time, regardless of size. They can be used for equipment slots like for example; your primary weapon.


Client-side Only

GridPack by itself doesn’t handle the Server-side, which means that your items won’t be accessable on the server and will not automatically save. Although this may change in the future, but it’s not set in stone yet! It is still possible to communicate the items to the server, see the documentation for more info.

Contribution

You are free to use the source in any way you want. And please if you find any bugs then feel free to open an issue or create a pull request if you’ve fixed the issue yourself.

98 Likes

Seems pretty cool, looking forward to the updates.

6 Likes

This looks really helpful! I was just in need of such a system for my game and this literally has every feature I was looking for. Thanks

4 Likes

Very awesome ive been using a heavily modified version of your older inventory in my dungeon dwellers game cant wait to update to this one.

4 Likes

This is really neat, thanks for this, I noticed an issue with the documentation missing the potentialRotation arg in the Server Communication portion of adding the middleware:

MoveMiddleware = function(movedItem, newGridPosition, lastItemManager, newItemManager)

should be

MoveMiddleware = function(movedItem, newGridPosition, newRotation, lastItemManager, newItemManager)
2 Likes

Thanks for reporting! Gonna fix this when I get home!

2 Likes

Hey,
looks awesome. I’ve been looking though the Code, but couldn’t find, where the drag-function is defined.
I am working on a similar inventory-system, but not in your Tetris-style and I am struggling with enabling a Drag-Functionality from the Players Inventory to the Players hotbar.

How exactly did you manage to solve it?

2 Likes

The dragging code is somewhat split among all of the classes but the “core” controller of it all is in the Item class. The code shares some similarities with tycoon sandbox placement modules, so you could also check those out.

1 Like

I’ve now fixed some problems with the documentation, and also added a new customizing guide for customizing ItemManagers and Items.

Thank you, this will be really helpful for my game! One question however, how do I change the item’s image?

3 Likes

All items have a read-only property called .ItemElement which is set to the item’s GuiObject, so if you are using the default item asset you would do <YOUR_ITEM>.ItemElement.Image.Image = "rbxassetid://<YOUR_ID>" to change the image.

2 Likes

Thank you! I’ve been testing it out and I’ve nearly got everything I need working for my inventory system, apart from one thing, is there any sort of function or way I can automatically give the item a position that isn’t colliding with anything else? Whenever my item is picked up and it’s added to the inventory, if there’s a collision with where it’s meant to be put, it gives out the error for that reason and doesn’t spawn and I’m not really sure on how to find a way around this. Any help would be appreciated, thanks!

2 Likes

Yes! There is actually a function for just this in grids: Grid | GridPack

1 Like

I’m not sure if I’m using the function correctly or if there may be a bug:
This is my code:

events.InventorySlot.OnClientEvent:Connect(function(infoTable)
	local item = GridPack.createItem({
		Position = Vector2.new(0, 0),
		Size = infoTable.SlotSize,
		Assets = {
			Item = nil,
		},

		Metadata = {
		},
	})
	item.Position = grid:GetNextFreePositionForItem(item)
	grid:AddItem(item)
end)

In the output it gives the error:

ReplicatedStorage.Packages.GridPack.ItemManager.Grid:244: attempt to perform arithmetic (mod) on table and number

Any help would be appreciated again, thanks!

2 Likes

Yes, sorry! This was a bug on my part, get the new fixed release here: Release Release v0.2.1-alpha · Frexsim/grid-pack · GitHub

1 Like

Sorry if I keep bringing up issues, but I believe I found another issue. Even when there’s enough space but at a different angle, the item doesn’t rotate and an error is given in the output.

ReplicatedStorage.Packages.GridPack.ItemManager.Grid:243: invalid argument #1 (Vector2 expected, got nil)

1 Like

I don’t have time to look into this issue much right now, so please move your issue to the github: Issues · Frexsim/grid-pack · GitHub so that I and others can track it easily.

From what I’ve seen so far it seems that you have an invalid position somewhere. But I would need to see your code first.

1 Like

it could be really cool if you made this tool-based with equipping too, so it would basically replace he default backpack.

There is a mistake in explaining

Forgot (,)
in

Visible = true -- If the grid is visible, changes the containers visible property. Also disables item interaction on all items inside.

	Assets = {
		Slot = nil -- Add your own GuiObject here to customize the slots in the grid.
	}

image

1 Like

Do you have a rough release date for the full version yet? Also is there a list of what you plan to add for v1, such as mobile support?

1 Like