Sounds like you already have your shop done but want a custom UI to go along with it. Depending on your scope/use-case, there’s a lot that goes into designing and programming a custom UI. I’ll give you some starting points but since this place isn’t meant for users to write your code, you’ll have to adapt these starting points or find better ones on your own. There are many resources and free models out there that you can look at that will help you form a good approach. Here’s an easy-to-follow resource that only took a quick Google search.
Duplicate Buying Restrictions
You can make conditionals in your shop to check to see if they have it in their inventory before allowing the player to make a purchase.
Example:
if PurchasingPlayer.Backpack:FindFirstChild(ItemName) == nil then --Conditional to make sure the player doesn't have the item before proceeding with purchase.
Disabling the Standard Backpack
To disable the default Backpack UI, you need to use this line from the client/LocalScript:
game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
Custom Backpack/Inventory
You can still use the same location (Player.Backpack) or make your own custom location for items. I’d suggest doing a custom location because the default Backpack has the tool removed/relocated every time it’s equipped. By making your own equip function, you can equip a clone, rather than relocating it.
-
Design your UI however which way you want and you can bind it to a button that opens and closes the inventory/backpack using the MouseButton1Clicked event. It’s as simple as changing the Visible property of the Frame. You can even make it popup fancy by using Tweens. Here’s a good intoduction.
-
Once you’ve created your UI design, you have to populate it with frames for every tool. You can parse the inventory location using loops.
local ToolList = {} --Defines a table for the list of tools
function UpdateToolList()
ToolList = {} --Clears toollist
for i,v in ipairs(InventoryLocation:GetChildren()) do
if v:IsA("Tool") then
table.insert(ToolList,v)
end
end
end
- With every tool you find from the loop, create a button representing each tool. Then you can bind equip/unequip functions to each button’s click event.
function CreateButtons()
for i,v in pairs(ToolList) do
if v then --Depending on when CreateButtons() is called, the ToolList may contain nil values if a tool is somehow deleted/destroyed.
local Button = ButtonDesign:clone()
Button.Name = v.Name
Button.ButtonImage.Image = v.TextureId
Button.Parent = CustomToolboxUILocation
Button.MouseButton1Click:connect(function()
local Equipped
local Character = LocalPlayer.Character
if not Character then return end --Doesnt proceed if it can't find the character.
if Character:FindFirstChild(v.Name) then --Searches the character for the tool.
Equipped = true
else
Equipped = false
end
if Equipped == true then
UnequipTool() --link to unequip function
UnhighlightButton(Button) --link to unhighlight function
else --If its not equipped
EquipTool() --link to equip function
HighlightButton(Button) --link to highlight function
end
end)
end
end
end
- Then when the players backpack has an item removed/added, remove the current buttons, update the ToolList, then make new buttons.
function UpdateUI()
CustomToolboxUILocation:ClearAllChildren()
local NewUILayout = Instance.new("UILayout",CustomToolboxUILocation) --Assuming you are using a UILayout, replace UILayout with UIGridLayout or UIListLayout depending on your UI design. This replaces the old one that got destroyed with :ClearAllChildren()
--set the UILayout back to the original settings. Example NewUILayout.Padding = Vector2.new(0,5), etc., etc.
UpdateToolList()
CreateButtons()
end
InventoryLocation.ChildAdded:connect(UpdateUI)
InventoryLocation.ChildRemoving:connect(UpdateUI)
This method is just one approach to how it could work. There are many other ways of creating custom Toolbars/Backpacks/UI. You’ll have to come up with your own solution tailored to what you want. With this example, it refreshes the UI every time the players backpack gets changed. The UI positioning of the tools may get rearranged during every inventory change because of that. A workaround is to save the locations in the UI by putting their location/order into a table, then referencing the table when creating buttons so you can assign their Position/LayoutOrder in the CreateButtons() function. You can even create empty buttons for unassigned/empty slots if you wanted to. Just needs a bit of creativity and forethought.
