The Fundamentals for a Loading Screen
Welcome Avatar! to Part 1 of the “The Fundamentals For ” series.
Payment Billing has officially resumed expect regular content production to resume for Substack
Let’s get right into today’s post, Many videos exist on Youtube that explain how to make a loading screen for Roblox, However after studying these videos it became clear to me that most of them were not real loading screens, but rather just used a “wait” image to load for a couple of seconds before just hiding the loading screen.
Obviously, this is not a real loading screen; which is why
I will be teaching you the fundamentals to create a
REAL loading screen in Roblox!
BUILDING KNOWLEDGE
Before I start off with the programming behind it, there are a couple of functions within the Roblox API I should teach you about:
STARTING OFF
Now that you are aware of the functions we will be using, we can combine them!
Obviously a loading screen will wait until all assets are loaded in, and all the time before that the player will not be able to interact with most of Roblox’ cores.
Only after the loading has been completed, will the user be able to
use and see the leaderboard, backpack, etc again.
Let’s start by adding this together.
local StarterGui = game:GetService('StarterGui')
local ContentProvider = game:GetService('ContentProvider')
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false) -- disables all gui cores
repeat task.wait() until ContentProvider.RequestQueueSize == 0
-- undo all the changes after all assets are loaded in
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false)
EXPANDING FROM THE BASICS
Now - I am aware that this is just code, and nothing visual. So if you want to actually make a loading bar that shows you how many assets are remaining, we will move on to using the “PreloadAsync” function. I will demonstrate below, where we have a folder in the workspace called “Assets” of which it’s children will need to be preloaded.
local StarterGui = game:GetService('StarterGui')
local ContentProvider = game:GetService('ContentProvider')
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false) -- disables all gui cores
local toPreload = workspace.Assets:GetChildren()
for i = 1, #toPreload do
warn('Loading', i, 'out of', #toPreload)
ContentProvider:PreloadAsync({toPreload[i]})
warn('Loaded', i, 'out of', #toPreload)
end
repeat task.wait() until ContentProvider.RequestQueueSize == 0
-- undo all the changes after all assets are loaded in
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false)
The difference here is that we loop through the Asset folder, create an array with it’s children; and preload it.
It’s necessary to do {toPreload[i]} , because PreloadAsync() only accepts arrays.
If you want to convert this to an actual UI loading bar, and you want to manipulate it’s size; I will list the formula below here.
The formula (where in my code amount is equal to i and totalAmount is equal to #toPreload):
UDim2.fromScale(amount/totalAmount, 1)
This is a free article. We are a niche research publication building an in-depth fundamental analysis and educational platform to give the Youth better odds against an economy and educational system that is against them. We teach you to think like Creatives should & real skills that can get you paid.
Our publication relies purely on content quality and word of mouth to grow, so we would appreciate if you could give this article a share.
In our paid substack, We dive deep into the expertise of these markets. Hundreds of readers trust us for our analysis & Information. No BS, just actionable content.
Join our community below.