How do i make a ACTUAL loading screen?

Help and Feedback Scripting Support
#1

Currently i have a loading screen that basically is just a wait(10) type of thing (its not actually that but you get the idea) How would i make a real loading screen that procedurally loads assets in with a asset counter?

If you have any information on this or any topics i can read about on this please let me know!

9 Likes
Feedback on loading screen and intro
#2

There are multiple tutorials on Youtube such as this one: How to Make a Loading Screen - Roblox Scripting Tutorial - YouTube

4 Likes
#3

This is the exact tutorial i followed it doesnt actually load assets in its basically just a glorified wait()

7 Likes
#4

https://developer.roblox.com/en-us/api-reference/function/ContentProvider/PreloadAsync

5 Likes
#5

I believe I have found a propper tutorial for asset loading screen.

19 Likes
(No errors) Loading screen stuck at 78.29046898638427%!
#6

Look into the replicated first code sample for a custom loadingscreen
https://developer.roblox.com/en-us/api-reference/class/ReplicatedFirst

3 Likes
#7

It’s actually very easy easy to do once you know what you are doing. There are several steps you need to do to get this to work.

  1. Disable default loading screen
  2. Replace with your own loading screen. The less assets/pictures and fonts it has the faster the loading screen will load. (I have seen some games take a while to load up on a bad internet connection)
  3. Preload using ContentProvider
  4. Wait for game to load
  5. Delete loading screen and init eveything else you want to do for the game.

Only assets need to be loaded when you join the game. This includes: Pictures, Audio, Videos, Meshes, Union(sorta). Data is also loaded but depending on that data it is sometimes streamed in if the player does not have enough RAM.(Best thing to do in this case is to wait for the game to load)

Remove the default loading screen with
game:GetService("ReplicatedFirst"):RemoveDefaultLoadingScreen()

ContentProvider includes a callback parameter which you can use to update the loading screen.

Here is an example:

ContentProvider:PreloadAsync(
	{game},
	function(asset: string,assetFetchStatus: Enum.AssetFetchStatus)
		print("Loading:",asset)
		print("Status:",assetFetchStatus.Name)
	end
)

Output:

 Loading: rbxasset://textures/ui/Settings/Help/AButtonDark.png
  Status: Success
  Loading: rbxasset://textures/ui/Scroll/scroll-bottom.png
  Status: Success
  Loading: rbxasset://textures/ui/Vehicle/SpeedBarBKG.png
  Status: Success
  Loading: rbxasset://textures/ui/ErrorPrompt/ShimmerOverlay.png
  Status: Success
  Loading: rbxassetid://4965945816
  Status: Success
  Loading: rbxasset://textures/ui/Keyboard/key_selection_9slice.png
  Status: Success
  Loading: rbxasset://textures/ui/Settings/Help/BButtonDark.png
  Status: Success
  Loading: rbxasset://textures/ui/Scroll/scroll-top.png
  Status: Success
  Loading: rbxasset://textures/ui/Scroll/scroll-middle.png
  Status: Success
  Loading: rbxasset://textures/ui/Settings/Help/XButtonDark.png
  Status: Success
  Loading: rbxasset://textures/ui/ErrorPrompt/PrimaryButton.png
  Status: Success
  Loading: rbxasset://textures/ui/LuaApp/graphic/shimmer_darkTheme.png
  Status: Success
  Loading: rbxasset://textures/blackBkg_round.png
  Status: Success
  Loading: rbxasset://textures/loading/cancelButton.png
  Status: Success
  Loading: rbxasset://textures/ui/Vehicle/SpeedBar.png
  Status: Success
  Loading: rbxasset://textures/ui/Vehicle/SpeedBarEmpty.png
  Status: Success
  Loading: rbxasset://textures/loading/robloxTilt.png
  Status: Success
  Loading: rbxthumb://type=GameIcon&id=1131304171&w=256&h=256
  Status: Success
  Loading: rbxasset://textures/ui/PurchasePrompt/LoadingBG.png
  Status: Success
  Loading: rbxasset://textures/ui/NetworkPause/no connection.png
  Status: Success

As you can see it loads in pictures, thumbnails too and even module scripts.

Side note: “rbxassetid://4965945816” is the ring for the loading screen I used. As you can see it does not get loaded instantly. So, if you want an instant loading screen try to not use pictures and just use UI elements.

After you will wait for eveything else to be streamed in. You can either do that by using the: Player.GamePlay Paused. (If you use streaming enabled)

Otherwise use

if not game:IsLoaded() then
	game.Loaded:Wait()
end

One last thing: If you want to know how to count the time it takes to load your game up you can use

local clock = os.clock()
-- Code
print(("Preloading complete, took %.2f seconds"):format(os.clock() - clock))]]

To check how fast your game loads

There are some more readables on Game Content

31 Likes
#8

Use ROBLOX’s content provider to preload all of the assets to be used in your game.

1 Like
#9

Alright. it works but not really. when i tried it put alone it worked perfectly i really loved it, but when another player joined he couldn’t load the game entirely it was always getting stuck. for example it only reached 56/2035 and thats all, is there a fix for it?

#11

May I see your code? I was able to fix mine so maybe I can help you

1 Like
#12

Just use IsLoaded()

Here is the function

repeat
wait()
until game:IsLoaded()

Edit: i just found out that this topic already has IsLoaded() function, apologizing

3 Likes
#13

instead of preloading whole game i recommend preloading only the replicated storage or server storage (where the stuff like animations or audio is stored)

1 Like
#14

This video does a great job explaining every part of a loading screen and the back end of everything: https://www.youtube.com/watch?v=tEBmWVzYtRs

1 Like
#15

Video no longer available. Could you please paste the script here if it’s still possible?

1 Like