載入畫面 | 文件 - Roblox 創作者中心

Roblox 在用戶連接到遊戲時會顯示預設的載入畫面，但您可以使用包含靜態或動畫內容的自訂載入畫面來個性化您的遊戲。

本文涵蓋當用戶最初加入遊戲時顯示的載入畫面。要自訂當用戶在地點之間傳送時顯示的載入畫面，請參閱在地點之間傳送。

實作

要顯示自訂載入畫面，您可以直接在 LocalScript 中設計 ScreenGui 實例，或者您可以在您的地方層級中引用 ScreenGui 物件。這兩種選擇都利用了 ReplicatedFirst，因為此服務在其他任何東西被複製之前就會複製實例到客戶端。這確保了您的載入畫面是在用戶進入遊戲時他們看到的第一件事。

從腳本中

要完全從 LocalScript 設計和顯示自訂載入畫面：

在 ReplicatedFirst 中創建一個 LocalScript。
餵入以下代碼範本來創建和自訂 ScreenGui 物件。您可以用自己的值修改以下代碼來創建您的設計。

腳本創建的載入畫面
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local loadingScreen = Instance.new("ScreenGui")
loadingScreen.IgnoreGuiInset = true
loadingScreen.Parent = playerGui

-- 用您自己的值替換 ScreenGui 值
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.DenkOne
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "載入中"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

-- 移除預設的載入畫面
ReplicatedFirst:RemoveDefaultLoadingScreen()

task.wait(5)  -- 強制自訂載入畫面至少顯示一段時間

if not game:IsLoaded() then
	game.Loaded:Wait()
end

loadingScreen:Destroy()

從現有的 GUI

您也可以從您的地方層級中引用現有的 ScreenGui，而不是完全通過 LocalScript 創建一個載入畫面 ScreenGui。確保您的遊戲包含引用的 ScreenGui 在 ReplicatedFirst 中，並且該 ScreenGui 包含 UI 元素，如 TextLabels 和 ImageLabels。

為了演示這一過程，以下 LocalScript 參考了 ReplicatedFirst 中名為 LoadingScreen 的 ScreenGui，然後移除預設的載入畫面，這樣玩家能看到的唯一載入畫面就是您自訂的載入畫面。

請記住，您可以在 StarterGui 容器中設計您的載入畫面 ScreenGui 以進行預覽，然後在對結果滿意後將其移動到 ReplicatedFirst。

參考現有的載入畫面
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local loadingScreen = ReplicatedFirst:FindFirstChild("LoadingScreen")
if loadingScreen then
	loadingScreen.IgnoreGuiInset = true
	loadingScreen.Parent = playerGui

	-- 移除預設的載入畫面
	ReplicatedFirst:RemoveDefaultLoadingScreen()

	task.wait(5)  -- 強制載入畫面至少顯示幾秒

	if not game:IsLoaded() then
		game.Loaded:Wait()
	end

	loadingScreen:Destroy()
end

添加動畫

除了靜態自訂載入畫面之外，您還可以添加動畫以增強載入畫面並指示加載進度。最簡單的方法是創建一個 UI 元素，例如TextLabel 或 ImageLabel，然後使用 TweenService 進行動畫。例如，以下代碼範本創建了一個具有子 ImageLabel 的新 ScreenGui，移除了預設載入畫面，然後使用 TweenService 使中央元素淡入並旋轉，直到遊戲加載完成。

腳本創建的載入畫面（動畫）
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local loadingScreen = Instance.new("ScreenGui")
loadingScreen.IgnoreGuiInset = true
loadingScreen.Parent = playerGui

local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.DenkOne
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "載入中"
textLabel.TextSize = 32
textLabel.TextTransparency = 1
textLabel.Parent = loadingScreen

local loadingRing = Instance.new("ImageLabel")
loadingRing.Size = UDim2.new(0, 256, 0, 256)
loadingRing.BackgroundTransparency = 1
loadingRing.Image = "rbxassetid://4965945816"
loadingRing.AnchorPoint = Vector2.new(0.5, 0.5)
loadingRing.Position = UDim2.new(0.5, 0, 0.5, 0)
loadingRing.ImageTransparency = 1
loadingRing.Parent = loadingScreen

-- 移除預設的載入畫面
ReplicatedFirst:RemoveDefaultLoadingScreen()

-- 啟動並開始淡入動畫
local fadeTweenInfo = TweenInfo.new(1, Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 2)
local fadeTween1 = TweenService:Create(textLabel, fadeTweenInfo, {TextTransparency = 0})
local fadeTween2 = TweenService:Create(loadingRing, fadeTweenInfo, {ImageTransparency = 0})
fadeTween1:Play()
fadeTween2:Play()

-- 啟動並開始旋轉動畫
local tweenInfo = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1)
local tween = TweenService:Create(loadingRing, tweenInfo, {Rotation = 360})
tween:Play()

task.wait(5)  -- 強制載入畫面至少顯示幾秒

if not game:IsLoaded() then
	game.Loaded:Wait()
end

loadingScreen:Destroy()