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
