Hello, all! I wanted to make this short, but hopefuly informative, tutorial on how to edit the CoreGui Backpack. I am hoping that this will be useful to a few people. I know I spent quite a bit struggling since I couldn’t find many tutorials out there. I will be going over how to edit the design and adding custom hotkeys for the hotbar. Here is a short video of the custom hotbar I was able to create:
https://streamable.com/4w141w
Any less, let me start explaining.
Step 1: Downloading A Backpack Template
My favourite and the one I have experimented the most with is thebrickplanetboy’s 2015 backpack module. However, there are others such as ToldFable’s open sourced module (Open Sourced Inventory/Backpack system). For the purpose of my tutorial, I am using thebrickplanetboy’s since I enjoy his more.
Step 2: Importing and Disabling CoreGui Backpack
Once you have imported the backpack module, go ahead and move the module to StarterPlayerScript. Once you have done so, add this line of code to the “BackpackLoader” module.
game:GetService('StarterGui'):SetCoreGuiEnabled(Enum.CoreGuiType.Backpack,false) -- This will disable the CoreGui's backpack UI.
Step 3: Getting That UI Design
Once you have designed your UI, you’re going to need to be able to convert its properties to a script. You will have to do this manually, at least that is to my knowledge, however there is a slight trick.
Lets first go over how to actually edit the design. The way you’re going to edit the design is by opening up BackpackScript under the loader. The way I found best was by editting the frames and such at the bottom of the script, right before the return module.
For example, here is what I added right above the return call,
InventoryFrame:FindFirstChild("Search"):Destroy()
Instance.new("UICorner", InventoryFrame)
local uiStroke = Instance.new("UIStroke", InventoryFrame)
uiStroke.Color = Color3.fromRGB(255,255,255)
ScrollingFrame.Position = UDim2.new(0,0,0,5)
return BackpackScript
Now, manually entering all this information will take a while if you have a big UI. However, this is where the trick comes in use. Here is what I recommend, I recommend that you join the game and copy the Backpack UI. Once you have copied the backpack ui, go ahead and paste it into the StarterGui. Once done, just simply edit it. I recommend getting the Gui to Lua by frstee. Once you do so, you can use the plugin by clicking on your GUI and clicking “Convert.”
After you convert the GUI to a script, go ahead and open up the script and copy all the properties and paste them into the module as I did previously. This theoretically should work. The only thing that probably won’t is the highlight.
If you want to edit the highlight, the start is located at line 484(ish). Go ahead and just edit it there. Tada, hopefully you have the custom UI done now.
Step 4: Adding Custom Hotkeys
This is totally optional, for my game I had needed three extra keys (R,T,Y). To edit this, you’re first going to have to edit the “HOTBAR_SLOTS_FULL” variable which is located at line 36. In my example, I need to set it to thirteen since I am adding three extra keys. Once you have done this, go ahead and go to line 680(ish). You should see this chunk of code:
if index < 10 or index == NumberOfHotbarSlots then -- NOTE: Hardcoded on purpose!
local slotNum = (index < 10) and index or 0
if index > 10 then
SlotNumber = NewGui('TextLabel', 'Number')
SlotNumber.Text = slotNum
SlotNumber.Size = UDim2.new(0.15, 0, 0.15, 0)
SlotNumber.Visible = false
SlotNumber.Parent = SlotFrame
HotkeyFns[ZERO_KEY_VALUE + slotNum] = slot.Select
end
Here is the code I had replaced it with, I have added comments to help better understand its functionality:
if index < 13 or index == NumberOfHotbarSlots then -- This is where it checks if the index (slot number being added) is greater than 13, or equal to our number we had set earlier for the maximum slots.
local slotNum = (index < 10) and index or 0 -- We set our slot number to the index or 0.
if index > 10 then -- Check if the index is greater than 10
if index == 11 then slotNum = "R" -- If it is equal to 11 we set the slot number to R
elseif index == 12 then slotNum = "T" -- Same process.
elseif index == 13 then slotNum = "Y" end -- Same process.
else -- Else if it is less than ten we proceed like usual.
SlotNumber = NewGui('TextLabel', 'Number')
SlotNumber.Text = slotNum
SlotNumber.Size = UDim2.new(0.15, 0, 0.15, 0)
SlotNumber.Visible = false
SlotNumber.Parent = SlotFrame
HotkeyFns[ZERO_KEY_VALUE + slotNum] = slot.Select
end
SlotNumber = NewGui('TextLabel', 'Number')
SlotFrame.Name = slotNum
SlotNumber.Text = slotNum
SlotNumber.Size = UDim2.new(0.15, 0, 0.15, 0)
SlotNumber.Visible = false
SlotNumber.Parent = SlotFrame
HotkeyFns[slotNum] = slot.Select -- Instead of this being a numerical value, we set it to a letter value. We do this so it is easier to call in the future.
end
Now that we have added the code to make extra buttons, we actually have to make it so you can press the button and it will select the tool. Go ahead and head over to line 983(ish), you should see the OnInputBegan function, it should look like this:
local function OnInputBegan(input, isProcessed)
-- Pass through keyboard hotkeys when not typing into a TextBox and not disabled (except for the Drop key)
if input.UserInputType == Enum.UserInputType.Keyboard and not TextBoxFocused and (WholeThingEnabled or input.KeyCode.Value == DROP_HOTKEY_VALUE) then
local hotkeyBehavior = HotkeyFns[input.KeyCode.Value]
if hotkeyBehavior then
hotkeyBehavior(isProcessed)
end
end
local inputType = input.UserInputType
if not isProcessed then
if inputType == Enum.UserInputType.MouseButton1 or inputType == Enum.UserInputType.Touch then
if InventoryFrame.Visible then
InventoryIcon:deselect()
end
end
end
end
Here is the code I added with comments to help understand it better;
local function OnInputBegan(input, isProcessed)
if input.UserInputType == Enum.UserInputType.Keyboard and not TextBoxFocused and (WholeThingEnabled or input.KeyCode.Value == DROP_HOTKEY_VALUE) then -- If the input type is keyboard and not textboxfocused then continue on.
local hotkeyBehavior = HotkeyFns[input.KeyCode.Value] -- Setting the variable to the hotkey functions allocated with the input value.
if input.KeyCode == Enum.KeyCode.R then hotkeyBehavior = HotkeyFns["R"] end -- Here is where we start checks for if it is equal to our keybind, we then put it to the allocated "R" spot in the table.
if input.KeyCode == Enum.KeyCode.T then hotkeyBehavior = HotkeyFns["T"] end -- Same process
if input.KeyCode == Enum.KeyCode.Y then hotkeyBehavior = HotkeyFns["Y"] end -- Same process
if hotkeyBehavior then -- If a result exists we continue
hotkeyBehavior(isProcessed)
end
end
local inputType = input.UserInputType
if not isProcessed then
if inputType == Enum.UserInputType.MouseButton1 or inputType == Enum.UserInputType.Touch then
if InventoryFrame.Visible then
InventoryIcon:deselect()
end
end
end
end
Tada! You have your own keybinds, great job. Lets move to the next chapter, we aren’t quite done yet.
Step 5: Fixing Quick Bugs.
At line 710(ish) there is the function “SlotFrame.DragBegin:Connect”, I like to add this line of code, this code helped me prevent a lot of errors you may have;
-- This is at the start of the function.
UnequipAllTools() -- We unequip all tools.
if HighlightFrame then HighlightFrame:Destroy() end -- We destroy the highlight. My highlights would glitch me and make me lose items and slots.
Now the next function right under it is “SlotFrame.DragStopped:Connect”, I added the same lines to this code as well. This has prevented all my errors.
This should patch most of your errors, if you ever get a error for like ZIndex I recommend wrapping it in a pcall.
If you have any questions, or even issues, feel free to ask. I am not very experienced with modules I did not use in my tutorial though.