Laadschermen | Documentatie - Roblox Creator Hub

Roblox toont een standaard laadscherm wanneer gebruikers verbinding maken met een spel, maar je kunt je spel personaliseren met een aangepast laadscherm dat statische of geanimeerde inhoud bevat.

Dit artikel behandelt de laadschermen die worden weergegeven wanneer een gebruiker aanvankelijk een spel betreedt. Om laadschermen aan te passen die worden weergegeven wanneer een gebruiker tussen plaatsen teleporteert, zie Teleport tussen plaatsen.

Implementatie

Om een aangepast laadscherm weer te geven, kun je ofwel een ScreenGui instantie ontwerpen binnen een LocalScript, of je kunt een ScreenGui object in je plaats hiërarchie refereren. Beide opties maken gebruik van ReplicatedFirst, aangezien deze service instanties naar clients repliceert voordat iets anders wordt gerepliceerd. Dit zorgt ervoor dat je laadscherm het eerste is dat gebruikers zien wanneer ze je spel binnenkomen.

Vanuit script

Om een aangepast laadscherm volledig vanuit een LocalScript te ontwerpen en weer te geven:

Maak in ReplicatedFirst een LocalScript.
Plak de volgende codevoorbeeld om een ScreenGui object te maken en aan te passen. Je kunt de volgende code aanpassen met je eigen waarden om je ontwerp te creëren.

Script-Gemaakt Laadscherm

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

-- Vervang ScreenGui-waarden door je eigen
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 = "Laden"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

-- Verwijder het standaard laadscherm
ReplicatedFirst:RemoveDefaultLoadingScreen()

task.wait(5)  -- Dwing het aangepaste laadscherm om minimaal een bepaalde tijd zichtbaar te zijn

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

loadingScreen:Destroy()

Vanuit bestaande GUI

In plaats van een laadscherm ScreenGui volledig via een LocalScript te maken, kun je ook een bestaande ScreenGui in je plaats hiërarchie refereren. Zorg ervoor dat je spel de gerefereerde ScreenGui binnen ReplicatedFirst bevat en dat de ScreenGui UI-elementen zoals TextLabels en ImageLabels bevat.

Om dit proces te demonstreren, verwijst de volgende LocalScript naar een ScreenGui genaamd LoadingScreen binnen ReplicatedFirst, en verwijdert vervolgens het standaard laadscherm zodat het enige laadscherm dat een speler kan zien jouw eigen aangepaste laadscherm is.

Vergeet niet dat je je laadscherm ScreenGui binnen de StarterGui container kunt ontwerpen om het voorvertonen, en het vervolgens naar ReplicatedFirst kunt verplaatsen zodra je tevreden bent met het resultaat.

Referentie Bestaand Laadscherm

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

	-- Verwijder het standaard laadscherm
	ReplicatedFirst:RemoveDefaultLoadingScreen()

	task.wait(5)  -- Dwing het scherm om minimaal een aantal seconden zichtbaar te zijn

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

	loadingScreen:Destroy()
end

Voeg animaties toe

Naast statische aangepaste laadschermen, kun je animaties toevoegen om het laadscherm te verbeteren en de voortgang van het laden aan te geven. De eenvoudigste manier om dit te doen is door een UI-element te maken, zoals een TextLabel of ImageLabel, en deze vervolgens te animeren met TweenService. Bijvoorbeeld, de volgende codevoorbeeld maakt een nieuwe ScreenGui met een kind ImageLabel, verwijdert het standaard laadscherm, en laat vervolgens TweenService de centrale elementen vervagen en draaien totdat het spel is geladen.

Script-Gemaakt Laadscherm (Geanimeerd)

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 = "Laden"
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

-- Verwijder het standaard laadscherm
ReplicatedFirst:RemoveDefaultLoadingScreen()

-- Start en initieer fade-in tweens
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()

-- Start en initieer rotatie tween
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)  -- Dwing het scherm om minimaal een aantal seconden zichtbaar te zijn

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

loadingScreen:Destroy()