菜单

如何制作 Roblox 加载界面 GUI

加载界面在资源流入时盖住整个视口。本指南搭一个带渐变背景的全屏 Frame、一个大标题、一条填充从 0 补间到满的进度条,以及一行提示。游戏就绪后,你销毁这个 GUI。另外也有一个加载界面模板可以从头开始。

1. 全屏背景和标题

在 ScreenGui 上设 IgnoreGuiInset = true,让 Frame 盖住整个视口(包括顶部状态栏)。背景 Frame 上加一个 UIGradient 给它层次感。

local gui = Instance.new("ScreenGui")
gui.IgnoreGuiInset = true
gui.Parent = player.PlayerGui

local bg = Instance.new("Frame")
bg.Size = UDim2.fromScale(1, 1)
bg.BackgroundColor3 = Color3.fromRGB(12, 13, 23)
bg.Parent = gui

local title = Instance.new("TextLabel")
title.Size = UDim2.fromScale(0.6, 0.12)
title.Position = UDim2.fromScale(0.2, 0.36)
title.BackgroundTransparency = 1
title.Text = "LOADING"
title.Font = Enum.Font.GothamBlack
title.TextSize = 44
title.Parent = bg

2. 进度条

进度条是两个 Frame:一条暗色轨道和一条彩色填充。填充从 Scale 0 宽度开始,随加载推进把它补间上去。

local track = Instance.new("Frame")
track.Size = UDim2.fromScale(0.4, 0.03)
track.Position = UDim2.fromScale(0.3, 0.56)
track.BackgroundColor3 = Color3.fromRGB(29, 31, 41)
track.Parent = bg
Instance.new("UICorner", track).CornerRadius = UDim.new(1, 0)

local fill = Instance.new("Frame")
fill.Size = UDim2.fromScale(0, 1)
fill.BackgroundColor3 = Color3.fromRGB(0, 162, 255)
fill.Parent = track
Instance.new("UICorner", fill).CornerRadius = UDim.new(1, 0)

3. 加上动画并清理

用 TweenService 让填充增长。加载完成后 Destroy 这个 GUI,让它彻底消失。

local tween = game:GetService("TweenService"):Create(
	fill,
	TweenInfo.new(3, Enum.EasingStyle.Linear),
	{ Size = UDim2.fromScale(1, 1) }
)
tween:Play()
tween.Completed:Connect(function()
	gui:Destroy()
end)

提示: 在真实游戏里,用实际的资源加载进度驱动填充,而不是固定计时器,这样它不会在游戏就绪前就跑完。

常见问题

怎么连顶部状态栏也盖住?

在 ScreenGui 上设 IgnoreGuiInset = true。那么第一个 Size 为 UDim2.fromScale(1,1) 的 Frame 就盖住整个视口。

怎么给进度条加动画?

用 TweenService 把填充 Frame 的 Size 从 UDim2.fromScale(0,1) 补间到 UDim2.fromScale(1,1),然后在 tween.Completed 里 Destroy 这个 GUI。