PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

Creating Custom Teleport Screens

Creating Custom Teleport Screens

Jul 03 2018, 10:59 AM PST 5 min

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

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

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

Showing a custom GUI

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 GuiObject/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

You can create a custom loading screen by putting LocalScripts and GUI elements in ReplicatedFirst as seen in Articles/Custom Loading Screens. 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

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)
Tags:
  • gui
  • places