Écrans de chargement | Documentation

Roblox affiche un écran de chargement par défaut lorsque les utilisateurs se connectent à un jeu, mais vous pouvez personnaliser votre jeu avec un écran de chargement personnalisé contenant du contenu statique ou animé.

Cet article couvre les écrans de chargement qui s'affichent lorsqu'un utilisateur rejoint initialement un jeu. Pour personnaliser les écrans de chargement qui s'affichent lorsqu'un utilisateur se téléporte entre les lieux, consultez Téléportation entre les lieux.

Mise en œuvre

Pour afficher un écran de chargement personnalisé, vous pouvez soit concevoir une instance ScreenGui directement dans un LocalScript, soit vous pouvez référencer un objet ScreenGui dans la hiérarchie de votre lieu. Les deux options utilisent ReplicatedFirst, car ce service réplique les instances aux clients avant que quoi que ce soit d'autre ne soit répliqué. Cela garantit que votre écran de chargement est la première chose que les utilisateurs voient lorsqu'ils entrent dans votre jeu.

À partir du script

Pour concevoir et afficher un écran de chargement personnalisé entièrement à partir d'un LocalScript :

Dans ReplicatedFirst, créez un LocalScript.
Collez dans l'exemple de code suivant pour créer et personnaliser un objet ScreenGui. Vous pouvez modifier le code suivant avec vos propres valeurs pour créer votre design.

Écran de chargement créé par le 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

-- Remplacez les valeurs de ScreenGui par les vôtres
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 = "Chargement"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

-- Supprimer l'écran de chargement par défaut
ReplicatedFirst:RemoveDefaultLoadingScreen()

task.wait(5)  -- Forcer l'écran de chargement personnalisé à apparaître pendant un temps minimum

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

loadingScreen:Destroy()

À partir d'une GUI existante

Au lieu de créer complètement un écran de chargement ScreenGui à travers un LocalScript, vous pouvez également référencer un ScreenGui existant dans la hiérarchie de votre lieu. Assurez-vous que votre jeu inclut le ScreenGui référencé dans ReplicatedFirst et que le ScreenGui inclut des éléments UI comme TextLabels et ImageLabels.

Pour démontrer ce processus, le LocalScript suivant fait référence à un ScreenGui nommé LoadingScreen dans ReplicatedFirst, puis il supprime l'écran de chargement par défaut afin que le seul écran de chargement qu'un joueur puisse voir soit votre propre écran de chargement personnalisé.

N'oubliez pas que vous pouvez concevoir votre écran de chargement ScreenGui dans le conteneur StarterGui pour le prévisualiser, puis le déplacer vers ReplicatedFirst une fois que vous êtes satisfait du résultat.

Référencer un écran de chargement existant
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

	-- Supprimer l'écran de chargement par défaut
	ReplicatedFirst:RemoveDefaultLoadingScreen()

	task.wait(5)  -- Forcer l'écran à apparaître pendant un nombre minimum de secondes

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

	loadingScreen:Destroy()
end

Ajouter des animations

En plus des écrans de chargement personnalisés statiques, vous pouvez ajouter des animations pour améliorer l'écran de chargement et indiquer la progression du chargement. Le moyen le plus simple de le faire est de créer un élément UI, tel qu'un TextLabel ou ImageLabel, puis de l'animer à l'aide de TweenService. Par exemple, l'exemple de code suivant crée un nouveau ScreenGui avec un enfant ImageLabel, supprime l'écran de chargement par défaut, puis TweenService fait apparaître et fait tourner les éléments centraux jusqu'à ce que le jeu se charge.

Écran de chargement créé par le script (animé)
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 = "Chargement"
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

-- Supprimer l'écran de chargement par défaut
ReplicatedFirst:RemoveDefaultLoadingScreen()

-- Initier et commencer les tweens de fondu
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()

-- Initier et commencer le tween de rotation
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)  -- Forcer l'écran à apparaître pendant un nombre minimum de secondes

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

loadingScreen:Destroy()