I know there are a lot of inventory resources/tutorials out there, but I thought I’d shoot my shot and put my own spin out there for the community. This video is a code explanation of my Hotbar & Backpack RPG-style inventory system, place file is available below
Features covered:
Hotbar & Backpack
Drag and drop across storages
Item stacking and splitting
Equipping/unequipping items on hotbar
Using items
Picking up & Dropping items
Update (07/27/24):
Someone mentioned if the ability to drag drop the item into the world at the cursor location could be added. I thought it was worthy of a follow-up tutorial so I made one, the place file has been updated to reflect.
I don’t like how complicated it is, but I have to say that it’s good, readable and well organized. This is very rare for a YT tutorial. Please continue making more tutorials like this and increasing the quality standard of Roblox scripting tutorials.
Wait until you see his slide tutorial, im half surprised people like this are still active, its crazy how information from a year or two ago can still be accurate but he decided to revamp it as well, this dude is a legend
the only thing i dislike about his tutorials are generally the use of alot of external modules (i didnt watch this fully yet) but they are normally made using his specific use case so its really whatever, you still learn logic and fundamentals so you can attempt to make it without
Yeah, fair enough, I don’t generally use promise and I don’t really use raycasthitbox for anything aside from… well hitboxes lol so I just personally dislike it a little bit, it doesnt matter that much tho
The pickup system is designed for proximity prompts and not the default roblox pickup behavior where you step on to equip tools, but ofc you can modify it to work that way.
If you have an item in the world, and you want to do the pickup via proximity prompt method, add the PICKUPABLE tag to it, this will add the PickupScript at runtime, which when you press E would place the item in the backpack. You would also create a StorableEntityProto for the item to define the shared storage-relevant data that will be consistent across instances of the item, such as the name of the item as it appears in the storage UI.
I simply did not add a click to select feature, but you can extend the UI logic to support this as well.
For drag and drop, the SlotUIComponent informs the parent storage of the ClickDown and ClickRelease events to begin and end the drag respectively. What you can do is override the StorageUIComponent’s OnNotify in HotbarUIComponent, define a clickTimeSpan like 0.2 secs, if the user clicks down and releases within that span then it’s a selection, after that span, you count it as a drag, you simply defer the handling of the ClickDown to the base class’ OnNotify (StorageUIComponent), which counts ClickDown as the beginning of a drag n drop, slot follows the mouse etc.
The buttons and the health pool are props, they do nothing.
I did not add this feature, but this is something you can definitely add. You map the 2D position of the slot to a 3D position in the camera’s viewport frame, use that as an origin of a raycast, casting in the direction the camera is facing down into the world. If the ray connects with the map, you can send a remote to the server with the position, server can do a RemoveEntity call on the storage, which would return the removed entity, and you simply parent that to workspace and position it as desired.
Excellent questions, and a couple of ideas that might warrant a follow-up!
