How To Create A Custom Loading Screen!

Introduction
Hello! I am AA_WACK, this is my first tutorial!
Recently I have learned how to create a custom loading screen to my game, and I would like to share it with you.
Creating a custom loading screen is something that can set your game a part of other games.
People don’t like to stare at a black screen while their game loads, they want something interesting. The loading screen is the first thing people see when they come into your game, so you want to make a good and lasting impression.

We will go over the following:

  • How to remove the default loading screen.
  • Creating the GUI/Animations
  • Editing, Organizing, and Finalizing.

I learned all of this from this AlvinBlox video, you may find this helpful as well.

Open up a Local Script in Replicated First.
Let’s get started!

Removing the Default
To create a custom loading screen, you have to remove the default loading screen first.
In your local script, type in this one line of code:

game.ReplicatedFirst:RemoveDefaultLoadingScreen()

This simple, one line of code will remove the default loading screen. Keep in mind that it may play for just a second before your custom loading screen comes in. This is normal, don’t worry about it.

Creating the GUI/Animations
You are going to want to have a good design when it comes to your loading screen GUI.
Here are some tips:

  • Keep it simple. The simpler, the more pleasing it is to the eyes.
  • Use opposite and simple colors, such as black and white. Just about every color goes on white, so I like to make a white background usually and I recommend you do as well.
  • A lot of times, it is a good idea to have your loading screen represent your game. Maybe you have a police game. You can add some flashing police lights on the loading screen (nothing too crazy).

As far as animations go, it depends on what you would like. Generally you would use TweenService for that, but you could code a loop to do something as well.

For example: If you wanted to make a text label that said “Loading.” and then went to “Loading…”, then “Loading…” and then starts over again. You would likely use a loop to change the text property of the TextLabel.
If you wanted to have your logo fade in or something like that, you would likely use TweenService. I have not yet completely mastered TweenService, but there are some tutorials. Such as this AlvinBlox video and there is an API Reference page in Developer Hub linked here.

Make sure IgnoreGuiInset is turned to true for the ScreenGUI.

Once you are finished and like the design of your loading screen, make the ScreenGUI’s parent to equal the Local Script in Replicated First that we created earlier.
Name the ScreenGUI “LoadingScreen”.

Ending and Finalizing
We aren’t done yet!
We have some more coding to do before we are done.

Go into your Local Script and type in the following code under where you deleted the default loading screen:

local PlayerGUI = game:GetService("Players").LocalPlayer:WaitForChild("PlayerGui")
 
local GUI = script.LoadingScreen:Clone()
GUI.Parent = PlayerGUI

repeat wait(1) until game:IsLoaded()
wait(5)

GUI:Destroy()

Here is what this code does:
It finds the player GUI instance of the player in the game. Then, it creates a clone of our loading screen and parents it to the player’s GUIs. This will make it appear on the player’s screen when they join.
Finally, it waits 1 second until the game is finished loading. I made this wait five seconds afterward so the player would have a chance to see it if it is a fast loading game. This is optional.
After that, is destroys the clone and the Loading Screen disappears.

Overview of Scripts and Organization
Here is what your Local Script should look like when it is complete:

game.ReplicatedFirst:RemoveDefaultLoadingScreen()

local PlayerGUI = game:GetService("Players").LocalPlayer:WaitForChild("PlayerGui")
 
local GUI = script.LoadingScreen:Clone()
GUI.Parent = PlayerGUI

repeat wait(1) until game:IsLoaded()
wait(5)

GUI:Destroy()

Here is how it should be organized in explorer:
Game > ReplicatedFirst > Local Script > LoadingScreen > (all of your other GUIs for your loading screen)

Conclusion
Thank you for reading this tutorial, I hope you enjoyed it and found it helpful.
If you have any questions, feel free to ask and I will do my best to respond.
Let me know below what you thought of my first tutorial on Developer Forum.
Have a great day and keep developing!

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

123 Likes

If you have any questions comments or concerns, please let me know over here!

24 Likes

Thank you for this valuable information! I’ll be sure to implement this.

10 Likes

Hi! Sorry if this is a stupid question (I’m a beginner dev) but what is the difference between Replicated Storage and Replicated First? Thank you for the tutorial by the way, I have been struggling with this lol

10 Likes

ReplicatedFirst contains items which are loaded when the client first connects to the server, whereas ReplicatedStorage may not be available instantly. This is why you use ReplicatedFirst for custom loading screens.

26 Likes

Very useful resource for the community , thank you!

5 Likes

And no, that question was not stupid. the Replicated services can be complicated and hard to learn about, so if you have any further questions about that, please ask! :+1:

13 Likes

Very nice, will definitely use this in the future.

6 Likes

Can you show an example of what this does?
Thanks
It looks pretty good, I would up my rating if it had that though

5 Likes

This is good, but i think instead of looping wait until game:IsLoaded(), im pretty sure you can just do

game.Loaded:Wait()

6 Likes

I have not tried that. However, that is a possibility.

1 Like

I have an example, but no specific way to show it yet. I will see what I can do.
Sorry about that!

1 Like

The event driven approach would be better to use, vs checking every second whether it loaded or not; it would also be faster since it’d be listening for the game to load, vs it taking a second after it would load. As @grif_0 mentioned, you could use the Loaded event in combination with the IsLoaded method to listen for when the game loads. For example

if (not game:IsLoaded()) then -- Has the game not loaded yet?
    print("Waiting for game to load..."); -- Output that it hasn't.
    game.Loaded:Wait(); -- Listen for when the game loads.
end
print("Game loaded!"); -- Output that the game loaded.

Aside from that, nice tutorial. :slight_smile:

15 Likes

I’m curious as to why you are repeating a wait(1) until the game is loaded? Seems like an extremely inefficient method, and you should be reviewing other methods and the more efficient methods before posting publicly to others.

Just some advice to keep in mind for next time! :smiley:

1 Like

My guess is that if you wanted to add a repeating animation to your loading screen, you would have to reapply the tweens every time they run out, rather then setting it up once and then waiting until the game loads.

1 Like

Thanks
I’m still a bit confused as to what this all means though

1 Like

How do I make it so the other gui’s in the game don’t appear before the loading screen finishes?

4 Likes

Maybe have them start out as not being Enabled, and the have a script constantly checking if Game.IsLoaded on the Client, and making them Enabled if it is.

1 Like

There are definitely other ways, but this is another way to make sure people see the loading screen for a little after it is loaded.
Also, you can use a tween after this, and that is what the example gives room for. Thanks for the reply!

2 Likes

Nice work! This is useful for the beginners!

2 Likes