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, nevermind. It worked. Okay. 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 shows 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 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 loading screens. And I need to be able to explain to you how all this 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 basically allows us to contain assets that we can access either by the server or the client 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 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 as a whole. So when we are replicating stuff 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. And 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 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, essentially this is a container that we can use to have the server and 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 onto the client at its first number one priority. So anything that's contained inside of replicated first, it's going to be replicated to any... a 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 server script service, anything from server 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 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 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 another thing that's useful with replicated first is that we can also load things like preloaded assets into replicated first. So I actually should have put this in first here with preloaded assets because this is like a dictionary full of assets that we can load into the game before anything else. So preloaded assets. What are these preloaded 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 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 preloaded assets to shared assets because shared assets can be used 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 and the server through the shared assets inside of replicated storage. but for replicated first, we are essentially loading things to the client before the player joins into the game and before anything else is being loaded into 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 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 for 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 first thing 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... 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 replicated first. It's 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 GUI, 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. 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 Offset 1 and 1 for the X and Y so it's going to be 1 comma 0 comma 1 comma 0 like this So it's gonna cover the entire screen and I'm going to change the background color 3 From white to some sort of gray like this gonna hit OK and I'm going to hit the plus sign again I'm going to insert a text label and I'm going to move this alongside here in the middle. I'm going to scale this just a little bit like this. 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. 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, insert another frame like this, and I'm going to rename this to loading bar. And 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. 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. Get hit. OK. 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 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. And then I'm actually going to change the size of this instead of 1 to 0, 1, 0. I'm actually going to change the size of this to 0 for the X scale so that it's going to start. at the very beginning here. So once we continuously load stuff, it's going to fill up the progress bar until it reaches the very end of it. So that's essentially what this is going to do. And finally, I'm going to rename this text label to just simply bar like that. So now we have the basics of our loading screen done. Now it's a matter of incorporating a local script so that we can actually 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 Replicative 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 GUI and so we can have the loading screen be functional for that reason. 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 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 parentheses, players like this, and then replicated first. So replicated first equals game get service, replicated first like that. Okay, 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 replicated first. So what we can do is say replicated first colon remove default loading screen like this, open and close parentheses. 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. Alright, and now that we have this, we need to make reference to our player and also the loading screen for that player. So what we're going to do is drop two lines, we're going to say local player equals players dot local player like this. 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, wait 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 loading screen so loading screen equals script colon wait for child open close parentheses 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 gonna say loading screen dot 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 the text label and the frame that we need in order to update the bar and the text and things like that. So what we're going to do is say local 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 the loading text. So loading text is going to be equal to frame, wait for child, text label, like this. And then 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 preloading assets into the game. For right now, we can just make this a very basic loading screen by basically having a task.wait statement for about maybe like five seconds or so until we quote unquote load into the game. And then we should be able to 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 five seconds. And then down here, we're going to say loading text dot text equals loading. complete. Just like that. And then we're going to set the size of the bar. So bar.size equals UDIM2. So it's going to take in four values using the UDIM2 constructor. So UDIM2.new, it's going to be 1, 0, 1, and then 0, just like this. So once we have this taken care of, then what should end up happening is that once we, we're actually going to add another parameter. wait statement here. So task.wait for about one second so that we can see this change. Let's actually make it two 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 we're going to be loaded into the game. Oh, actually, there's a little bit of space up there. So there's actually something else we need to check off in the loading screen, screen GUI. And that is ignore GUI inset. If you don't know what this is, then you should go back and watch my GUI tutorial guide on that. But now that we have this taken care of, it basically covers the entire screen. And once we wait for about five seconds, it's going to say the loading has been complete. The bar went full all the way to the right side, and then it deleted the GUI 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 play the game like they want to and things like that. So I'm going to show you how we're going to be able to do this. and it's by using a service called a 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 so that we can see in the progress bar that this thing has loaded and then now this thing is loaded and then now this thing is loaded until we reach all the way to the end once we go through all the assets that we want to 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 to be loaded in before anything else into the game. And like I mentioned, Replicate at First does this job extremely well because it purposefully loads 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 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 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 provider 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 content provider. So it's going to look like this local content provider 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 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 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 disable this task.waitForFiveSeconds 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 and close parentheses assets do so basically what we're going to do is say that we have an index for every single 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 and close parentheses 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 export so once we have this taken care of 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 gonna 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 dot text equals open and close quotes. We're going to say loading and then we're going to concatenate this. with 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 exactly which is being loaded in at this specific point in the loading bar. So now down here, what we're gonna do is simply change the progress or the size of the loading bar to fit with the progress of the actual assets that are being loaded. So what we're going to do is note down the progress using the index variable and also With however many assets are within the assets Dictionary or folder a table or whatever you want to call it So we're going to make a variable by call by saying local progress equals index divided by The number of assets that are within the assets table. So it's basically gonna 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 the number of assets that are within here. So basically everything here, the number of that, take that and use the index to divide it by that. And that's what's going to get us the scale size of the bar. And I hope you're able to sort of understand 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 udim2.new open and close parentheses, and I misspelled udim2, it should be like this. We're going to say progress for the x scale, zero, one, 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 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 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 at a 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 define tween service, you can tween the bar, you can tween the color change. I want you to try and do these three things before you continue with whatever you're going to watch 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'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, nevermind.

