How do games have custom backpack GUIs?

Hi! I am wanting to know how some games have custom backpack GUIs, and how they achieved this. Better yet, is there a way to modify the current backpack GUI and override it?

Here are some examples of what I am talking about

image
image

I have tried looking on Youtube and found videos such as this, however, the GUI shows all the 10 slots when I am only wanting it to show the slots that a tool is in.

If anyone has any ideas of what I should do, please let me know! Thank you!

8 Likes

Hey there, @0929lego.
I recommend watching this YouTube video instead, as it shows footage of the GUIs duplicating once another tool is added. Check the timestamp 13:52 and get back to me if it helps.

Rocketsciencey

4 Likes

Hey @Rocketsciencey!

Thanks for sharing the video, the only problem I found with it is that it doesn’t sync with KeyCode so you couldn’t press “1” to equip the tool, but I will try to work around this!

1 Like

Hi, do you mean something like this?:


With custom slots? and that you can click the number of the slot to use it? I have made something like this, but it’s a little hard for me to explain because I used more than 2 script for this.

The image in this post is what I have made.

Basically, I disabled the roblox backpack core gui. And I have made a slot with an object value, that clones itself into the player’s custom backpack gui every time a child is added to the backpack, and I removed the clone using GetDescendants inside the backpack gui to see if the object value is equal to the tool that was removed from the inventory, and if it is, delete the object value’s slot (The object value’s value is the tool). and I have named the slots “Slot”… Number of the backpack’s children + 1.
And I have checked that if the tool is in the character too, so it won’t remove the slot when the player equips the tool. And for the equipping, the slot is a button, that you can click on that equips the tool, and fires a remote event to equip it, and for the key numbers, I used UserInputService, to check if the player is not chatting and that the slot exists, and if it does, fire the equip remote event.

2 Likes

Yeah, so basically what I am trying to achieve is the exact same backpack system that is already implemented into Roblox, but with different background colors, etc.

2 Likes

They disable the default Backpack
Example: game:GetService(“StarterGui”):SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)

Then they detect what key the player pressed and what tool is assigned to the key. Using the Humanoid:EquipTool() function they force the tool to be equipped.

1 Like

I’m pretty sure you can’t edit the default Roblox Backpack.

Yeah I kind of figured that was involved in this. How can I make a system that adds a slot depending on how many tools are in the backpack?

You can check using a while wait() for all of the players, if a child is added to their backpack, and if it does, clone a gui slot, into their custom backpack gui.
Edit: there’s no need for the while wait I think because it’s functions right?.
I am not sure if while loops are necessary, but that’s how I have done it.

1 Like
for i,v in pairs(Player.Backpack:GetChildren()) do
if v:IsA("Tool") then
-- Assigns the tool to a slot
end
end

You can look for tutorials on how to make a full Backpack gui.

1 Like

But what if a new tool is added, he can create a ChildAdded function and a childRemoved function.
I have made this using object values:

