InventoryMaker - A module to help you create your own inventory system

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

Do you want a GitHub repo and documentation?
  • Yes
  • No

0 voters

I finished writing this post at 6:03 am EST and now I can finally release this.

10 Likes

Hi there.

It looks like a great module, but it seems that there are many features you are not showcasing in the demo place. I’d recommend trying to show everything the module is capable of in the demo place.

Also there are a few issues in the demo place:

The way this module works is like 10x better than how inventory works for quite a few of my games :sob: I’ll definitely be forking it myself because it’s nice to use, very nice job :+1:

2 Likes

The hotbar in the demo place should be centered now. I forgot to center it for all screens.

Yeah, those items don’t have any instances/models attached to them, so it’s supposed to be like that. I didn’t feel like making them lol. Maybe I’ll do it later. The mushrooms, leaves, and lantern should have their tools though.

I’ll definitely show every feature of the module in the demo place, though.

1 Like

Bro, I took on the task of editing satchel to allow for item stacking. Module is too annoying to decipher and too long, hard to get a grasp of with no context. Decided to make my own and after I finish it I see this post. If only bro :cry: anyway, awesome post doesn’t really teach anyone much. Maybe make a module breakdown for people who genuinely want to learn or something. Really cool overall

1 Like

Okay, so I went into this post thinking it was any other boring inventory system but dude - this is incredible. Seriously!!? I love how the UI design is sleek and smooth and it is highly evident that you spent effort in this resource. I’ll be using this!

Also, whats up with the armour? I’m excited for that update…!

1 Like

Nice

  1. how do you say it has stacking , if it is not built in ready to go? Or it is ready to go on the client side I see, but you have to have the server / tool know about the stacking…

  2. Why is it PC only? are working on support for other devices, phone , console etc…

  3. Why when you pick up a tool , it automatically makes it the tool slot it goes into enabled, even if you have a different slot already actively enabled?

  4. Is there a way of doing slot limiting , like if I want only 6 slots, and if I pick up 7th tool, it does NOT go into either of the hotbar or the overflow backpack? mean you can only have a max ever of 6 tools…

  5. If there a away of like above, having if your slots are full, it does not go into the backpack, it does not let you open up the back pack… ( I know we can script it so the ` key does not open up the backpack… but even with that, stuff will flow into the backpack… )…

  6. Can the drag and drop, also be updated, so you can drag a tool out of the hotbar, and DROP it into the game… like the backspace key , but with drag and drop?

  7. I do not see a tool bar tip, when you go / hover over the tool…

  8. If you really want this to be one of the best, add to the demo the server side stuff you said would be needed… , that would be epic…

  9. and anti exploit… with stacking and such…

Thanks

1 Like
  1. It would not be ideal to have stacking right out of the box according to my designs bc I can’t predict what type of structure each dev decides to have for their inventory. I could force a certain type of schema, but I want my module to be flexible and work with different types of data. For example, you’d usually want to be able to equip your items, have it be in your character’s hand and what not. Say you equip a stacked item, how would the welding of the item’s model look like and where would the model be stored? Should one model represent the entire stack or should all the models be stored in the stack? So yeah, it’s ready on the client side, but it requires the dev to handle their server side code so that it can integrate with InventoryMaker.

  2. I only designed the module with PC in mind. I don’t think I’ll be working on support for other devices since I am not at all familiar with console and don’t play enough Roblox on mobile to get a feel of how I’d like the interactions to be. Who knows…

  3. I could make this a feature that can be toggled if it’s actually annoying

  4. You can set the inventory capacity to the desired max limit, so that when you call AddItem(), nothing will happen. I’m not sure if this is what you mean, tho

  5. im not sure what you’re aksing

  6. That sounds really cool. I’ll consider adding it after I finish up documentation.

  7. Yeah, the hover prompt for toolbar is disabled in the demo. It can toggled for the hotbar container though if you go into studio and set the HOTBAR_UNTOGGLED_HOVER flag

  8. The server side stuff is in the demo. It’s really a bare bones server tho. In the demo, I use one tool to represent all items in a stack and only clone when necessary.

  9. anti-exploit should be handled by the server, which is up to the developer to do. The server should be the main authority for checking the player’s inventory. This module works on the client, so a client-side anti-exploit is pretty much useless

Ty man.

Yeah, there’s no real armor, or sword for that matter. It’s just showcasing the UI interactions. The UI design in the demo is just a quick design I created. But you can use any design to make your inventory look the way you want.

For 3) that would be nice if it is togglable… yes it would be annoying, say you are blasting away with a gun enabled and pick up another tool , you would still want to be blasting away with the gun…

For 5), to open the backpack on PC , you can use this key

`

can that be disabled, so that it does not open the backpack…

5b) if your answer to 4 and being able to do slot limiting to a max # AND if you try to pick up a next item when it is full , it will not do it. then yes that is good. A lot of other custom hotbar systems that have slot limiting, still allow you to pick up more, which then go into the backpack… I am basically asking if the backpack can be turn off and not open, and nothing ever goes into it…

regarding 2) other devices… have it later on work on a phone would be great, if you ever feel like exploring it, or maybe someone here will do it and share… esp since the % of players using phones to play is so great , when compared to other devices… or at least that is what I thought I saw from Roblox stats, and other people…

Thanks for sharing this… I will check it out some more…

  1. Yeah, I’ll definitely consider it.

  2. Heard

5b. The keybind for opening the backpack UI is actually code seperate from the module. InventoryMaker doesn’t do any of that kind of stuff, like showing your backpack or showing character equipment when a key is pressed. That’s handled by the dev.

You don’t have to have a backpack. If you only want the hotbar, all you need to do is create the one hotbar container and define how many slots you want. So, when the max size is reached, no more items are added at all. Basically the hotbar will be your entire inventory.

1 Like

Would there be a function where slots can only allow a specific type of tool? Like armour?

As of right now, you can decide whether a container only allows a specific type of item to be moved into it by dragging with .DefineSwitchValidation().

But having a container only allow a specific type of item when a new item is added with AddItem() has not been added yet. An update is in the works.

1 Like

Thank you! Will there also be a function where if a tool was added in such slot an event would fire? Helpful for equipping logic or health change or something…

Yes, I will be implementing something like that.

1 Like