商店

如何制作 Roblox 商店 GUI

一个商店需要三样东西:一个可滚动区域、自动排成网格的物品,以及一个让购买真正发生的途径。本指南用 ScrollingFrame + UIGridLayout 搭界面,再通过 RemoteEvent 接好购买动作让服务器校验它。从商店模板开始可以跳过布局工作。

local panel = Instance.new("Frame")
panel.Size = UDim2.fromScale(0.6, 0.76)
panel.Position = UDim2.fromScale(0.2, 0.12)
panel.Parent = gui

local scroll = Instance.new("ScrollingFrame")
scroll.Size = UDim2.fromScale(1, 0.8)
scroll.BackgroundTransparency = 1
scroll.ScrollBarThickness = 6
scroll.Parent = panel

local grid = Instance.new("UIGridLayout")
grid.CellSize = UDim2.fromOffset(120, 120)
grid.CellPadding = UDim2.fromOffset(10, 10)
grid.Parent = scroll

local function makeItem(name, price, imageId)
	local cell = Instance.new("TextButton")
	cell.Text = ""
	cell.BackgroundColor3 = Color3.fromRGB(40, 41, 51)
	cell.Parent = scroll

	local icon = Instance.new("ImageLabel")
	icon.Size = UDim2.fromScale(1, 0.7)
	icon.BackgroundTransparency = 1
	icon.Image = "rbxassetid://" .. imageId
	icon.Parent = cell

	local label = Instance.new("TextLabel")
	label.Size = UDim2.fromScale(1, 0.3)
	label.Position = UDim2.fromScale(0, 0.7)
	label.BackgroundTransparency = 1
	label.Text = name .. " - " .. price
	label.Parent = cell

	return cell
end

-- LocalScript (client)
buyRemote = game.ReplicatedStorage:WaitForChild("BuyItem")
cell.MouseButton1Click:Connect(function()
	buyRemote:FireServer(itemId)
end)

-- Script (server)
buyRemote.OnServerEvent:Connect(function(player, itemId)
	-- verify currency, deduct, grant item
end)