Telas de carregamento | Documentação - Central de Criadores Roblox

Roblox exibe uma tela de carregamento padrão quando os usuários estão se conectando a um jogo, mas você pode personalizar seu jogo com uma tela de carregamento personalizada que contém conteúdo estático ou animado.

Este artigo aborda as telas de carregamento que aparecem quando um usuário se junta a um jogo pela primeira vez. Para personalizar telas de carregamento que aparecem quando um usuário se teleporta entre lugares, veja Teleportar entre lugares.

Implementação

Para exibir uma tela de carregamento personalizada, você pode projetar uma instância de ScreenGui diretamente dentro de um LocalScript ou pode referenciar um objeto ScreenGui na hierarquia do seu lugar. Ambas as opções utilizam ReplicatedFirst, já que este serviço replica instâncias para os clientes antes que qualquer outra coisa seja replicada. Isso garante que sua tela de carregamento seja a primeira coisa que os usuários veem quando entram no seu jogo.

A partir do script

Para projetar e exibir uma tela de carregamento personalizada totalmente a partir de um LocalScript:

Em ReplicatedFirst, crie um LocalScript.
Cole no seguinte exemplo de código para criar e personalizar um objeto ScreenGui. Você pode modificar o código a seguir com seus próprios valores para criar seu design.

Tela de Carregamento Criada pelo 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

-- Substitua os valores de ScreenGui pelos seus próprios
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 = "Carregando"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

-- Remova a tela de carregamento padrão
ReplicatedFirst:RemoveDefaultLoadingScreen()

task.wait(5)  -- Force a tela de carregamento personalizada a aparecer por um tempo mínimo

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

loadingScreen:Destroy()

A partir de uma GUI existente

Em vez de criar uma tela de carregamento ScreenGui totalmente através de um LocalScript, você também pode referenciar um ScreenGui existente na hierarquia do seu lugar. Certifique-se de que seu jogo inclui o ScreenGui referenciado dentro de ReplicatedFirst e que o ScreenGui inclui elementos de UI como TextLabels e ImageLabels.

Para demonstrar esse processo, o seguinte LocalScript referência um ScreenGui chamado LoadingScreen dentro de ReplicatedFirst, e então remove a tela de carregamento padrão para que a única tela de carregamento que um jogador possa ver seja sua própria tela de carregamento personalizada.

Lembre-se de que você pode projetar sua tela de carregamento ScreenGui dentro do contêiner StarterGui para pré-visualizá-la e depois movê-la para ReplicatedFirst assim que estiver satisfeito com o resultado.

Referência Tela de Carregamento 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

	-- Remova a tela de carregamento padrão
	ReplicatedFirst:RemoveDefaultLoadingScreen()

	task.wait(5)  -- Force a tela a aparecer por um número mínimo de segundos

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

	loadingScreen:Destroy()
end

Adicionar animações

Além das telas de carregamento personalizadas estáticas, você pode adicionar animações para melhorar a tela de carregamento e indicar o progresso de carregamento. A forma mais simples de fazer isso é criar um elemento de UI, como um TextLabel ou ImageLabel, e então animá-lo usando TweenService. Por exemplo, o seguinte exemplo de código cria um novo ScreenGui com um filho ImageLabel, remove a tela de carregamento padrão e depois TweenService faz a transição de fade e rotação dos elementos centrais até que o jogo carregue.

Tela de Carregamento Criada pelo 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 = "Carregando"
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

-- Remova a tela de carregamento padrão
ReplicatedFirst:RemoveDefaultLoadingScreen()

-- Inicie e comece a transição de fade
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()

-- Inicie e comece a transição de rotação
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)  -- Force a tela a aparecer por um número mínimo de segundos

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

loadingScreen:Destroy()