Pantallas de carga | Documentación del Centro de creación de Roblox

Roblox muestra una pantalla de carga predeterminada cuando los usuarios se están conectando a un juego, pero puedes personalizar tu juego con una pantalla de carga personalizada que contenga contenido estático o animado.

Este artículo trata sobre las pantallas de carga que se muestran cuando un usuario se une inicialmente a un juego. Para personalizar las pantallas de carga que se muestran cuando un usuario se teletransporta entre lugares, consulta Teletransportarse entre lugares.

Implementación

Para mostrar una pantalla de carga personalizada, puedes diseñar una instancia de ScreenGui directamente dentro de un LocalScript, o puedes hacer referencia a un objeto ScreenGui en la jerarquía de tu lugar. Ambas opciones utilizan ReplicatedFirst, ya que este servicio replica instancias a los clientes antes de que se replique cualquier otra cosa. Esto asegura que tu pantalla de carga sea lo primero que los usuarios vean cuando ingresen a tu juego.

Desde un script

Para diseñar y mostrar una pantalla de carga personalizada completamente desde un LocalScript:

En ReplicatedFirst, crea un LocalScript.
Pega el siguiente código de muestra para crear y personalizar un objeto ScreenGui. Puedes modificar el siguiente código con tus propios valores para crear tu diseño.

Pantalla de Carga Creada por 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

-- Reemplaza los valores de ScreenGui con los tuyos
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 = "Cargando"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

-- Eliminar la pantalla de carga predeterminada
ReplicatedFirst:RemoveDefaultLoadingScreen()

task.wait(5)  -- Forzar que la pantalla de carga personalizada aparezca durante un tiempo mínimo

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

loadingScreen:Destroy()

Desde una GUI existente

En lugar de crear una pantalla de carga ScreenGui completamente a través de un LocalScript, también puedes hacer referencia a una ScreenGui existente en la jerarquía de tu lugar. Asegúrate de que tu juego incluya la ScreenGui referenciada dentro de ReplicatedFirst y que la ScreenGui incluya elementos de UI como TextLabels y ImageLabels.

Para demostrar este proceso, el siguiente LocalScript hace referencia a una ScreenGui llamada LoadingScreen dentro de ReplicatedFirst, luego elimina la pantalla de carga predeterminada para que la única pantalla de carga que un jugador pueda ver sea tu propia pantalla de carga personalizada.

Recuerda que puedes diseñar tu pantalla de carga ScreenGui dentro del contenedor StarterGui para previsualizarla, y luego moverla a ReplicatedFirst una vez que estés satisfecho con el resultado.

Referencia a Pantalla de Carga Existente
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

	-- Eliminar la pantalla de carga predeterminada
	ReplicatedFirst:RemoveDefaultLoadingScreen()

	task.wait(5)  -- Forzar que la pantalla aparezca durante un número mínimo de segundos

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

	loadingScreen:Destroy()
end

Agregar animaciones

Además de pantallas de carga estáticas personalizadas, puedes agregar animaciones para mejorar la pantalla de carga e indicar el progreso de carga. La forma más fácil de hacerlo es crear un elemento UI, como un TextLabel o ImageLabel, y luego animarlo usando TweenService. Por ejemplo, el siguiente código de muestra crea un nuevo ScreenGui con un ImageLabel hijo, elimina la pantalla de carga predeterminada, y luego TweenService hace que los elementos centrales se desvanezcan y roten hasta que el juego se cargue.

Pantalla de Carga Creada por Script (Animada)
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 = "Cargando"
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

-- Eliminar la pantalla de carga predeterminada
ReplicatedFirst:RemoveDefaultLoadingScreen()

-- Iniciar y comenzar las transiciones de desvanecimiento
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()

-- Iniciar y comenzar la transición de rotación
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)  -- Forzar que la pantalla aparezca durante un número mínimo de segundos

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

loadingScreen:Destroy()