Creating Custom Loading Screens in Roblox

oh this game has a loading screen that's pretty cool oh wait a minute I just saw a move but now it's stuck at analytics service why is it stuck here is it going to move at all or is it just going to freeze and oh okay never mind it worked okay uh it just took a little bit of time but that okay I was a little bit worried there I thought it was just going to break all of a sudden and not allow me to join into the game which would have sucked but it looks like things worked out on its own okay but what you just saw there was a loading screen and I think you know what a loading screen is it basically showed shows uh how much progress that it takes for a Roblox game to load before you actually jump into the game and play it's a very neat feature to have it makes your game look more professional and you're able to add these custom loading screens into your own game so that so that you can load what you choose to load into the game before anything else so this tutorial is going to be about loading screens but more importantly it's going to be about replicated first because this is the service that we're going to be using to make these loing screens and I need to be able to explain to you how all the stuff works so with that being said let's go and go straight into the video all right let's think about this for a minute I'm going to try and explain the concept of loading things into a game before anything else and this is being done through a container that I've actually not talked about on this channel yet and that is called replicated first so if you were to basically just go into the Explorer then you can see on the right side that we have replicated storage which we have used in the past and I think you know what replicated storage is it it basically allows us to contain assets that we can access either by the server or the client uh anytime throughout the game so this can be things like module scripts it can be things like remote events remote functions that needs to be accessed by both the server and the client so it acts as a storage container for that but now we have something called replicated first which I have not talked about on this channel yet and so I think it's important to know uh the importance of replicated first and why this is different from replicated storage so now that we have that taken care of I'm going to explain this entire concept um as a whole so when we are replicating stuff from uh from server and client boundaries we need to be able to use services or containers that allow us to do that sort of stuff like I just said replicated storage does that for us but replicated first also does that for us but in its own specific way I'm going to demonstrate what that is exactly right now so what we have going on here is replicated first obviously and then we have replicated storage which is going to be the second place of uh a container inside of a game that allows us to replicate assets across client server boundaries and so of course when we're dealing with the server and we're also dealing with the client when we use replicated storage um essentially this is a container that that we can use to have the server in client access to like I just mentioned but with replicated first what's interesting about replicated first is that this is basically used to replicate things uh onto the client uh at its first number one priority so anything that's contained inside of replicated first it's going to be replicated to any uh player that joins into the game first thing before anything else gets loaded into the game so basically if we were to load anything from the workspace anything from the uh server script service anything from starter GUI anything contained inside of replicated first is going to be replicated to the client first before anything else so you might ask what things would be useful to load into the game before anything else well it's as I showed you in the beginning of this video loading screens are very good for loading stuff into the game first thing before anything else and the reason behind this is because when we we try to load assets into the game we don't want to join into the game and then see these assets being loaded into the game um before anything else what we want is a loading screen to basically show up in our face so that we don't see everything else that's being loaded in afterwards but instead we just see the loading screen because this is the first thing that was loaded in to the client and so uh another thing that's useful with replicated first is that we can also load things like uh pre-loaded app assets into replicated first so I actually should have put this in first here with pre-loaded assets because this is like a dictionary full of assets that we can load into the game before anything else so pre-loaded assets what are these pre-loaded assets are basically things that allow us to load stuff into the game before anything else like I just said so this can be things like loading screens it could even be things like sounds it could even be things like decals over here or just any sort of asset really it doesn't really matter too much of how you um see it it's basically just any asset that you want to load into the client first before anything else into the game and so comparing preloaded assets we can compare pre-loaded assets to Shared assets because shared assets can be used um to be accessed by the server and the client in replicated storage and things that are shared are things like module scripts and things like remote events and so these are what's being shared across the client in the server through the shared assets inside of replicated storage but for replicated first we are essentially loading things uh to the client before uh the player joins into the game and before anything else is being loaded uh into um the game so that is essentially the difference between replicated first and replicated storage I think this will make more sense once we go into the game and actually incorporate this um inside of Roblox studio so with that being said let's go ahead and get straight into implementing replicated first inside of Roblox studio now that we understand it let's Implement replicated first inside of Roblox and we're actually going to jump straight into creating a custom loading screen um for uh a good part of this tutorial so obviously we know what a loading screen is it's basically a GUI that shows up on our screen the first thing uh when we load into the game and it's going to load all the assets we need before we allow the player to play the game that they're playing and so replicated first is a great way for us to do this because we want to load the loading screen before loading anything else into the game for the client and that's one of the biggest reasons to use replica first is to create a custom loading screen so with that being said let's go ahead and create one so on the right side of the screen in starter GOI I'm going to hit the plus sign and I'm going to insert a screen GUI like this I'm going to rename this to loading screen and then I'm going to hit the plus sign again and I'm going to create a frame so this Frame is going to cover the entire screen so I'm going to make the size with uh offsets 1 and one for the X and Y so it's going to be 1 comma 0 comma 1 comma 0 like this so it's going to cover the entire screen and I'm going to change the background color three uh from white to some sort of gray like this going to hit okay and I'm going to hit the plus sign again I'm going to to insert a text label and I'm going to move this uh alongside here in the middle I'm going to scale this just a little bit like this um move it in the center like so okay and I'm going to go down I'm going to hit text scaled equal to true and then I'm going to change the background transparency to one so that we don't see the background and then finally I'm going to change the text color to white like this okay so now that we have this um I'm going to now add a loading bar to this as well so that we can visually see how much progress is being made in terms of loading the assets so inside of the frame I'm going to hit the plus sign uh insert another frame like this and I'm going to rename this to loading bar then I'm going to move this down here scale it like this I'm going to make it fairly sizable like probably about this big and then I'm going to move it to the center once again like this and now we have a loading bar that goes right below the text like that um so this is going to act as the frame of the loading bar but on top of it we need to add the actual bar itself so I'm actually going to change the background color of this to a really dark gray like probably like almost black like this going to hit okay and inside of the loading bar I'm going to insert another text label like this and I'm going to set the size of this to be exactly the same size of this bar so it's going to be 1 0 1 0 like this again I'm going to uh not have any text for this text label like this and then what I'm going to do now is change the background color of this to let's say some sort of green like this uh and then I'm actually going to change the size of this instead of 1 to0 1 0 I'm actually going to change the size of this to zero for the X scale so that um it's going to start at the very beginning here so once we continuously load stuff it's going to f fill up the progress bar until it reaches the very end of it so that's essentially what this is going to do um and finally I'm going to rename this text label to just simply bar like that so now we have the basics of our um loading screen done now it's a matter of incorporating a local script so that we can actually um make this loading bar functional and so like I mentioned for this loading screen the best place to put this is going to be inside of replicator first so what we need to do essentially is create a local script so that we can take this Frame and then put it inside of the player's um player GUI and so we can have the loading screen be functional uh for that reason so on replicated first we're going to hit the plus sign and we're going to insert a local script make sure this is a local script and not a normal script and I'm going to take this loading screen and I'm actually going to drag it into the local script like this okay and so now what we're going to do is make a bunch of references so I'm going to delete this here so there's going to be a few things we need to do first the first thing is going to be making our um references to the services that we need so we need players and we need replicated first so we're going to say local players equals game colon get service open and close parenthesis players like this and then replicated first so replicated first equals game get service uh replicated first like that okay now now here's something important we have to do so when we load into any Roblox game Roblox already has a default loading screen so in order for us to make our own custom loading screen we need to disable roblox's default loading screen that way we can add our own loading screen to replace roblox's default loading screen and we can do this using uh replicated first so what we can do is say replicated first colon remove default loading screen like this open close parentheses it's it's as simple as this this is all we need to do so that now instead of roblox's loading screen we're going to be replacing that with our own loading screen so that's going to be the important step that we have to take here all right and now that we have this we need to make reference to our player and also the loading screen um for that player so what we're going to do is drop two lines we're going to say local player equals players. local player like this and and then we're going to make reference to their player GUI as well so we're going to say local player GUI equals player colon weight for Child open close parentheses player GUI like this and so now what we need to do is make reference to our loading screen and keep in mind this local script is going to be local to the player that joins into the game and since we only have one loading screen we need to basically clone this loading screen and put it inside of the player's player GUI as soon as they load into the game so this is essentially what we're going to do we're going to say local screen GUI or we could even just say uh loading screen so loading screen equals script colon wait for Child open close parenthesis loading screen colon clone so we're actually going to take this loading screen we're going to clone it and then set the parent of this loading screen to the player GUI so we're going to say loading screen parent equals player GUI like this so now the player has their own loading screen whenever they join into the game and so what we're going to do now is make reference to uh the text label and the frame that we need uh in order to update uh the bar and the text and things like that so what we're going to do is say local uh frame equals loading screen wait for child frame and then we're going to make two references so the first one is going to be uh the loading text text so loading text is going to be equal to frame wait for child text label like this and then uh we're going to make reference to the bar as well so we're going to set this equal to frame wait for child loading bar wait for child bar like this so we now have all of our references that we need and now let's get into the functionality of pre-loading assets into the game for right now we can just make this a very basic loading screen by basically um having a task do weight statement for about maybe like 5 seconds or so until we quote unquote load into the game and then we should be able to uh destroy this loading screen once the game has been loaded in so what we can do down here is basically say task. wait for about 5 seconds and then down here we're going to say uh loading text. text equals loading complete uh just like that and then we're going to set the size of the bar so bar. size equals udm 2 so it's going to take in four values using uh the udm 2 Constructor so udm 2. new uh it's going to be 1 0 1 and then zero just like this so once we have this taken care of then what should end up happening is that once we uh we're actually going to add add another weight statement here so task. waight for about 1 second so that we can see this change let's actually make it 2 seconds and then let's destroy the loading screen so loading screen. destroy just like this and that should basically be the end of our script right there so once we go into the game hit test hit play then what should happen is uh we're going to be loaded into the game uh oh actually uh there's a little bit of space up there so there's actually something else we need to check off in the loading screen uh screen GUI and that is ignore GUI inset um if you don't know what this is then you should go back and watch uh my GUI tutorial guide on um that but now that we have this taken care of it basically covers the entire screen and once we wait for about 5 seconds it's going to say the loading has been complete uh the bar went full um all the way to the right side and then uh it deleted the GUI uh loading screen now obviously this isn't how we want to actually have the loading screen we want to have actual assets being loaded into the game in real time before we finish the loading screen and have the player um play the game like they um want to and things like that so I'm going to show you how we're going to be able to do this um and it's by using a service called content provider which I'm going to show you what that is in just a little bit okay so we need a way to be able to determine how we can preload certain assets into the game and be able to load each individual bit of asset set so that we can see in the progress bar that you know this thing has loaded and then now this thing is loaded and then now this thing is loaded until we reach all the way till the end once we go through all the assets that we want to uh load before the player gets to play the game and so that is basically achieved through a service called content provider and the purpose of content provider is to basically load assets that we give it um to be loaded in before anything else into the game and like I mentioned replicated first does this job extremely well because it purposefully loads uh everything and replicates it to the client before anything else inside of the game so now that we understand that um what assets do we want to load in exactly well to think of what assets we can load we can basically just take all the contents that are within the game so basically anything that has to do with workspace players lighting uh material service just like everything here like anything that's contained inside of the game we can basically load everything that's within each of these uh containers and so everything here is basically treated as an asset and so we can put this inside of a table and then throw it into content providers so that we can load it in one by one and so I'm going to show you what this looks like inside of our script when we modify it so let's go back into our script and what we're going to do at the top is make reference to uh content provider so it's going to look like this local content provider equals equals game colon get service open and close parentheses content provider like this so now that we have the content provider service what we need to do is figure out what our assets are and like I mentioned before our assets are basically just going to be all of these containers that are within the game so the way this is going to look is we're just going to say local assets equals game colon get children open and close parentheses so this return returns an array of all of these different containers and so when we go through each of them we're going to go through each one of these containers one by one to load everything that's contained within each one before moving on to the next one so since assets is a uh table what we need to do is Loop through all of the contents that are inside of here all of these containers so I'm going to uh disable this task. wa for 5 seconds since this is like basically a fake timer for a loading screen and instead incorporate the real deal so what we're going to do is make a for Loop by saying for index comma asset in pairs open close parentheses assets do so basically what we're going to do is say that we have an index for every single uh asset that we have loaded into the game and then we have the asset itself which is going to be the container so what we're going to do now is just say content provider colon preload async like this open to close parenthesis and what we're going to do is pass in uh the current asset that we are going to load and it's basically going to be a table like this so we're going to say open and close hard brackets asset so it's important to put in the open and close hard brackets when we're specifying what asset we want to load in and it's going to be each container that's within the Explorer so once we have this taken care of um then what's going to happen is basically it's going to Loop through every single asset and then it's going to finish loading and then it's basically going to be done but now we need to visually represent this so that we actually know that progress is being made in the loading screen so the first thing we're going to do is basically change the text to say loading text. text equals uh open and close uh quotes we're going to say loading uh and then we're going to concatenate this with uh the name of the asset so asset. name so the asset's basically going to be workspace players and things like that and then we're going to concatenate this again with three dots just like this and so now we know uh exactly which is being loaded in at this specific point in the loading bar so now down here what we're going to do is simply uh change the progress or the size of the loading bar to fit with uh the progress of the actual um assets that are being loaded so what we're going to do is note down the progress using the index variable and also uh with however many assets are within um the assets um dictionary or folder or table whatever you want to call it so we're going to make a variable by call by saying local progress equals index divided by uh the number of assets that are within the assets table so it's basically going to be like this so essentially if we are at the first second third fourth or fifth part of the Explorer so let's say we are in players this is going to be the second index and we're going to divide this by um the number of assets that are within here so basically everything here the number of that take that and use the index to divide by that and that's what's going to get us the scale size of the bar and I hope like you're able to sort of understand um like where this calculation came from because of it so now what we're going to do is change the size of the loading bar by saying bar. size equals udm 2. new open and close parentheses oh and I misspelled udm 2 it should be like this we're going to say progress for the X scale 0 1 and then finally zero so this is basically everything we need in terms of updating our loading screen and to properly load stuff into the game once we do this so once we go into the game hit test and hit play then what should happen is we should see a loading screen and and then it's going to load everything into the game before um it decides to destroy the loading screen and then finally get the player inside of the game uh for it to actually start so this is a real loading screen it's not a loading screen where I basically have a fake timer and then it just loads the player into the game even though the stuff was loaded in like a long time ago like this is a real loading screen and so now that this has basically been taken care of this is essentially how we create a loading screen using replicated first and using content provider and so I hope that you were able to gain some insight into uh using replicated first how loading screens are done and when assets are being loaded into the game first before anything else inside of the game so I hope this tutorial has given you great Insight when it comes to that all right and so to end off this video I'm going to give you a a tiny modification challenge that you can try on your own so if you remember at the start of this video when I showed you the initial loading bar it showed the bar changing in size but out of very smooth rate it wasn't just fixated like I showed you here with the loading bar that we created and it also changed color to Yellow but it changed the color in a very smooth way as well and a lot of that is used using tween service so what I want you to do is go into the script and basically where I commented stuff out where it's like you can Define tween service you can tween the bar and you can tween the the color change I want you to try and do these three things um before um you continue with whatever you're going to watch uh next so this is your challenge for today if you can do this then you have a great loading screen that you can use for your own game so with that being said that's basically going to be it for this video now if you need a refresher on tween service I will link that video for you right here to watch so that you can use this to help you with this challenge so go and watch that video right now and with that being said I will see you in the next episode take care

