An easy way to create grid-style inventories on Roblox.
Head to the releases page and download the latest gridpack.rbxm file. Then insert the downloaded file in Roblox Studio by right clicking on ReplicatedStorage and choosing "Insert from File...".
Here are some small guides to help you get started! Start by creating a LocalScript and follow along:
To create a grid your first grid item manager you will need to use the .createGrid() method in GridPack.
Here is an example:
local GridPack = require(game:GetService("ReplicatedStorage").Packages.GridPack)
local screenGui = Instance.new("ScreenGui")
screenGui.Name = "GridPack"
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling -- ZIndexBehavior has to be set to Sibling since CanvasGroups don't work with Global and GridPack heavily relies on CanvasGroups.
screenGui.ResetOnSpawn = false
screenGui.Parent = game:GetService("Players").LocalPlayer.PlayerGui
local grid = GridPack.createGrid({
Parent = screenGui, -- Parent of the grid container
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.
}
GridSize = Vector2.new(8, 15), -- How many slots the grid has on the X and Y axes.
SlotAspectRatio = 1, -- Aspect ratio of one slot in the grid, helps with different resolutions if you're using scale instead of offset.
AnchorPoint = Vector2.new(0, 0.5), -- Anchor point of the grid container
Position = UDim2.new(0, 20, 0.5, 0), -- Position of the grid container
Size = UDim2.fromScale(0.25, 0.5), -- Size of the grid container
Metadata = {
-- Here you are free to store any values you want.
}
})You should now have a grid on your screen once you join the game!
Adding items to grids is really easy. But before adding you will have to create a new item. This is done in a simmilar way as creating a grid, but instead you use the .createItem() method.
Here is an example showing an item being created and added to the grid we just created:
-- Continuing from last example.
local item = GridPack.createItem({
Position = Vector2.new(0, 0), -- Position in a grid.
Size = Vector.new(2, 3), -- Size in a grid.
Assets = {
Item = nil, -- Add a custom GuiObject here to change the item's gui element.
},
Metadata = {
-- Here you are free to store any values you want.
},
})
grid:AddItem(item) -- Add the item to the grid.The item should now be added to the grid and should also be draggable!
To connect two item managers together you use a TransferLink. Both Grids and SingleSlots can be connected to eachother and Grid to SingleSlot. This is done like:
-- Continuing from last example.
local transferGrid = GridPack.createGrid({
Parent = screenGui,
Visible = true
GridSize = Vector2.new(8, 15),
SlotAspectRatio = 1,
AnchorPoint = Vector2.new(1, 0.5),
Position = UDim2.new(1, -20, 0.5, 0),
Size = UDim2.fromScale(0.25, 0.5),
})
local transferLink = GridPack.createTransferLink({}) -- Create TransferLink
grid:ConnectTransferLink(transferLink) -- Connect TransferLink to our first grid.
transferGrid:ConnectTransferLink(transferLink) -- Connect the TransferLink to our new grid.You will now be able to drag an item over to the other inventory and it should adjust to the new inventory.
With SingleSlots you are able to drag any item into it, disreguarding the size and position of the item. This can be used as an equip slot where you have your primary weapon, tool or armor stored.
The SingleSlot setup is a little different than the Grid setup. Here is and example:
local GridPack = require(game:GetService("ReplicatedStorage").Packages.GridPack)
local screenGui = Instance.new("ScreenGui")
screenGui.Name = "GridPack"
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
screenGui.ResetOnSpawn = false
screenGui.Parent = game:GetService("Players").LocalPlayer.PlayerGui
local singleSlot = GridPack.createSingleSlot({
Parent = screenGui, -- Parent of the slot container
Visible = true -- If the slot is visible, changes the containers visible property. Also disables item interaction on the item inside.
Assets = {
Slot = nil -- Add your own GuiObject here to customize the slot.
}
AnchorPoint = Vector2.new(0, 0.5), -- Anchor point of the slot container
Position = UDim2.new(0, 20, 0.5, 0), -- Position of the slot container
Size = UDim2.fromScale(0.25, 0.5), -- Size of the slot container
Metadata = {
-- Here you are free to store any values you want.
}
})Since GridPack doesn't handle the serverside for you, items come with the .MoveMiddleware property which is run before the item actually gets moved on the client.
And you can use this property to validate your item movements by return true or false is the movement is valid.
Item collision is still checked before .MoveMiddleware but it's also good to check for collision on the server to prevent cheating or client desync.
Here's and example of how client to server communication would work:
local item = GridPack.createItem({
-- Other Item properties
MoveMiddleware = function(movedItem, newGridPosition, lastItemManager, newItemManager)
--[[
movedItem: This Item
newGridPosition: This Item's new position in a Grid. (Doesn't apply with SingleSlots)
lastItemManager: The ItemManager that the Item was in before it got moved.
newItemManager: The new ItemManager the item was moved to. (If there is one)
]]
if newItemManager then
-- Ask server to validate the Item movement between ItemManagers and return the result to the Item
return ReplicatedStorage.Remotes.MoveItemAcrossItemManager:InvokeServer()
else
-- Ask server to validate the Item movement between positions and return the result to the Item
return ReplicatedStorage.Remotes.MoveItem:InvokeServer()
end
-- If the result if false then the Item will move back to it's last position.
end,
Metadata = {
-- Tip: Here you can any values you need for MoveMiddleware!
}
-- Other Item properties
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent