布局

如何制作响应式的 Roblox GUI

Roblox 跑在从手机到 4K 显示器的各种设备上,所以用固定像素尺寸搭的 GUI 在不对的屏幕上就会错位。解决办法是用 Scale(屏幕的几分之几)而不是 Offset(像素)来思考,锚定元素让它们重新居中,限制文字让它保持可读。本指南讲解每个响应式 Roblox UI 背后的四个习惯。

打开主菜单模板 →

1. 用 Scale 而不是 Offset 定尺寸

UDim2 有一个 Scale 分量和一个 Offset 分量。fromScale(0.4, 0.6) 表示屏幕的 40%/60% —— 它会自适应。fromOffset(400, 600) 表示固定像素 —— 它不会。

-- Responsive (adapts to every screen)
panel.Size = UDim2.fromScale(0.4, 0.6)
panel.Position = UDim2.fromScale(0.5, 0.5)

-- Avoid: fixed pixels look wrong on phones or 4K
panel.Size = UDim2.fromOffset(400, 600)

2. 用 AnchorPoint 居中

Position 0.5, 0.5 把左上角放在屏幕中心。设 AnchorPoint 0.5, 0.5,元素就以自己的中点居中。

panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position = UDim2.fromScale(0.5, 0.5)

3. 保持文字可读

TextScaled 会让文字放大到填满它的框,在大屏上会变得很大。一个 UITextSizeConstraint 给最大字号设上限,让它保持整洁。

label.TextScaled = true
local cap = Instance.new("UITextSizeConstraint")
cap.MaxTextSize = 24
cap.Parent = label

提示: 编辑器的桌面 / 平板 / 手机切换能在每种视口预览同一个 GUI —— 用 Scale 搭建,三种都检查一遍。

常见问题

为什么我的 GUI 在手机上很小?

它是用 Offset(像素)定尺寸的。改用 UDim2.fromScale 的 Scale,让 GUI 是屏幕的几分之几,从而适配每种设备。

怎么在小屏上缩小整个 GUI?

给 ScreenGui 挂一个 UIScale 并设它的 Scale 属性(比如 0.8),一起缩小所有后代 —— 适合在手机上塞下密集的 HUD。