It worked. Okay. 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 shows 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 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 loading screens. And I need to be able to explain to you how all this 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 basically allows us to contain assets that we can access either by the server or the client 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 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 as a whole.

So when we are replicating stuff 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. And 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 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, essentially this is a container that we can use to have the server and 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 onto the client at its first number one priority.

So anything that's contained inside of replicated first, it's going to be replicated to any... a 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 server script service, anything from server 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 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 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 another thing that's useful with replicated first is that we can also load things like preloaded assets into replicated first. So I actually should have put this in first here with preloaded assets because this is like a dictionary full of assets that we can load into the game before anything else.

So preloaded assets. What are these preloaded 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 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 preloaded assets to shared assets because shared assets can be used 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 and the server through the shared assets inside of replicated storage. but for replicated first, we are essentially loading things to the client before the player joins into the game and before anything else is being loaded into 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 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 for 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 first thing 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...

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 replicated first. It's 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 GUI, 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. 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 Offset 1 and 1 for the X and Y so it's going to be 1 comma 0 comma 1 comma 0 like this So it's gonna cover the entire screen and I'm going to change the background color 3 From white to some sort of gray like this gonna hit OK and I'm going to hit the plus sign again I'm going to insert a text label and I'm going to move this alongside here in the middle. I'm going to scale this just a little bit like this.

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. 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, insert another frame like this, and I'm going to rename this to loading bar. And 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. 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. Get hit. OK.

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 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. And then I'm actually going to change the size of this instead of 1 to 0, 1, 0. I'm actually going to change the size of this to 0 for the X scale so that it's going to start.

at the very beginning here. So once we continuously load stuff, it's going to fill up the progress bar until it reaches the very end of it. So that's essentially what this is going to do. And finally, I'm going to rename this text label to just simply bar like that.

So now we have the basics of our loading screen done. Now it's a matter of incorporating a local script so that we can actually 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 Replicative 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 GUI and so we can have the loading screen be functional for that reason. 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 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 parentheses, players like this, and then replicated first.

So replicated first equals game get service, replicated first like that. Okay, 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 replicated first. So what we can do is say replicated first colon remove default loading screen like this, open and close parentheses. 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. Alright, and now that we have this, we need to make reference to our player and also the loading screen for that player. So what we're going to do is drop two lines, we're going to say local player equals players dot local player like this.

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, wait 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 loading screen so loading screen equals script colon wait for child open close parentheses 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 gonna say loading screen dot 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 the text label and the frame that we need in order to update the bar and the text and things like that. So what we're going to do is say local 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 the loading text.

So loading text is going to be equal to frame, wait for child, text label, like this. And then 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 preloading assets into the game. For right now, we can just make this a very basic loading screen by basically having a task.wait statement for about maybe like five seconds or so until we quote unquote load into the game. And then we should be able to 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 five seconds. And then down here, we're going to say loading text dot text equals loading. complete.

Just like that. And then we're going to set the size of the bar. So bar.size equals UDIM2. So it's going to take in four values using the UDIM2 constructor. So UDIM2.new, it's going to be 1, 0, 1, and then 0, just like this.

So once we have this taken care of, then what should end up happening is that once we, we're actually going to add another parameter. wait statement here. So task.wait for about one second so that we can see this change.

Let's actually make it two 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 we're going to be loaded into the game.

Oh, actually, there's a little bit of space up there. So there's actually something else we need to check off in the loading screen, screen GUI. And that is ignore GUI inset.

If you don't know what this is, then you should go back and watch my GUI tutorial guide on that. But now that we have this taken care of, it basically covers the entire screen. And once we wait for about five seconds, it's going to say the loading has been complete. The bar went full all the way to the right side, and then it deleted the GUI 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 play the game like they want to and things like that. So I'm going to show you how we're going to be able to do this.

and it's by using a service called a 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 so that we can see in the progress bar that this thing has loaded and then now this thing is loaded and then now this thing is loaded until we reach all the way to the end once we go through all the assets that we want to 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 to be loaded in before anything else into the game. And like I mentioned, Replicate at First does this job extremely well because it purposefully loads 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 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 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 provider 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 content provider.

So it's going to look like this local content provider 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 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 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 disable this task.waitForFiveSeconds 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 and close parentheses assets do so basically what we're going to do is say that we have an index for every single 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 and close parentheses 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 export so once we have this taken care of 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 gonna 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 dot text equals open and close quotes. We're going to say loading and then we're going to concatenate this. with 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 exactly which is being loaded in at this specific point in the loading bar.

So now down here, what we're gonna do is simply change the progress or the size of the loading bar to fit with the progress of the actual assets that are being loaded. So what we're going to do is note down the progress using the index variable and also With however many assets are within the assets Dictionary or folder a table or whatever you want to call it So we're going to make a variable by call by saying local progress equals index divided by The number of assets that are within the assets table. So it's basically gonna 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 the number of assets that are within here. So basically everything here, the number of that, take that and use the index to divide it by that.

And that's what's going to get us the scale size of the bar. And I hope you're able to sort of understand 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 udim2.new open and close parentheses, and I misspelled udim2, it should be like this. We're going to say progress for the x scale, zero, one, 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 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 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 at a 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 define tween service, you can tween the bar, you can tween the color change.

I want you to try and do these three things before you continue with whatever you're going to watch 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.

Transcript for:Creating Custom Loading Screens in Roblox

Transcript for:
Creating Custom Loading Screens in Roblox