Here's how to make a loading screen on Roblox.
You'll need to start by designing your loading screen.
You can design your loading screen in any way you see fit.
However, it is important to name the objects
exactly as shown.
The slightest misspelling can cause your code to break,
so it is important to double-check.
For the sake of time,
we are going to speed up the design of the user interface.
Feel free to pause at any time.
It is important to make sure that
the "ResetOnSpawn" property
for your screen UI is not ticked,
while the "IgnoreGuiInset" property should be ticked.
The loading bar size should also be
set to (0,0), (1,0)
so that it is hidden when a player first joins your game.
After you are satisfied with your design,
right-click on the screen UI object
and click "Insert Object,"
followed by "LocalScript."
A local script will allow you to write code
to make sure that your loading screen will function.
Double-click on your local script to start editing it.
Highlight everything inside
and delete it to start with a clean slate.
To keep this short,
we are going to speed through the writing of the code,
and then we'll break down what each part does.
You can find the code
in the description below to follow along.
The topmost section is
where it will store all your variables.
Variables are simply there to help you access
their contents more easily later on.
The next section is what will make your loading bar move.
The function called ResizeBar
will smoothly resize your loading screen
if you give it a number.
Then we are simply turning off all of the Roblox GUIs,
which include the chat, leaderboard, health bar, and more.
This is done to make sure
that your loading screen looks cleaner.
Afterwards, the loading screen is enabled
and the loading bar moves for the first 10%.
Next, we need to make sure to wait
for the player's avatar to load.
After their avatar loads,
the loading bar will move to 40%.
The final step is to wait
for any images and other assets to load.
This is done by using the ContentProvider service.
Once this is done,
the loading bar will finish up at 100%.
Lastly, the player is notified that the game has loaded,
and we will give them the default Roblox GUIs back.
The loading screen is then removed
so that the players can enjoy your game.
Finally, click "Play" to test out your loading screen.