Revision Difference
Grid-Based_Inventory_System#527908
<cat>Dev.UI</cat>
## Prerequesites
* Lua knowledge.
* An item system. Each item must have two functions:
* ITEM:GetIcon() -- Must return a Material() object.
* ITEM:GetSize() -- Must return a width and height in cells.
A system like this can be found at the <page>Object Oriented Lua</page> tutorial.
Note that this tutorial only discusses clientside handling of an inventory.
I'm too lazy for serverside networking...
## Let's Get Started
So every item has a position in the backpack, and every item has a size in that backpack.
To start, you'll need a table.
We'll call it ply.Inv
```
local ply = LocalPlayer()
ply.Inv = {}
```
ply.Inv will contain both the backpack AND the information about their inventory.
Let's create a few subtables and values in ply.Inv
```
ply.Inv.Backpack = {} --The actual backpack.
ply.Inv.Equipped = {} --This is the equipped items, assuming it's going to be Diablo-Style.
ply.Inv.Weight = 0
```
(You can create whatever values you will need for your system. Weight might not be necessary, etc.)
Next, we're going to make the backpack table take the form of a 2-Dimensional table, with rows being the first key and each row containing columns. This would look something like:
```
for i=1,8 do --8 being the width of the backpack.
ply.Inv.Backpack[i] = {}
end
for k,v in pairs(ply.Inv.Backpack)do
for i=1,4 do --4 being the height of the backpack.
ply.Inv.Backpack[k][i] = false --False is a placeholder here. We'll overwrite that later.
end
end
```
This will create an 8-wide, 4-tall 2D table.
So to get the item at coordinate 2,4 you would do ply.Inv.Backpack[2][4]
Simple enough.
But it's always simpler with a convenience function:
```
local plymeta = FindMetaTable("Player")
function plymeta:GetInvItem(x,y)
return self.Inv.Backpack[x][y]
end
```
Ok, now to explain the basis of the system.
The idea is this:
We're going to create a new vgui element. This element will be a single square on the grid. With this we can have them shine and whatnot. When we finish designing this element we can replace the false's we set earlier.
When we put an item in a place on the grid, we get the size of the item (width and height). We then tell all the squares in that area that there is now an item on them. We aren't going to root the item to all the squares; just to the one which is in the top left of the item. The one which tells all the other squares. This will be the item's parent square.
So let's make these grid elements.
```
local PANEL = {}
AccessorFunc(PANEL, "m_ItemPanel", "ItemPanel")
AccessorFunc(PANEL, "m_Color", "Color")
function PANEL:Init()
self.m_Coords = {x=0,y=0}
self:SetSize(30,30)
self:SetColor(Color(200,200,200))
self:SetItemPanel(false)
self:Receiver("invitem", function(pnl, item, drop, i, x, y) --Drag-drop functionality
if drop then
item = item[1]
local x1,y1 = pnl:GetPos()
local x2,y2 = item:GetPos()
if math.Dist(x1,y1,x2,y2) <= 30 then --Find the top left slot.
if not pnl:GetItemPanel() then
local itm = item:GetItem()
local x,y = pnl:GetCoords()
local itmw, itmh = itm:GetSize() --GetSize needs to be a function in your items system.
local full = false
for i1=x, (x+itmw)-1 do
if full then break end
for i2=y, (y+itmh)-1 do
if LocalPlayer():GetInvItem(i1,i2):GetItemPanel() then --check if the panels in the area are full.
full = true
break
end
end
end
if not full then --If none of them are full then
for i1=x, (x+itmw)-1 do
for i2=y, (y+itmh)-1 do
LocalPlayer():GetInvItem(i1,i2):SetItemPanel(item) -- Tell all the things below it that they are now full of this item.
end
end
item:SetRoot(pnl) --like a parent, but not a parent.
item:SetPos(pnl:GetPos()) --move the item.
end
end
end
else
--Something about coloring of hovered slots.
end
end, {})
end
function PANEL:SetCoords(x,y)
self.m_Coords.x = x
self.m_Coords.y = y
end
function PANEL:GetCoords()
return self.m_Coords.x, self.m_Coords.y
end
local col
function PANEL:Paint(w,h)
draw.NoTexture()
col = self:GetColor()
surface.SetDrawColor(col.r,col.g,col.b,255)
surface.DrawRect(0,0,w-2,h-2) --main square
surface.SetDrawColor(70,70,70,255)
surface.DrawRect(w-2,0,h,2) --borders
surface.DrawRect(0,h-2,2,w) -- ^
end
vgui.Register("InvSlot", PANEL, "DPanel")
```
Done. Now we add the whole functionality.
We have to assume that the item system involves unique items, not just arbitrary class id's, to identify each item.
The best way to do this would be to link each item with an entity index. This would work if the items are all entities at some point.
When you pick an item up it removes the entity version (saving its ent index) and when you drop it, it creates a new entity of the same kind with the same info.
This is all just concept. I'm not writing an item system in this tutorial.
So we would start by creating a slot panel for each inventory slot.
```
for k,v in pairs(ply.Inv.Backpack)do
for i=1,4 do --4 being the height of the backpack.
ply.Inv.Backpack[k][i] = vgui.Create("InvSlot")
ply.Inv.Backpack[k][i]:SetPos(k*30,i*30) --The icon is 30x30.
ply.Inv.Backpack[k][i]:SetCoords(k,i)
end
end
```
Icons. Icon's everywhere.
Next, let's make another vgui element. This will `represent` an item in your backpack.
```
local PANEL = {}
AccessorFunc(PANEL, "m_Item", "Item")
AccessorFunc(PANEL, "m_Root", "Root")
function PANEL:Init()
self:SetSize(30,30)
self:SetItem(false) --false means no item.
self:SetColor(Color(100,100,100))
self:SetDroppable("invitem")
end
function PANEL:PaintOver(w,h)
draw.NoTexture()
if self:GetItem() then
surface.SetMaterial(self:GetItem():GetIcon()) --Your items must have a GetIcon method.
surface.DrawTexturedRect(0,0,w,h)
end
end
local col
function PANEL:Paint(w,h)
draw.NoTexture()
col = self:GetColor()
surface.SetDrawColor(col.r,col.g,col.b,180)
surface.DrawRect(0,0,w,h) --background square
end
vgui.Register("InvItem", PANEL, "DPanel")
```
Ok, so now we have the actual items.
Remember we're only discussing the basics of a backpack system. You can add more if you want later.
Next, let's create a function which finds out whether there is room in the backpack for a given item.
If there is room it will return the panel to root to. If not then it will return false.
```
function IsRoomFor(item) --note that item must be an actual item, not a InvItem panel.
for k,v in ipairs(LocalPlayer().Inv.Backpack) do
for k2, pnl in ipairs(v)do
for k2, pnl in ipairs(LocalPlayer().Inv.Backpack[k]) do
if not pnl:GetItemPanel() then
local x,y = pnl:GetCoords()
local itmw, itmh = item:GetSize() --GetSize needs to be a function in your items system.
local full = false
for i1=x, (x+itmw)-1 do
if full then break end
for i2=y, (y+itmh)-1 do
if LocalPlayer():GetInvItem(i1,i2):GetItemPanel() then --check if the panels in the area are full.
full = true
break
end
end
end
if full then
return pnl --If there's room then return the open panel.
end
end
end
end
return false --if not, then return false.
end
```
Most of this code is copied from the drag-n-drop functionality from earlier.
Next, let's make items get picked up.
```
function PickupItem(item)
local place = IsRoomFor(item)
if place then
local itm = vgui.Create("InvItem") --create a new item panel.
itm:SetItem(item)
itm:SetRoot(place)
itm:SetPos(place:GetPos())
local x,y = place:GetCoords()
local itmw, itmh = item:GetSize() --GetSize needs to be a function in your items system.
for i1=x, (x+itmw)-1 do
for i2=y, (y+itmh)-1 do
LocalPlayer():GetInvItem(i1,i2):SetItemPanel(itm) -- Tell all the things below it that they are now full of this item.
end
end
return true --successfully picked item up.
else
return false --no room.
end
end
```
## Final Product
```
local ply = LocalPlayer()
ply.Inv = {}
ply.Inv.Backpack = {} --The actual backpack.
ply.Inv.Equipped = {} --This is the equipped items, assuming it's going to be Diablo-Style.
ply.Inv.Weight = 0
for i=1,8 do --8 being the width of the backpack.
ply.Inv.Backpack[i] = {}
end
for k,v in pairs(ply.Inv.Backpack)do
for i=1,4 do --4 being the height of the backpack.
ply.Inv.Backpack[k][i] = false --False is a placeholder here. We'll overwrite that later.
end
end
local plymeta = FindMetaTable("Player")
function plymeta:GetInvItem(x,y)
return self.Inv.Backpack[x][y]
end
local PANEL = {}
AccessorFunc(PANEL, "m_ItemPanel", "ItemPanel")
AccessorFunc(PANEL, "m_Color", "Color")
function PANEL:Init()
self.m_Coords = {x=0,y=0}
self:SetSize(30,30)
self:SetColor(Color(200,200,200))
self:SetItemPanel(false)
self:Receiver("invitem", function(pnl, item, drop, i, x, y) --Drag-drop
if drop then
item = item[1]
local x1,y1 = pnl:GetPos()
local x2,y2 = item:GetPos()
if math.Dist(x1,y1,x2,y2) <= 30 then --Find the top left slot.
if not pnl:GetItemPanel() then
local itm = item:GetItem()
local x,y = pnl:GetCoords()
local itmw, itmh = itm:GetSize() --GetSize needs to be a function in your items system.
local full = false
for i1=x, (x+itmw)-1 do
if full then break end
for i2=y, (y+itmh)-1 do
if LocalPlayer():GetInvItem(i1,i2):GetItemPanel() then --check if the panels in the area are full.
full = true
break
end
end
end
if not full then --If none of them are full then
for i1=x, (x+itmw)-1 do
for i2=y, (y+itmh)-1 do
LocalPlayer():GetInvItem(i1,i2):SetItemPanel(item) -- Tell all the things below it that they are now full of this item.
end
end
item:SetRoot(pnl) --like a parent, but not a parent.
item:SetPos(pnl:GetPos()) --move the item.
end
end
end
else
--Something about coloring of hovered slots.
end
end, {})
end
function PANEL:SetCoords(x,y)
self.m_Coords.x = x
self.m_Coords.y = y
end
function PANEL:GetCoords()
return self.m_Coords.x, self.m_Coords.y
end
local col
function PANEL:Paint(w,h)
draw.NoTexture()
col = self:GetColor()
surface.SetDrawColor(col.r,col.g,col.b,255)
surface.DrawRect(0,0,w-2,h-2) --main square
surface.SetDrawColor(70,70,70,255)
surface.DrawRect(w-2,0,2,h) --borders
surface.DrawRect(0,h-2,w,2) -- ^
end
vgui.Register("InvSlot", PANEL, "DPanel")
local dfram = vgui.Create("DFrame")
dfram:SetSize(ScrW()/2, ScrH()/2)
dfram:Center()
dfram:MakePopup()
for k,v in pairs(ply.Inv.Backpack)do
for i=1,4 do --4 being the height of the backpack.
ply.Inv.Backpack[k][i] = vgui.Create("InvSlot", dfram)
ply.Inv.Backpack[k][i]:SetPos((k*30)+100,(i*30)+100) --The icon is 30x30.
ply.Inv.Backpack[k][i]:SetCoords(k,i)
end
end
PANEL = {}
AccessorFunc(PANEL, "m_Item", "Item")
AccessorFunc(PANEL, "m_Root", "Root")
function PANEL:Init()
self:SetSize(30,30)
self:SetItem(false) --false means no item.
self:SetColor(Color(100,100,100))
self:SetDroppable("invitem")
end
function PANEL:PaintOver(w,h)
draw.NoTexture()
if self:GetItem() then
surface.SetMaterial(self:GetItem():GetIcon()) --Your items must have a :GetIcon function.
surface.DrawTexturedRect(0,0,w,h)
end
end
local col
function PANEL:Paint(w,h)
draw.NoTexture()
col = self:GetColor()
surface.SetDrawColor(col.r,col.g,col.b,180)
surface.DrawRect(0,0,w,h) --background square
end
vgui.Register("InvItem", PANEL, "DPanel")
function IsRoomFor(item) --note that item must be an actual item, not a InvItem panel.
for k,v in ipairs(LocalPlayer().Inv.Backpack) do
for k2, pnl in ipairs(v) do
for k2, pnl in ipairs(LocalPlayer().Inv.Backpack[k]) do
if not pnl:GetItemPanel() then
local x,y = pnl:GetCoords()
local itmw, itmh = item:GetSize() --GetSize needs to be a function in your items system.
local full = false
for i1=x, (x+itmw)-1 do
if full then break end
for i2=y, (y+itmh)-1 do
if LocalPlayer():GetInvItem(i1,i2):GetItemPanel() then --check if the panels in the area are full.
full = true
break
end
end
end
if full then
return pnl --If there's room then return the open panel.
end
end
end
end
return false --if not, then return false.
end
function PickupItem(item)
local place = IsRoomFor(item)
if place then
local itm = vgui.Create("InvItem") --create a new item panel.
itm:SetItem(item)
itm:SetRoot(place)
itm:SetPos(place:GetPos())
local x,y = place:GetCoords()
local itmw, itmh = item:GetSize() --GetSize needs to be a function in your items system.
for i1=x, (x+itmw)-1 do
for i2=y, (y+itmh)-1 do
LocalPlayer():GetInvItem(i1,i2):SetItemPanel(itm) -- Tell all the things below it that they are now full of this item.
end
end
return true --successfully picked item up.
else
return false --no room.
end
end
```
## Test Results
<image src="grid_example.jpg"/>
Garry's Mod
Rust
Steamworks
Wiki Help
S&box