How to make an item appear in a gui

In my game I want the stuff in my inventory to appear in different categories in my GUI.
How would I do that? (Without hardcoding it in for each part)

Inventory: unknown (1)

Gui:

Script I want the code in:

local Player = game.Players.LocalPlayer
local WorkshopGui = Player.PlayerGui:WaitForChild("WorkshopGui")
local WorkShopButtons = Player.PlayerGui:WaitForChild("WorkshopButtons")
local BottomMenu = Player.PlayerGui:WaitForChild("BottomMenu")
local Stat = Player.PlayerGui:WaitForChild("Stats")
local ButtonsFrame = Player.PlayerGui.WorkshopGui.Buttons
local ReturnCam = game.ReplicatedStorage.ReturnCam
local Bridge = game.ReplicatedStorage.Bridge

-- FRAME VARIABLES --
local MotherboardFrame = WorkshopGui.MotherboardFrame
local RamFrame = WorkshopGui.RamFrame
local CpuFrame = WorkshopGui.CpuFrame
local GpuFrame = WorkshopGui.GpuFrame
local CoolerFrame = WorkshopGui.CoolerFrame
local PowerSupplyFrame = WorkshopGui.PowerSupplyFrame
local StorageFrame = WorkshopGui.StorageFrame



-- BUTTON VARIABLES --
local MotherboardButton = ButtonsFrame.MotherboardButton
local CpuButton = ButtonsFrame.CpuButton
local RamButton = ButtonsFrame.RamButton
local StorageButton = ButtonsFrame.StorageButton
local GraphicsCardButton = ButtonsFrame.GraphicsCardButton
local CoolerButton = ButtonsFrame.CoolerButton
local PowerSupplyButton = ButtonsFrame.PowerSupplyButton
local Inventory = WorkShopButtons.Inventory
local Close = WorkShopButtons.Close
local Glass = game.Workspace.PCTEST.PC.Glass

-----------------------------------------------------------------------
Close.MouseButton1Click:Connect(function(player)
	Glass.Transparency = 0.75
	Bridge:FireServer(player)
	WorkshopGui.Enabled = false
end)

Inventory.MouseButton1Click:Connect(function()
	WorkshopGui.Enabled = not WorkshopGui.Enabled
	MotherboardFrame.Visible = true
	RamFrame.Visible = false
	CpuFrame.Visible = false
	GpuFrame.Visible = false
	CoolerFrame.Visible = false
	PowerSupplyFrame.Visible = false
	StorageFrame.Visible = false
end)

MotherboardButton.MouseButton1Click:Connect(function()
	MotherboardFrame.Visible = true
	RamFrame.Visible = false
	CpuFrame.Visible = false
	GpuFrame.Visible = false
	CoolerFrame.Visible = false
	PowerSupplyFrame.Visible = false
	StorageFrame.Visible = false
end)


CpuButton.MouseButton1Click:Connect(function()
	CpuFrame.Visible = true
	MotherboardFrame.Visible = false
	RamFrame.Visible = false
	GpuFrame.Visible = false
	CoolerFrame.Visible = false
	PowerSupplyFrame.Visible = false
	StorageFrame.Visible = false
end)

RamButton.MouseButton1Click:Connect(function()
	RamFrame.Visible = true
	CpuFrame.Visible = false
	MotherboardFrame.Visible = false
	GpuFrame.Visible = false
	CoolerFrame.Visible = false
	PowerSupplyFrame.Visible = false
	StorageFrame.Visible = false
end)

StorageButton.MouseButton1Click:Connect(function()
	StorageFrame.Visible = true
	RamFrame.Visible = false
	CpuFrame.Visible = false
	MotherboardFrame.Visible = false
	GpuFrame.Visible = false
	CoolerFrame.Visible = false
	PowerSupplyFrame.Visible = false

end)

GraphicsCardButton.MouseButton1Click:Connect(function()
	GpuFrame.Visible = true
	StorageFrame.Visible = false
	RamFrame.Visible = false
	CpuFrame.Visible = false
	MotherboardFrame.Visible = false
	CoolerFrame.Visible = false
	PowerSupplyFrame.Visible = false

end)

CoolerButton.MouseButton1Click:Connect(function()
	CoolerFrame.Visible = true
	GpuFrame.Visible = false
	StorageFrame.Visible = false
	RamFrame.Visible = false
	CpuFrame.Visible = false
	MotherboardFrame.Visible = false
	PowerSupplyFrame.Visible = false

end)


PowerSupplyButton.MouseButton1Click:Connect(function()
	PowerSupplyFrame.Visible = true
	CoolerFrame.Visible = false
	GpuFrame.Visible = false
	StorageFrame.Visible = false
	RamFrame.Visible = false
	CpuFrame.Visible = false
	MotherboardFrame.Visible = false

end)
1 Like

This looks awfully familiar…

Anyways, you’d make use of ViewportFrames. A tutorial can be found here.

1 Like

its our game we both are working on it

i am also having a hard time understanding the video and referencing it to my code. I am kinda lost on what to do because the video is on a buy GUI not a inventory GUI

Basically you would want a child added event perhaps, listening for the player’s inventory, you would want to have a list of all types of items and their associated names so you can clone a button or image associated with it and edit the contents appropriately

If you have no idea what I’m talking about I suggest looking at the first 12 minutes of this: How To Make A Shop On Roblox - Roblox Tool Shop GUI - YouTube

even if its not a shop it still has this concept: you need to clone a template that is affect by somesort of ui list layout and change the contents of the–whatever you want to clone–an image with title? image needs to be set in association with the given name and title == the given name.

2 Likes