How would you make a custom backpack Gui from scratch?

I’m trying to make a custom inventory, but I don’t know where to start. I have looked at other posts and they have not helped me so far?
Example of what it would look like:

1 Like

Custom GUis can be tedious, you need to detect inputs and make-around with the CoreGui functionality, gui placements especially with positions. But it wouldn’t too be hard if you know how GUIs work.

1 Like

Theres 2 steps:
1 Make the gui

2 Make the gui functional (the HARD part)

To make the gui you should use GridLayout and add 9 frames (if u want the inventory slot from the image)

Now to make it functional we would have to make a script with loop checking if something has been added onto the backpack and if something was added we would add a text button to the slot.

Obviously its more complex but you should start from there
Sorry for grammar issues im on my phone

1 Like

Simple, make a frame the size of the toolbar, add a UiListLayout for the amount of items you want to have.
Then in a script, everytime your backpack obtains a new item, make it a slot inside one of the frame inside the UiListLayout. (You can use ViewPortFrames to make images easier to appear).
Then in a script, assign every number (1-2-3-4-5-6-7-8-9-0) and every tool in your backpack to frames on your toolbar. Then when the player presses a key that is linked to a tool, simply use Humanoid:EquipTool(tool).

Tbh the hard part is to make the GUI look pleasing and make empty slots work. if slots are empty and the player tries to select them, simply use Humanoid:UnequipAll()

2 Likes

You can link tools to frames by adding an ObjectValue inside the frame and put the value to the tool

May I ask a question? So in my game players have 4 weapons (everyone does). I want to use these as the gui and whatnot. So you’re saying use numbers and when that number is inputted it’ll equip right? Well is there a way to make it mobile compatible?

Yes, simply add an empty textbutton over every frame for every weapon and link it just like the numbers pressed with button.MouseButton1Down

1 Like

To add to what has been said before, to make things draggable, this is a vary useful tool: Simple Module For Creating Draggable GUI Elements
I used it to make a full custom gui where you drag things to move them around. With a combination of for loops and vec2 magnitude funcitons, you can make it snap to a udim2 point