Custom teleport UI

Roblox provides a message when a player is being teleported between instances. This GUI can be disabled in favor of a custom screen if you want. Adding your own custom GUI can make transitions between places in your game seem less obvious, thus providing a smoother experience for your players.

How to disable the default GUI[edit]

Disabling the default message is very simple. In either a Script or LocalScript set CustomizedTeleportUI to true:

game:GetService("TeleportService").CustomizedTeleportUI = true

Showing a custom GUI[edit]

Showing a GUI when a player is teleporting is also very simple. Simply move the GUI you want into the player's PlayerGui, or hide the GUI there before and make it appear using Visible. Feel free to include any kind of effects you want. For example, this code will fade in a solid black screen when a teleport button is clicked:

button.MouseButton1Click:connect(function()
	-- Fire RemoteEvent
	game:GetService("TeleportService"):Teleport(otherPlaceId)
 
	-- Make loading screen visible
	loadingScreen.Visible = true
 
	-- Fade screen in
	for i = 1, 0, -.05 do
		loadingScreen.BackgroundTransparency = i
		wait()
	end
	loadingScreen.BackgroundTransparency = 0
end)

Showing a custom GUI after teleport[edit]

You can create a custom loading screen by putting LocalScripts and GuiElements in ReplicatedFirst as seen in Custom loading screen. When a game loads through a teleport however, there is a small window where the default Roblox loading screen will show. To fill in this gap, all of the teleport functions in TeleportService allow a ScreenGui as an optional parameter which will be shown right away after the teleport.

local loadingScreen = Instance.new('ScreenGui', player.PlayerGui)
local loadingScreenFrame = Instance.new('Frame', loadingScreen)
loadingScreenFrame.Name = 'loadingScreenFrame'
loadingScreenFrame.BackgroundColor3 = Color3.new(0,0,0)
loadingScreenFrame.Size = UDim2.new(1,0,1,50)
loadingScreenFrame.Position = UDim2.new(0,0,0,-50)
loadingScreenFrame.Visible = false
 
TeleportService:Teleport(otherPlaceId, player, nil, loadingScreen)

The above code would create a black screen and then pass it along with the teleport call. When the new game loads, the black screen will show automatically for that player.

Simple Example[edit]

While there are no guidelines on how to manage your teleports, there are several recommended steps to take. If you are displaying a fullscreen image it may be desirable to hide the core gui. Depending on your game, you may also want to protect the player from damage using a method such as a ForceField. Lastly, and this is true if you are using a custom GUI for teleports or not, be prepared to handle the case where a teleport doesn't work! This will not happen very often, but it always pays to be careful.

-- LocalScript for Lobby place
 
-- Declare local variables for Roblox Services
local TeleportService = game:GetService('TeleportService')
local UserInputService = game:GetService('UserInputService')
local StarterGui = game.StarterGui
 
-- Declare local variables
local player = game.Players.LocalPlayer
local otherPlaceId = 277345328
local forceField = Instance.new('ForceField')
local teleportButton = script.Parent
 
-- Create loading screen to fade in and pass with teleport function
local loadingScreen = Instance.new('ScreenGui', player.PlayerGui)
local loadingScreenFrame = Instance.new('Frame', loadingScreen)
loadingScreenFrame.Name = 'loadingScreenFrame'
loadingScreenFrame.BackgroundColor3 = Color3.new(0,0,0)
loadingScreenFrame.Size = UDim2.new(1,0,1,50)
loadingScreenFrame.Position = UDim2.new(0,0,0,-50)
loadingScreenFrame.Visible = false
 
-- Hide default teleport GUI elements
TeleportService.CustomizedTeleportUI = true
 
-- Bind function to OnTeleport in case teleport fails
player.OnTeleport:connect(function(teleportState)
	if teleportState == Enum.TeleportState.Failed then
		-- Disable force field
		forceField.Parent = nil
 
		-- Hide teleport GUI and show teleport button
		loadingScreenFrame.BackgroundTransparency = 1
		loadingScreenFrame.Visible = false
		teleportButton.Visible = true
 
		-- Show Core GUI elements and mouse cursor
		StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, true)
		UserInputService.MouseIconEnabled = true		
	end
end)
 
-- Bind function to GUI button
teleportButton.MouseButton1Click:connect(function()
	-- Hide button, Core GUI, and mouse
	teleportButton.Visible = false
	StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false)	
	UserInputService.MouseIconEnabled = false	
 
	-- Activate force field to protect player during teleport
	forceField.Parent = player.Character	
 
	-- Show loading screen and fade it in
	loadingScreenFrame.Visible = true
	for i = 1, 0, -.05 do
		loadingScreenFrame.BackgroundTransparency = i
		wait()
	end
	loadingScreenFrame.BackgroundTransparency = 0
 
	-- Teleport player and pass the loading screen
	TeleportService:Teleport(otherPlaceId, player, nil, loadingScreen)
end)


-- Local script in other place
 
-- Declare local variables for Roblox Services
local TeleportService = game:GetService('TeleportService')
local UserInputService = game:GetService('UserInputService')
local StarterGui = game.StarterGui
 
-- Hide Core GUI and mouse
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false)	
UserInputService.MouseIconEnabled = false	
 
-- Bind function to teleport arrival
TeleportService.LocalPlayerArrivedFromTeleport:connect(function(loadingGui, data)
	-- Pause briefly to allow level to load	
	wait(2)	
 
	-- Fade out loading screen
	for i = 0, 1, .05 do
		loadingGui.loadingScreenFrame.BackgroundTransparency = i
		wait()
	end
	loadingGui.loadingScreenFrame.BackgroundTransparency = 1
 
	-- Show Core GUI and mouse
	game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, true)
	UserInputService.MouseIconEnabled = true	
end)