Backpack & Inventory

You will be making a GUI- a Graphical User Interface. This is how you can manage an inventory/backpack.

Inside StarterGui, make a ScreenGui and name it BackpackGui. Inside BackpackGui, make a BoolValue named Open and make a Frame. Stretch the frame to fill the middle of the screen.

Backpack Interface

Create a Textbox inside the Frame and call it BackpackTitle. Stretch it from the left to almost the right (you are making a close button next.) In the “Text” field of the Text area of the Text box, you can insert the name Backpack and also increase the Text Size. You can also click text directly to edit it. It automatically deletes it. If that bothers you, uncheck ClearTextOnFocus in it’s properties.

Add a TextButton and place it to the right of your TextBox. Make its text an X, color it red and increase the size.

Add a ScrollingFrame and name it “Handler”. Have it take up about two thirds on the left side. Add another Frame which will be the info about items. Inside that Frame, make a TextButton and name it “Equip”.

Inside the same Frame, add an ImageLabel and a TextBox and name it ItemName.

Rearrange and move them around how you wish on the UI. Change Font size so it’s easy to read and make the Equip TextButton a shade of green.

Make 3 ObjectValues in the Handler named Equipped, Selected, and Location. Also create a UIGridLayout.

Creating the First Script

First, create a LocalScript under the first Frame. Then Create an ImageButton in the Handler (you can’t make one inside a LocalScript) then move it under the Local Script.

Name ImageButton “Sample”

Open the LocalScript. Instead of typing this one, you can copy and paste this code in. Please read the green parts so you understand what it is doing!


Placing the Second Script

Make a LocalScript in Equip and Copy/Paste this code into it.


Placing the Third Script

Place a Script NOT A LOCALSCRIPT inside of Close. Here’s a short answer on what the difference is.


Just to check, open all your items to make sure it looks like this-

You’re almost done!

ALSO, don’t be like me and misspell Equipped. It has two Ps! (It took me half an hour to find that error.)

Adding the Toggle Button

Close up everything in the top Fram and add a TextButton. Name it BackpackToggle and put in the text “Backpack.” Position it to the left center.

In the BackpackToggle, create a Script (not LocalScript). Add in this code-


Small fix *** change -401 in the script to -601.

Move the UI up

Go to the first Frame and change the starting position so that it is way above the screen. The toggle Script is what moves it up and down.

Add weapons!

Find items and select yes when it asks.

Launch the game and try it out. Upload a picture of you holding the item you equipped.