Màn hình tải | Tài liệu - Trung Tâm Nhà Sáng Tạo Roblox

Roblox hiển thị một màn hình tải mặc định khi người dùng kết nối đến một trò chơi, nhưng bạn có thể cá nhân hóa trò chơi của bạn với một màn hình tải tùy chỉnh có nội dung tĩnh hoặc động.

Bài viết này đề cập đến các màn hình tải hiển thị khi người dùng ban đầu tham gia vào một trò chơi. Để tùy chỉnh các màn hình tải hiển thị khi người dùng dịch chuyển giữa các địa điểm, hãy xem Dịch chuyển giữa các địa điểm.

Triển khai

Để hiển thị một màn hình tải tùy chỉnh, bạn có thể thiết kế một đối tượng ScreenGui trực tiếp trong một LocalScript, hoặc bạn có thể tham chiếu một đối tượng ScreenGui trong cấu trúc của bạn. Cả hai tùy chọn đều sử dụng ReplicatedFirst, vì dịch vụ này sao chép các đối tượng đến khách hàng trước khi bất kỳ điều gì khác được sao chép. Điều này đảm bảo rằng màn hình tải của bạn là điều đầu tiên mà người dùng thấy khi họ vào trò chơi của bạn.

Từ script

Để thiết kế và hiển thị một màn hình tải tùy chỉnh hoàn toàn từ một LocalScript:

Trong ReplicatedFirst, tạo một LocalScript.
Dán đoạn mã mẫu dưới đây để tạo và tùy chỉnh một đối tượng ScreenGui. Bạn có thể sửa đổi đoạn mã sau bằng các giá trị của riêng bạn để tạo thiết kế của bạn.

Màn Hình Tải Được Tạo Bởi Script
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

-- Thay thế các giá trị ScreenGui bằng của bạn
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 = "Đang tải"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

-- Xóa màn hình tải mặc định
ReplicatedFirst:RemoveDefaultLoadingScreen()

task.wait(5)  -- Buộc màn hình tải tùy chỉnh hiện trong một khoảng thời gian tối thiểu

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

loadingScreen:Destroy()

Từ GUI hiện có

Thay vì tạo một màn hình tải ScreenGui hoàn toàn qua một LocalScript, bạn cũng có thể tham chiếu một ScreenGui hiện có trong cấu trúc của bạn. Đảm bảo rằng trò chơi của bạn bao gồm ScreenGui được tham chiếu trong ReplicatedFirst và rằng ScreenGui chứa các phần tử UI như TextLabels và ImageLabels.

Để minh họa quy trình này, đoạn LocalScript sau đây tham chiếu một ScreenGui có tên LoadingScreen trong ReplicatedFirst, sau đó nó xóa màn hình tải mặc định để màn hình tải duy nhất mà người chơi có thể thấy là màn hình tải tùy chỉnh của bạn.

Nhớ rằng bạn có thể thiết kế màn hình tải ScreenGui của bạn trong container StarterGui để xem trước, sau đó di chuyển nó đến ReplicatedFirst khi bạn hài lòng với kết quả.

Tham Chiếu Màn Hình Tải Hiện Có
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

	-- Xóa màn hình tải mặc định
	ReplicatedFirst:RemoveDefaultLoadingScreen()

	task.wait(5)  -- Buộc màn hình hiện trong một số giây tối thiểu

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

	loadingScreen:Destroy()
end

Thêm hoạt ảnh

Ngoài các màn hình tải tùy chỉnh tĩnh, bạn có thể thêm hoạt ảnh để tăng cường màn hình tải và chỉ ra quá trình tải. Cách dễ nhất để làm điều này là tạo một phần tử UI, chẳng hạn như TextLabel hoặc ImageLabel, sau đó để hoạt ảnh nó bằng TweenService. Ví dụ, đoạn mã mẫu sau đây tạo một ScreenGui mới với một đối tượng con ImageLabel, xóa màn hình tải mặc định, sau đó TweenService làm mờ và quay các phần tử trung tâm cho đến khi trò chơi tải.

Màn Hình Tải Được Tạo Bởi Script (Có Hoạt Ảnh)
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 = "Đang tải"
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

-- Xóa màn hình tải mặc định
ReplicatedFirst:RemoveDefaultLoadingScreen()

-- Khởi tạo và bắt đầu các tween làm mờ
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()

-- Khởi tạo và bắt đầu tween quay
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)  -- Buộc màn hình hiện trong một số giây tối thiểu

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

loadingScreen:Destroy()