oh this game has a loading screen that&#39;s pretty cool oh wait a minute I just saw a move but now it&#39;s stuck at analytics service why is it stuck here is it going to move at all or is it just going to freeze and oh okay never mind it worked okay uh it just took a little bit of time but that okay I was a little bit worried there I thought it was just going to break all of a sudden and not allow me to join into the game which would have sucked but it looks like things worked out on its own okay but what you just saw there was a loading screen and I think you know what a loading screen is it basically showed shows uh how much progress that it takes for a Roblox game to load before you actually jump into the game and play it&#39;s a very neat feature to have it makes your game look more professional and you&#39;re able to add these custom loading screens into your own game so that so that you can load what you choose to load into the game before anything else so this tutorial is going to be about loading screens but more importantly it&#39;s going to be about replicated first because this is the service that we&#39;re going to be using to make these loing screens and I need to be able to explain to you how all the stuff works so with that being said let&#39;s go and go straight into the video all right let&#39;s think about this for a minute I&#39;m going to try and explain the concept of loading things into a game before anything else and this is being done through a container that I&#39;ve actually not talked about on this channel yet and that is called replicated first so if you were to basically just go into the Explorer then you can see on the right side that we have replicated storage which we have used in the past and I think you know what replicated storage is it it basically allows us to contain assets that we can access either by the server or the client uh anytime throughout the game so this can be things like module scripts it can be things like remote events remote functions that needs to be accessed by both the server and the client so it acts as a storage container for that but now we have something called replicated first which I have not talked about on this channel yet and so I think it&#39;s important to know uh the importance of replicated first and why this is different from replicated storage so now that we have that taken care of I&#39;m going to explain this entire concept um as a whole so when we are replicating stuff from uh from server and client boundaries we need to be able to use services or containers that allow us to do that sort of stuff like I just said replicated storage does that for us but replicated first also does that for us but in its own specific way I&#39;m going to demonstrate what that is exactly right now so what we have going on here is replicated first obviously and then we have replicated storage which is going to be the second place of uh a container inside of a game that allows us to replicate assets across client server boundaries and so of course when we&#39;re dealing with the server and we&#39;re also dealing with the client when we use replicated storage um essentially this is a container that that we can use to have the server in client access to like I just mentioned but with replicated first what&#39;s interesting about replicated first is that this is basically used to replicate things uh onto the client uh at its first number one priority so anything that&#39;s contained inside of replicated first it&#39;s going to be replicated to any uh player that joins into the game first thing before anything else gets loaded into the game so basically if we were to load anything from the workspace anything from the uh server script service anything from starter GUI anything contained inside of replicated first is going to be replicated to the client first before anything else so you might ask what things would be useful to load into the game before anything else well it&#39;s as I showed you in the beginning of this video loading screens are very good for loading stuff into the game first thing before anything else and the reason behind this is because when we we try to load assets into the game we don&#39;t want to join into the game and then see these assets being loaded into the game um before anything else what we want is a loading screen to basically show up in our face so that we don&#39;t see everything else that&#39;s being loaded in afterwards but instead we just see the loading screen because this is the first thing that was loaded in to the client and so uh another thing that&#39;s useful with replicated first is that we can also load things like uh pre-loaded app assets into replicated first so I actually should have put this in first here with pre-loaded assets because this is like a dictionary full of assets that we can load into the game before anything else so pre-loaded assets what are these pre-loaded assets are basically things that allow us to load stuff into the game before anything else like I just said so this can be things like loading screens it could even be things like sounds it could even be things like decals over here or just any sort of asset really it doesn&#39;t really matter too much of how you um see it it&#39;s basically just any asset that you want to load into the client first before anything else into the game and so comparing preloaded assets we can compare pre-loaded assets to Shared assets because shared assets can be used um to be accessed by the server and the client in replicated storage and things that are shared are things like module scripts and things like remote events and so these are what&#39;s being shared across the client in the server through the shared assets inside of replicated storage but for replicated first we are essentially loading things uh to the client before uh the player joins into the game and before anything else is being loaded uh into um the game so that is essentially the difference between replicated first and replicated storage I think this will make more sense once we go into the game and actually incorporate this um inside of Roblox studio so with that being said let&#39;s go ahead and get straight into implementing replicated first inside of Roblox studio now that we understand it let&#39;s Implement replicated first inside of Roblox and we&#39;re actually going to jump straight into creating a custom loading screen um for uh a good part of this tutorial so obviously we know what a loading screen is it&#39;s basically a GUI that shows up on our screen the first thing uh when we load into the game and it&#39;s going to load all the assets we need before we allow the player to play the game that they&#39;re playing and so replicated first is a great way for us to do this because we want to load the loading screen before loading anything else into the game for the client and that&#39;s one of the biggest reasons to use replica first is to create a custom loading screen so with that being said let&#39;s go ahead and create one so on the right side of the screen in starter GOI I&#39;m going to hit the plus sign and I&#39;m going to insert a screen GUI like this I&#39;m going to rename this to loading screen and then I&#39;m going to hit the plus sign again and I&#39;m going to create a frame so this Frame is going to cover the entire screen so I&#39;m going to make the size with uh offsets 1 and one for the X and Y so it&#39;s going to be 1 comma 0 comma 1 comma 0 like this so it&#39;s going to cover the entire screen and I&#39;m going to change the background color three uh from white to some sort of gray like this going to hit okay and I&#39;m going to hit the plus sign again I&#39;m going to to insert a text label and I&#39;m going to move this uh alongside here in the middle I&#39;m going to scale this just a little bit like this um move it in the center like so okay and I&#39;m going to go down I&#39;m going to hit text scaled equal to true and then I&#39;m going to change the background transparency to one so that we don&#39;t see the background and then finally I&#39;m going to change the text color to white like this okay so now that we have this um I&#39;m going to now add a loading bar to this as well so that we can visually see how much progress is being made in terms of loading the assets so inside of the frame I&#39;m going to hit the plus sign uh insert another frame like this and I&#39;m going to rename this to loading bar then I&#39;m going to move this down here scale it like this I&#39;m going to make it fairly sizable like probably about this big and then I&#39;m going to move it to the center once again like this and now we have a loading bar that goes right below the text like that um so this is going to act as the frame of the loading bar but on top of it we need to add the actual bar itself so I&#39;m actually going to change the background color of this to a really dark gray like probably like almost black like this going to hit okay and inside of the loading bar I&#39;m going to insert another text label like this and I&#39;m going to set the size of this to be exactly the same size of this bar so it&#39;s going to be 1 0 1 0 like this again I&#39;m going to uh not have any text for this text label like this and then what I&#39;m going to do now is change the background color of this to let&#39;s say some sort of green like this uh and then I&#39;m actually going to change the size of this instead of 1 to0 1 0 I&#39;m actually going to change the size of this to zero for the X scale so that um it&#39;s going to start at the very beginning here so once we continuously load stuff it&#39;s going to f fill up the progress bar until it reaches the very end of it so that&#39;s essentially what this is going to do um and finally I&#39;m going to rename this text label to just simply bar like that so now we have the basics of our um loading screen done now it&#39;s a matter of incorporating a local script so that we can actually um make this loading bar functional and so like I mentioned for this loading screen the best place to put this is going to be inside of replicator first so what we need to do essentially is create a local script so that we can take this Frame and then put it inside of the player&#39;s um player GUI and so we can have the loading screen be functional uh for that reason so on replicated first we&#39;re going to hit the plus sign and we&#39;re going to insert a local script make sure this is a local script and not a normal script and I&#39;m going to take this loading screen and I&#39;m actually going to drag it into the local script like this okay and so now what we&#39;re going to do is make a bunch of references so I&#39;m going to delete this here so there&#39;s going to be a few things we need to do first the first thing is going to be making our um references to the services that we need so we need players and we need replicated first so we&#39;re going to say local players equals game colon get service open and close parenthesis players like this and then replicated first so replicated first equals game get service uh replicated first like that okay now now here&#39;s something important we have to do so when we load into any Roblox game Roblox already has a default loading screen so in order for us to make our own custom loading screen we need to disable roblox&#39;s default loading screen that way we can add our own loading screen to replace roblox&#39;s default loading screen and we can do this using uh replicated first so what we can do is say replicated first colon remove default loading screen like this open close parentheses it&#39;s it&#39;s as simple as this this is all we need to do so that now instead of roblox&#39;s loading screen we&#39;re going to be replacing that with our own loading screen so that&#39;s going to be the important step that we have to take here all right and now that we have this we need to make reference to our player and also the loading screen um for that player so what we&#39;re going to do is drop two lines we&#39;re going to say local player equals players. local player like this and and then we&#39;re going to make reference to their player GUI as well so we&#39;re going to say local player GUI equals player colon weight for Child open close parentheses player GUI like this and so now what we need to do is make reference to our loading screen and keep in mind this local script is going to be local to the player that joins into the game and since we only have one loading screen we need to basically clone this loading screen and put it inside of the player&#39;s player GUI as soon as they load into the game so this is essentially what we&#39;re going to do we&#39;re going to say local screen GUI or we could even just say uh loading screen so loading screen equals script colon wait for Child open close parenthesis loading screen colon clone so we&#39;re actually going to take this loading screen we&#39;re going to clone it and then set the parent of this loading screen to the player GUI so we&#39;re going to say loading screen parent equals player GUI like this so now the player has their own loading screen whenever they join into the game and so what we&#39;re going to do now is make reference to uh the text label and the frame that we need uh in order to update uh the bar and the text and things like that so what we&#39;re going to do is say local uh frame equals loading screen wait for child frame and then we&#39;re going to make two references so the first one is going to be uh the loading text text so loading text is going to be equal to frame wait for child text label like this and then uh we&#39;re going to make reference to the bar as well so we&#39;re going to set this equal to frame wait for child loading bar wait for child bar like this so we now have all of our references that we need and now let&#39;s get into the functionality of pre-loading assets into the game for right now we can just make this a very basic loading screen by basically um having a task do weight statement for about maybe like 5 seconds or so until we quote unquote load into the game and then we should be able to uh destroy this loading screen once the game has been loaded in so what we can do down here is basically say task. wait for about 5 seconds and then down here we&#39;re going to say uh loading text. text equals loading complete uh just like that and then we&#39;re going to set the size of the bar so bar. size equals udm 2 so it&#39;s going to take in four values using uh the udm 2 Constructor so udm 2. new uh it&#39;s going to be 1 0 1 and then zero just like this so once we have this taken care of then what should end up happening is that once we uh we&#39;re actually going to add add another weight statement here so task. waight for about 1 second so that we can see this change let&#39;s actually make it 2 seconds and then let&#39;s destroy the loading screen so loading screen. destroy just like this and that should basically be the end of our script right there so once we go into the game hit test hit play then what should happen is uh we&#39;re going to be loaded into the game uh oh actually uh there&#39;s a little bit of space up there so there&#39;s actually something else we need to check off in the loading screen uh screen GUI and that is ignore GUI inset um if you don&#39;t know what this is then you should go back and watch uh my GUI tutorial guide on um that but now that we have this taken care of it basically covers the entire screen and once we wait for about 5 seconds it&#39;s going to say the loading has been complete uh the bar went full um all the way to the right side and then uh it deleted the GUI uh loading screen now obviously this isn&#39;t how we want to actually have the loading screen we want to have actual assets being loaded into the game in real time before we finish the loading screen and have the player um play the game like they um want to and things like that so I&#39;m going to show you how we&#39;re going to be able to do this um and it&#39;s by using a service called content provider which I&#39;m going to show you what that is in just a little bit okay so we need a way to be able to determine how we can preload certain assets into the game and be able to load each individual bit of asset set so that we can see in the progress bar that you know this thing has loaded and then now this thing is loaded and then now this thing is loaded until we reach all the way till the end once we go through all the assets that we want to uh load before the player gets to play the game and so that is basically achieved through a service called content provider and the purpose of content provider is to basically load assets that we give it um to be loaded in before anything else into the game and like I mentioned replicated first does this job extremely well because it purposefully loads uh everything and replicates it to the client before anything else inside of the game so now that we understand that um what assets do we want to load in exactly well to think of what assets we can load we can basically just take all the contents that are within the game so basically anything that has to do with workspace players lighting uh material service just like everything here like anything that&#39;s contained inside of the game we can basically load everything that&#39;s within each of these uh containers and so everything here is basically treated as an asset and so we can put this inside of a table and then throw it into content providers so that we can load it in one by one and so I&#39;m going to show you what this looks like inside of our script when we modify it so let&#39;s go back into our script and what we&#39;re going to do at the top is make reference to uh content provider so it&#39;s going to look like this local content provider equals equals game colon get service open and close parentheses content provider like this so now that we have the content provider service what we need to do is figure out what our assets are and like I mentioned before our assets are basically just going to be all of these containers that are within the game so the way this is going to look is we&#39;re just going to say local assets equals game colon get children open and close parentheses so this return returns an array of all of these different containers and so when we go through each of them we&#39;re going to go through each one of these containers one by one to load everything that&#39;s contained within each one before moving on to the next one so since assets is a uh table what we need to do is Loop through all of the contents that are inside of here all of these containers so I&#39;m going to uh disable this task. wa for 5 seconds since this is like basically a fake timer for a loading screen and instead incorporate the real deal so what we&#39;re going to do is make a for Loop by saying for index comma asset in pairs open close parentheses assets do so basically what we&#39;re going to do is say that we have an index for every single uh asset that we have loaded into the game and then we have the asset itself which is going to be the container so what we&#39;re going to do now is just say content provider colon preload async like this open to close parenthesis and what we&#39;re going to do is pass in uh the current asset that we are going to load and it&#39;s basically going to be a table like this so we&#39;re going to say open and close hard brackets asset so it&#39;s important to put in the open and close hard brackets when we&#39;re specifying what asset we want to load in and it&#39;s going to be each container that&#39;s within the Explorer so once we have this taken care of um then what&#39;s going to happen is basically it&#39;s going to Loop through every single asset and then it&#39;s going to finish loading and then it&#39;s basically going to be done but now we need to visually represent this so that we actually know that progress is being made in the loading screen so the first thing we&#39;re going to do is basically change the text to say loading text. text equals uh open and close uh quotes we&#39;re going to say loading uh and then we&#39;re going to concatenate this with uh the name of the asset so asset. name so the asset&#39;s basically going to be workspace players and things like that and then we&#39;re going to concatenate this again with three dots just like this and so now we know uh exactly which is being loaded in at this specific point in the loading bar so now down here what we&#39;re going to do is simply uh change the progress or the size of the loading bar to fit with uh the progress of the actual um assets that are being loaded so what we&#39;re going to do is note down the progress using the index variable and also uh with however many assets are within um the assets um dictionary or folder or table whatever you want to call it so we&#39;re going to make a variable by call by saying local progress equals index divided by uh the number of assets that are within the assets table so it&#39;s basically going to be like this so essentially if we are at the first second third fourth or fifth part of the Explorer so let&#39;s say we are in players this is going to be the second index and we&#39;re going to divide this by um the number of assets that are within here so basically everything here the number of that take that and use the index to divide by that and that&#39;s what&#39;s going to get us the scale size of the bar and I hope like you&#39;re able to sort of understand um like where this calculation came from because of it so now what we&#39;re going to do is change the size of the loading bar by saying bar. size equals udm 2. new open and close parentheses oh and I misspelled udm 2 it should be like this we&#39;re going to say progress for the X scale 0 1 and then finally zero so this is basically everything we need in terms of updating our loading screen and to properly load stuff into the game once we do this so once we go into the game hit test and hit play then what should happen is we should see a loading screen and and then it&#39;s going to load everything into the game before um it decides to destroy the loading screen and then finally get the player inside of the game uh for it to actually start so this is a real loading screen it&#39;s not a loading screen where I basically have a fake timer and then it just loads the player into the game even though the stuff was loaded in like a long time ago like this is a real loading screen and so now that this has basically been taken care of this is essentially how we create a loading screen using replicated first and using content provider and so I hope that you were able to gain some insight into uh using replicated first how loading screens are done and when assets are being loaded into the game first before anything else inside of the game so I hope this tutorial has given you great Insight when it comes to that all right and so to end off this video I&#39;m going to give you a a tiny modification challenge that you can try on your own so if you remember at the start of this video when I showed you the initial loading bar it showed the bar changing in size but out of very smooth rate it wasn&#39;t just fixated like I showed you here with the loading bar that we created and it also changed color to Yellow but it changed the color in a very smooth way as well and a lot of that is used using tween service so what I want you to do is go into the script and basically where I commented stuff out where it&#39;s like you can Define tween service you can tween the bar and you can tween the the color change I want you to try and do these three things um before um you continue with whatever you&#39;re going to watch uh next so this is your challenge for today if you can do this then you have a great loading screen that you can use for your own game so with that being said that&#39;s basically going to be it for this video now if you need a refresher on tween service I will link that video for you right here to watch so that you can use this to help you with this challenge so go and watch that video right now and with that being said I will see you in the next episode take care

Transcript for:Creating Custom Loading Screens in Roblox

Transcript for:
Creating Custom Loading Screens in Roblox