How to avoid teleport GUI flashing game first?

Help and Feedback Scripting Support
#1

Since I switched to using a custom teleport GUI, I get a very brief flash between teleporting where the screen isn’t covered by any loading screen and you can see the game. This did not happen until I started throwing over a custom UI via TeleportService. Both before and after, I had been using my own custom loading screen at startup.

See the video below. You will see a brief flash of the game when it’s faded out around 4-5 seconds in:

I don’t know if it’s of any use, but this is my teleportation code:

local customTeleGui = Instance.new("ScreenGui")
customTeleGui.IgnoreGuiInset = true
customTeleGui.ResetOnSpawn = false
local frame = Instance.new("Frame")
frame.Size = UDim2.new(1, 0, 1, 0)
frame.BackgroundColor3 = Color3.fromRGB(3, 33, 33)
frame.Parent = customTeleGui

TeleportService:TeleportToPrivateServer(MAIN_GAME_PLACE_ID, self.AccessCode, players, nil, teleData, customTeleGui)

When I remove the customTeleGui, the weird flash goes away. Anyone know why this is and how it can be resolved?

8 Likes
#2

sadly, I am pretty sure this is not possible. Because you are opening a whole new server privately, the client is unable to transfer over the GUI data until the client has entered the new server. The flash is the client connecting to the server through it’s websockets.

2 Likes
#3

Could be either internet or roblox.

1st it could be roblox loading other stuff in before loading the custom fade. I think I have seen this happend even with the default roblox loading.

2nd A solution I can recommend is have a another frame same as that one, be visible before publishing, so it doesn’t flash. And when the custom loading ui is happening you simply disable the frames visibility.

2 Likes
#4

Do you have anything in ReplicatedFirst for reparenting the teleport GUI after the teleport?

#5

@Discgolftaco231 (great name btw), yeah I guess it’s possible that Roblox has to transfer the data and that delay causes the flash. However, the flash completely voids the whole point of being able to transfer your own UI over teleportation. I guess maybe this is more of a bug then?

@DarkModule A frame of the same type is visible. This worked great when using the default loading screen.

@Dog2puppy It’s not being reparented. And the flash happens before the scripts there even run.

2 Likes
#6

Is this fixed by using a placeholder UI in the target place until the sent UI is loaded in?
E.G Each place you’re targetting has a full window black frame, removed whenever a new UI piece appears.

#7

Make sure to put the gui in replicated first, if that doesn’t work :man_shrugging: you probably can’t do much about it.

#8

It’s sent via TeleportService, so it doesn’t regard ReplicatedFirst stuff

1 Like
#9

Seamless transition GUIs are definitely possible. The reason you’re seeing the 1-frame flash occur could be for a number of reasons:

  1. You are not reparenting the teleport gui after the teleport (this must happen in ReplicatedFirst!).
  2. You are reparenting the gui, but are destroying it before your code in StarterPlayer has a chance to activate its own loading screen.

This is incorrect. If you do not reparent the custom teleport GUI to the player’s PlayerGui upon arrival, then Roblox will destroy the GUI when it thinks the game has loaded. This may happen before your game’s code can finish initializing and activate your loading screen, causing the 1 frame flash.

Now in order to get this right, here’s what you want to do:

In ReplicatedFirst, write some code that will immediately reparent the teleport gui to the player’s PlayerGui. Next, you’re going to want to wait for your code to finish initializing (in my case I’m waiting for AGF because I know once AGF has “started” it will have created its own loading screen). Finally, you can delete your custom teleport gui.

This is what my ReplicatedFirst code looks like:

local ReplicatedFirst = game:GetService("ReplicatedFirst")
local TeleportService = game:GetService("TeleportService")
local customLoadingScreen = TeleportService:GetArrivingTeleportGui()
local starsLoadingScreen = script:WaitForChild("LoadingScreen"):Clone()
local playerGui = player:WaitForChild("PlayerGui")

starsLoadingScreen.Parent = playerGui
	
if customLoadingScreen then
	customLoadingScreen.Parent = playerGui
	ReplicatedFirst:RemoveDefaultLoadingScreen()
	if _G.Aero then
		customLoadingScreen:Destroy()
	else
		repeat RunService.Heartbeat:Wait() until _G.Aero
		customLoadingScreen:Destroy()
	end
end

With this, I can 100% guarantee that the custom loading screen will be destroyed after my UI controller sets up the loading screen (although in this example I clone it directly in from ReplicatedFirst).

(Exclusive to AGF/Knit) I can be sure of this because my UI controller begins animating the proper loading screen within its Init method, not its Start method, so by the time the framework is exposed globally, the loading screen is guaranteed to be visible and animated.

Finally, here is an example of what a seamless teleport looks like (ironically, this example is for a remake of one of your old games):
https://streamable.com/0nh6e1

Hope this helps! I’d be happy to answer any other questions you have.

8 Likes
#10

Thanks, that did it. I wasn’t aware that you had to manually grab it and parent it. So @Dog2puppy you were right on that.

3 Likes