Creating Custom Teleport Screens

Creating Custom Teleport Screens

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:

	-- Fire RemoteEvent
	-- Make loading screen visible
	loadingScreen.Visible = true
	-- Fade screen in
	for i = 1, 0, -.05 do
		loadingScreen.BackgroundTransparency = i
	loadingScreen.BackgroundTransparency = 0

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.

  • gui
  • places