HUD

如何制作 Roblox 背包 GUI

背包把玩家拥有的所有东西显示成一排可点击装备或使用的格子。它的结构是一个 ScrollingFrame,里面用 UIGridLayout 排出统一尺寸的格子,外加一个模板格子,由你的脚本按每件物品克隆一次。本指南用 Luau 搭一个,并对应编辑器里的 inventory 模板。

打开背包模板 →

1. 用 ScrollingFrame + UIGridLayout 做统一格子

ScrollingFrame 是可滚动容器;里面的 UIGridLayout 会自动把每个子元素排成统一网格。CellSize 和 CellPadding 设一次,任意数量的格子都能正确平铺。

local scroll = Instance.new("ScrollingFrame")
scroll.Size = UDim2.fromScale(0.6, 0.7)
scroll.Position = UDim2.fromScale(0.2, 0.15)
scroll.AutomaticCanvasSize = Enum.AutomaticSize.Y
scroll.CanvasSize = UDim2.new(0, 0, 0, 0)
scroll.ScrollBarThickness = 6
scroll.Parent = gui

local grid = Instance.new("UIGridLayout")
grid.CellSize = UDim2.fromOffset(90, 90)
grid.CellPadding = UDim2.fromOffset(8, 8)
grid.SortOrder = Enum.SortOrder.LayoutOrder
grid.Parent = scroll

2. 每件物品克隆一个模板格子

做一个格子 Frame(带 UICorner 和一个 ImageLabel 当图标),把它当作模板保留。为每件拥有的物品克隆它,而不是内联构造每个格子 —— 这样布局代码很小,而且每个格子都一模一样。

提示: 用 Slot_<物品id> 这样的命名约定,这样你的脚本能按 id 找到、装备或移除格子。

3. 从玩家数据填充格子

遍历玩家拥有的物品,克隆模板,设置图标和名字,然后把它挂到 ScrollingFrame 下。UIGridLayout 会自动定位,画布随 AutomaticCanvasSize 增长。

local function populate(items)
	for _, item in ipairs(items) do
		local slot = template:Clone()
		slot.Name = "Slot_" .. item.id
		slot.Icon.Image = item.icon
		slot.Parent = scroll
	end
end

常见问题

运行时怎么增删物品?

克隆模板格子并挂到 ScrollingFrame 下即增加;对格子调用 Destroy() 即移除。UIGridLayout 会自动重排剩余格子。

怎么显示当前装备的是哪件?

给模板格子加一个初始透明的 UIStroke,在玩家点击的格子上把它的 Transparency 关掉。彩色描边就是一个清晰的选择边框。