InventoryMaker (For PC only)
InventoryMaker is an open-source, frontend framework I created to help (initially, myself) Roblox devs create their inventory system. The design of this framework is based around the idea of containers
, which structures your inventory slots with UIGridLayout and allows you to separate your inventory into different spaces with its own UI and functionality, while still being connected as “one” inventory.
Get the rbxm file here (latest version):
InventoryMaker_v0.4.5.rbxm (48.7 KB)
Try the uncopylocked demo place:
InventoryMaker Demo - Roblox
The demo place is where I do all my developing for the module, so it’s guaranteed to have the latest version.
The first five items in the demo place do not have their own tools, so you won’t see any tool welded to your character when it is equipped. UI should work fine, though.
Features
- Dragging
- Swapping
- Stacking and Splitting
- Hotbar and Keybinds
- Context Menus
- Hover prompts
- Custom filters
- Search bar filtering
- Containers
InventoryMaker, to my knowledge, does not support any complex, custom UI animations, like a hotbar that shrinks to hide all of its slots and expands to show all of it, like a deck of cards or something. If it does, please let me know because that is awesome.
How It Works
InventoryMaker does NOT do any datastoring, does not manipulate your data, or do anything server related; it works only on the CLIENT, handling all the UI to make your inventory interactable. It requires you, as the developer, to define how you want your inventory to look and behave.
InventoryMaker is meant to work alongside your server code. It is not a standalone module that works out of the box right away to build your inventory. For example, in order to use the stacking and splitting feature, you’ll need to design the schema of your inventory to accomodate it.
Basic Example
local InventoryMaker = require(path_to_module)
--[[
first, you wanna initalize the module with a ScreenGui, which will contain ALL
of your UI for the inventory
]]
InventoryMaker.Initalize(someScreenGui)
--[[ Then you populate the inventory with data ]]
InventoryMaker.Populate(function()
-- this is where you can fetch the player's inventory data from the server
-- the data HAS to be an array though, since order matters
return {}, 25 -- I used an empty table bc no data; 25 is the total inventory capacity
end)
-- Now, we'll create a container with a capacity of 25 to hold all the items
local container = InventoryMaker.Container("c1", 25)
--[[
we'll just use the default UIGridLayout provided, but we still need to set the
ParentContainer, which is the gui object that will contain all the slots for
this container
]]
container:DefineLayout({ ParentContainer = someScrollingFrame })
-- then we define how we want to render our empty and filled slots for the container
container:DefineEmptySlot({
GuiTemplate = someGuiTemplateForEmptySlot,
RenderFunc = function(slotIndex, emptyGui: GuiObject, containerIndex)
-- assume there is a TextLabel named "Label" in this gui template
emptyGui.Label.Text = slotIndex
end
})
container:DefineFilledSlot({
GuiTemplate = someGuiTemplateForFilledSlot,
RenderFunc = function(slotIndex, item: InventoryMaker.ITEM_TYPE, filledGui: GuiObject, containerIndex)
-- filled slots are created using the GuiTemplate and are parented under our empty slot
--[[
setting the size and position, assuming our template did not have these
properties set beforehand when designing them
]]
filledGui.Size = UDim2.new(1, 0, 1, 0)
filledGui.Position = UDim2.new(0, 0, 0, 0)
-- assume there is a TextLabel named "Label" in this gui template
filledGui.Label.Text = item.ItemName -- assuming each item has a value called ItemName
end,
})
-- Finally, we can build our inventory with this container
InventoryMaker.Build({ container })
Documentation:
There are comments for most functions in the module to hopefully provide you with the documentation needed. The demo place also provides examples for a lot of the features. If wanted, I could create a new repo on my GitHub with documentation and all that, and accept contributions
- Yes
- No
0 voters
I finished writing this post at 6:03 am EST and now I can finally release this.