local add = false

	for i,player in pairs(game.Players:GetPlayers()) do
		player.Backpack.ChildAdded:Connect(function(child)
			if(child:IsA("Tool")) then
				if(#player.Backpack:GetChildren() <= 10) then
					for i, object in pairs(player.PlayerGui.Backpack:GetDescendants()) do
						if(object:IsA("ObjectValue")) then
							if(object.Value == child) then
								add = false
								break
							else
								add = true
								wait()
							end
						end
						if(not player.Backpack:FindFirstChildOfClass("ObjectValue")) then
							add = true
							break
						end
						wait()
					end
					for i, object in pairs(player.PlayerGui.Backpack.Frame:GetDescendants()) do
						if(object:IsA("TextButton")) then
							if(object.Text == child.Name) then
								add = false
								break
							else
								add = true
								wait()
							end
						end
						if(not player.PlayerGui.Backpack.Frame:FindFirstChildOfClass("TextButton")) then
							add = true
							break
						end
						wait()
					end
					if(add == true) then
						print("works")
						if(not player.PlayerGui.Backpack.Frame:FindFirstChild("Slot"..(#player.Backpack:GetChildren() + 1))) then
							local slot = game:GetService("ReplicatedStorage").Slot:Clone()
							slot.Parent = player.PlayerGui.Backpack.Frame
							print(child.TextureId)
							if(child.TextureId ~= "") then
								slot.ImageLabel.Image = child.TextureId
								slot.ImageLabel.ImageTransparency = 0
							elseif(child.TextureId == "") then
								print("works22")
								slot.Text = child.Name
							end
							slot:WaitForChild("Tool").Value = child
							slot.Name = "Slot"..(#player.Backpack:GetChildren() + 1)
							add = false
							wait(0.1)
						end
					end
				end
			end
		end)
		player.Backpack.ChildRemoved:Connect(function(child)
			if(player.Character ~= nil) then
				if(not player.Character:FindFirstChild(child.Name)) then
					if(player:FindFirstChild("PlayerGui")) then
						for i, object in pairs(player.PlayerGui.Backpack:GetDescendants()) do
							if(object:IsA("ObjectValue")) then
								if(object.Value == child) then
									object.Parent:Destroy()
								end
							end
						end
					end
				else
					
				end
			end
		end)
	end

4 Likes

I have a system right now that equips the tool if it is clicked, but I don’t know how to sync this with KeyCode to make it equip when the player clicks 1, and if another slot is added, 2.
https://gyazo.com/95b32e142cef2b90cd91598340b7809c

local UIS = game:GetService("UserInputService")
local player = game.Players.LocalPlayer
UIS.InputBegan:Connect(function(input, proccess)
	if(not proccess) then
		if(input.KeyCode == Enum.KeyCode.One) then
			if(script.Parent:FindFirstChild("Slot1")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot1.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Two) then
			if(script.Parent:FindFirstChild("Slot2")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot2.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Three) then
			if(script.Parent:FindFirstChild("Slot3")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot3.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Four) then
			if(script.Parent:FindFirstChild("Slot4")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot4.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Five) then
			if(script.Parent:FindFirstChild("Slot5")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot5.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Six) then
			if(script.Parent:FindFirstChild("Slot6")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot6.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Seven) then
			if(script.Parent:FindFirstChild("Slot7")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot7.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Eight) then
			if(script.Parent:FindFirstChild("Slot8")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot8.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Nine) then
			if(script.Parent:FindFirstChild("Slot9")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot9.Tool.Value)
			end
		elseif(input.KeyCode == Enum.KeyCode.Zero) then
			if(script.Parent:FindFirstChild("Slot10")) then
				game:GetService("ReplicatedStorage").ToolUse:FireServer(script.Parent.Slot10.Tool.Value)
			end
		end
	end
end)

I have made this, the server script makes the player equip the tool, and the tool is the tool stored in the object value.

1 Like

Alright I’ll try this out, thanks for the help!

No problem! But adjust it to your system, it won’t work directly like this, I am sure you have made it differently, but I guess that you are using a remote event right? so fire the equipping remote event instead of mine, and change the slot names to your slot names. And fire the tools

1 Like

The system I use currently doesn’t use a remote event, but I think I can work around this.

1 Like

Do not use while wait and certainly do not create connections in a while loop. That code right there is a good way to kill performance and leak memory. Always strive to go for an event-driven network and stay away from manipulating UIs on the server-side. This is all work the client should be handling.

1 Like

So is it okay to do it in a local script inside of the GUI, and instead of a while loop use RunService?

No, you don’t need any constantly running code here at all. A custom backpack can and should be completely event-driven and the client should also, by nature of it being a Gui and dependent on input, be handling most or all work relating to a backpack. It can get the Gui going, sort tools out on the hotbar and if needed, request from the server to equip a tool.

2 Likes