Unity Loading Screen Tutorial | How To Create A Loading Bar In Unity

what is up guys make sure that if you liked this video hit that like button subscribe and turn our notifications before we start creating let us take a preview of the effect that we are going to create so I'm going to hit the play button and after two seconds we will load a level and see the loading screen right there and this is the effect that we are going to create and you can use it for any situation anytime you need to have a loading screen in your game so let me just hop into a fresh new project from scratch and we can start building this I am in a new project and it does not matter if it's 2d or 3d because what you're gonna do right now applies for both and the first thing that you're gonna do is import the asset so I'm gonna go in my folder here and drag and drop these assets by the way if you want to download them link will be in the description of the video so now I'm gonna double click and we have two of these so we have our background and we have our loading bar one thing to note is because this is a 3d project by default these images will be imported on the default so texture type default let me just prepare here my highlight tool so that I can highlight things I'm talking about so this right here it's important on default and this means that we are not we will not be able to use this with unities UI so we cannot create an image and use this image right here to represent it on the screen instead what we need to do is we need to select both of them and go here in the inspector panel which is on my right side and here for the texture type we're gonna change it from default to sprite in parenthesis 2d and UI so and UI indicates that we can now use them for you I and hit apply at the bottom right corner so bottom right corner of that inspector panel or the properties that we see right here we are also going to take the loading bar and we're going to change the sprite mode from single to multiple because if I double click it you see we have two images this is our fill inside of the loading bar and this is the background of the loading bar so we need to separate them they are now in one image so select the loading bar and go again in the inspector and from the sprite mode change it from single to multiple again we need to hit apply here at the bottom right corner so now we can click on the sprite editor which is this button right here so this and right here when we click on that it will open this window which is the sprite editor window now we can slice these images and I'm going to click here slice at the top left corner so here it is we're gonna click this slice button and when we click on it so let me click it it will open this mini window and here make sure this is on automatic it will be by default pivot Center we are not gonna touch anything here except click here slice and unity is pretty good in determining how to slice these things so as you can see it sliced this one perfect and this one well this one not so much but it is pretty good most of the time so let me just read rag it so when this happens for example I don't know if you can see that let me clear my pencil you see the boundaries where it sliced are here but I don't want them to be here I want them to be here I don't want this gap between my sprite and the empty space so you can simply select it and redragon on your own so I'm going to drag it here and this one I'm going to drag right here voila so simply redragon on your own and yeah this is pretty cool this is what I want so when this happens as I said unity is pretty good most of the times but with these images as you can see I have a little bit darkness here so here at the bottom below the background for the loading bar so it cannot determine every single time but as I said most of the times it is good at determining things so what you're gonna do is we're going to select this one so the bottom one and here at the bottom right corner you see the name I highlight it I'm going to change it here to loading barbg and this one is going to be a loading bar fill so like this so we have the loading bar fill and the loading bar BG it can be progress as well you can instead of filled you can name it progress and now that we have that you are gonna click the apply button which is right here you see at the top right corner of this window so when you click apply now they will be separated and we can use them on their own so now we have two of these and we can use them separated from each other so this is the preparation we needed to make this or to make it work so now we are going to start creating our loading bar and in order to do that we're gonna right click in the hierarchy go on UI and first of all I am going to create image by doing this automatically we also create canvas and we are going to leave the canvas at screen space overlay and we're not gonna touch anything here from these options and this image is going to be our a loading screen BG so this is going to be the background image and for the background image first of all I'm going to set the X and y position to zero zero position it at the center and now I'm going to drag and drop this image so this one right here that you see that we have imported this image you need to drag it when you select the loading screen BG which is actually an image because I right clicked and it created an image but automatically it also created a canvas because every UI element needs to be a child of a canvas it cannot exist without a canvas so select the image and you have this empty field right here let me first of all clear you see this this is an empty field for the source image which means you can drag and drop this right here and that will be the image death will be rendered on the screen back here it is but we don't want it to look like this with home what is what is this so what we can do is we can either change that in the width and the height properties here where I change the position right below or you can Condorcet native sized button inside of the image script when you click on that back it will simply set the native size which is 1920 by 1080 which is the default size of our background image so what is the next thing to do well the next thing to do is to create another image so right click on the canvas go under UI and I'm going to create another image by the way I'm going to change this canvas to UI canvas and I'm going to say - loading screen so this image is going to be our loading so loading bar progress and for the loading bar progress we're going to drag and drop this one right here the orange one so take it drag and drop it from here and click here set native size but let me just reposition actually resize it so the width is going to be 8 8 6 and the height is gonna be 1 7 9 so 886 for the width and 1 7 9 for the height now again I'm gonna right-click on the loading bar progress and under view I create another image which is now a child of the loading bar progress image and this one is going to be our loading barbg and as you can assume we're going to drag and drop the loading bar BG here and click here to set it to native size but actually here the width is going to be 8 8 6 and the height is gonna be 200 208 well so this is our loading bar now of course I'm going to reposition this one on the y-axis 3 3 6 or actually is gonna be at the bottom here so bottom this is going to be bottom center that is this is going to be the anchor now I don't have much time to explain everything what I'm doing here in terms of high detail but basically when you set the anchor you determine where the origin or the center of that UI element is so if I set here zero zero position and we said the anchor to be at the bottom center so bottom middle center you see now that the center of our image so let me go here and where is our image here is it so you see where the anchor is you see where it's pointing this right here this right here this is the center of the image and it's there you see it's at the bottom center it's the bottom middle center anyways if you want a special you eye tutorial just let me know in the comment section below and here for our position why I'm going to say three three six and this is where the position of our loading bar is going to be now what I'm also going to do is for the loading bar in the image so right here in side of the image here right and what I'm gonna do there is change this image type from simple to field and I'm going to change the fill method from radial 360 to horizontal and basically that's all because now we have this fill amount slider right below you see horizontal here then we have this left and we have the slider you see now pay attention to the loading bar when I'm moving it left and right so moving it left and right and voila this is our loading bar so basically that's it for our loading bar what is the first you is to create a text so I'm going to right click on the UI canvas go here and text and this is going to be our loading text which is simply going to say loading and it's gonna be bald so you see here these options for the text you can change the font if you have imported any font you can change the style to bold italic or whatever you can also change the size but first of all let me resize the width and the height which is gonna be nine five nine which is the width and the height is gonna be one six eight and that's the height and now the font size is gonna be one four seven voila like this and I'm also going to change the color so you can play with these if you open any image editing software this is what you have for this is what you have four options for any text basically I'm also going to set the alignment at the middle and I am going to set here the anchor at the bottom center same as what I did for the loading bar progress and one three two is going to be the position wide so this is now our canvas this is the cameras that we want now how can we manipulate the canvas of course we need to create a script so I'm going to right click here and create a c-sharp script and this one is going to be called our a loading screen and what I'm gonna do is create an empty game object so here I'm going to create an empty game object I'm going to reset its position and I'm going to name him two loading screen and I'm going to take the UI canvas the loading screen UI canvas and put it as a child of that game object so now you see if you turn off the canvas we don't see anything and voila it's gonna carry basically our UI canvas and we're going to drag and drop the loading screen on this game object so now when I double-click it and open it here in Visual Studio this is our script what I like to do when I have loading screens in my games is I also love to use it for loading scenes so loading different levels because what's the point of separating the code you are going to show the loading screen when you load a level so why not put the same code right there basically it's a single line of code so for that because we're going to use UI elements we need to type using unity engine that you I which is for UI elements and we also need to type using unity engine that scene management because we want to load scenes we want to load go for one scene to another scene now one thing that we are going to do with this loading screen because he's gonna show the loading screen and he's also going to load scenes which means we need to carry it from one scene to another that's why I'm going to make it a single so I'm going to create here a public static loading screen instance and below our start I'm going to create void make singleton and in the make singleton we are simply going to test if instance is not equal to null we are going to destroy the duplicate so destroy the game object else if instance is known then instance is equal to this don't destroy unload this game object basically what I did here is created a one copy from this class that will be carried from one scene to another scene if you don't know what I'm talking about I will put a link in the description to my Singleton's video because I created a separate video half-an-hour only talking about Singleton's explaining in high depth after that video Singleton's will not be a problem for you so if you don't understand watch that video link will be in the description below here above the start I'm going to create the awake function and this is where I like to call make singleton because awake is the function that's first called it is going to load everything the first function that's going to be executed when our game loads that's why I love to call it here so the next thing that we're going to do we need a private game object and this is going to be our a loading bar holder this is that canvas the loading bar that we have created which holds all the UI elements and since I want to drag and drop it so I want to drag and drop it inside of this field I'm going to type here serialized field so that the private variable will now be visible here in the inspector panel as you can see so pay attention now it is visible if I make it private and don't use this serialized field pay attention what's gonna happen now it is not gonna be visible here in the inspector panel now I also need a private so private image loading bar progress and both are going to be serialized field which means now we're going to drag and drop them in these fields so I'm gonna go here in unity and we need to drag and drop it so UI canvas go goes here in the loading bar holder and this loading bar progress that's the image that goes right here so loading bar progress and the canvas goes right here now we can safely turn them off so simply select the canvas you see here have the canvas turn it off so now we only see this right here and we can come back now in visual studio and below our private image we are also going to create a private float which is going to be progress so progress value which is gonna be equal to one point one F our private float progress multiplier so multiplier underscore one which is gonna be equal to zero point five F and our private float progress multiplier underscore two which is gonna be equal to zero point zero seven F voila we have everything what we need to start loading our levels so below our make singleton we are going to create here a public void a load level with the string which is going to be our level name this is how we are going to load one scene and go from one scene to another and when that happens we are going to show the loading screen in order to show the loading screen we need to call here the loading bar holders set active to true because that's the canvas currently it's not active when you turn off a game object you see this checkbox when you uncheck it the game object is not active which means the game object is not visible in the scene and any script attached all that demob jecht will also not function it will not execute but when it's checked you see now it is visible any function that's attached on this game object will work and basically you see this check and uncheck in code we do it like so setactive true we'll make it visible or active false if we type here false it will make it not active so show the loading bar the progress value is going to be equal to zero our time skill so time skill that time that time skill is gonna be equal to zero this is because if you want to go from one level to another level basically this is not important right now for this tutorial but if you want to go from one level to another level you will pause everything else what is going on so you're gonna stop the time that's why you use this time skill but as I said I'm not gonna touch it here you don't need it for this tutorial but if you're working on a game as I said you might need it anyways the next thing to do is call the scene manager that load scene and passing here the level name which is the level name that we are going to load now in order for that to happen basically setting this to zero will trigger the activation of our loading bar how because here below I have a function that I'm going to say void show loading screen like this not serene but screen and this one is going to be called in the updates so here I'm going to have the update function and I'm going to call it right here you know that the update function is called every frame in a second so what we're gonna do here in our show loading screen is that you're going to check if the progress value is less than one F and by setting it here so not awake what are you doing to me okay now setting the progress value here to be equal to zero will make this true because we're testing here if the progress value is lower than one so if one value is greater than the progress value setting in here to zero will trigger the activation of this if statement so what we're gonna do here is we're going to say our progress value plus equals to progress multiplier one multiplied with the progress multiplier to our loading bar progress so loading bar progress dot fill amount is gonna be equal to progress value voila and this is going to fill the loading bar now here we need to test if our progress in value is greater or equal to one so if it's greater or equal to one the loading bar has finished so what we're gonna do here is we're going to say our progress value is equal to one point one F because we don't want this to be executed we can also leave it at one but I'm putting in here one point one to know that the reason for that is so that this will not be true and here I'm going to say if progress value less then one like this so we are going to set it here progress values one point one which means this right here will not execute anymore and will not be true our loading bar holder actually the fill amount or a loading bar progress that fill amount is going to be equal to 0 F and now our loading bar holder said active is gonna be equal to false and if here so if here you use time scale is equal to zero here you will use time scale so time that time scale is equal to one again if you use that of course as I said if you use the it so we can test it out now basically but before we do that let me just go here and turn on our UI cam is because I'm going to take the loading bar progress and set the fill amount to zero because it's start it starts to fill from the zero and pay attention we're multiplying these two which are very small values of course we can use time that delta time but i want to use it like this and we will see another way also how we can do it which is a small value because pay attention here we're also testing if the progress value it's lower than one because the fill amount here for our progress or loading bar progress it can go from one to you or from zero to one it cannot go from 100 to zero from zero to 100 it goes from zero to one and you see these increments so zero point four thirteen zero point five eight eight that's why we are doing it like that now let me just go back here what I'm gonna do is the following I'm going to create here a KO routine so I'm going to say ienumerator and ocurro teen is a function that delays an execution so basically we can say something like load some level for example and here I can say yield return new wait four seconds and I can see here below public float load level time by default let's say it's equal to two this is for testing purpose purposes so load level time and when this counts down we are simply going to call this load level so call it here load level and here I'm going to pass game play for example so I'm going to say game play but we need to create this level and we also need to do this we need to go in the start function and we need to say start co-routine and pass this right here if we do it like this now the code will execute but it will not work and I will show you that in a second so if I go here clear the console for some reason I every time I like to clear the console but pay attention now after two seconds we should load the level but you see now we saw the loading screen but you see gameplay level could not be loaded because we don't have it we don't have the loading that game play level so what we need to do is we need to go here file a new scene and create a new scene so file new scene command S or ctrl s if you're on Windows to save that scene and name it game play Capital G capital G this is really important because the name of the level needs to match up with the name that we passed here inside of this function the next thing that I need to do is go here in the scenes folder and currently I'm gonna go back in the sample scene and go here under build settings and click here add open scene basically it is already added but now click on the game play and click on add open scene this is how you load scenes you add in here in the build and you add them that way you open the scene you open this build and you click on add open scenes again the build is under file and build settings and voila so now we can do it if I hit the play button after 2 seconds we will load the game play scene actually I mean the game play scene stupid stupid stupid so now I am in the sample scene after 2 seconds we will load the game play scene and we will see the loading bar of course it was quick but what I can do is I can make these public so I can make this one public and I can make this one public as well so now we can manipulate these values and the lowered the values are the longer it will load our game so let's see here if we put number three for the multiplier 2 and if I hit the play button now after 2 seconds we will see the loading screen you see BAM and it is feeling and let's try it like this so I'm gonna say point I don't know 3 here instead of 0.5 and now if I hit the play button pay attention again so it is going to load the screen after 2 seconds but the lower these values are the longer it will take for you to load the quality load the level now of course somebody's gonna say well this is not that great way to load because my level can load in 2 seconds and your for five seconds and Sun and so forth well I have another solution for you what I can do here is I can go below and we're going to create an ienumerator which is a co-routine and we're going to call it load a Singh Corona Oh sleep so load a synchronously and here I'm going to see a shrink level name and what we're gonna do here is we are going to say a sink operation is gonna be equal to an actually we're going to call it operation is gonna be equal to you seen manager that loads seen a sink this is going to loaded asynchronously and here we're going to say level name I will explain in a second what is a synchronously what does that mean and yeah of course of course why shouldn't I press ENTER to load whatever anyways what we need to do here is we're going to call our a loading bar so loading bar holder set active is equal to true and here we're going to say while the operation that is done and of course we're going to see here an exclamation mark which means while the operation is not done so while the operation is not done because you see here this done has the operation finished this is the operation the operation is to load the scene as in chrony ously as in chrony ismail means in the background basically we load the scene in the background while unity is building up that scene with all the 3d models cool levels that we added in our game so that happens behind the background and in order to make it happen in the background you use load seen a synchronously in this operation which is this one that we have created is going to help us do that and notice the exclamation mark it makes what's after it the opposite so is that well it really will return true if it's done but it will return false if it's not done so if it's not done it will return false exclamation mark will make it the opposite so this right here will be true so while that is the key we're going to say float so float progress progress is gonna be equal to and we're going to see operation dot progress and we're going to divide that by zero point nine F the reason for that is you saw that the fill amount goes from zero up to one so it goes from zero to one but this operation goes from zero up to zero point nine so if we divide that by zero point nine when it gets at 0.9 0.9 divided by zero point nine nine it's equal to one and here we're going to see a loading bar progress that fill amount is going to be equal to the progress value that we have just created here and after that we are simply going to see here if progress is greater or equal to one then we're going to say loading bar holder set active is equal to false and here below because this is an eye enumerator we need to denote we need to call here yield return null and voila we are good to go so now I can rerun this again and badly just turn it off so now we don't have this air that was well being annoying here this whole time basically again ienumerator is a function that allows you to delay the execution of a function and you delayed that execution by calling yield return and here we've called wait four seconds and we specify how many seconds we want to wait but this return null means skip one frame again if you want to learn more about co-routines I will put a link in the description of the video so now we need to simply call this function and for that I'm going to create a public void and I'm going to call this one load a level a sink and string level name like this and simply here we're going to call start kill routine calling load a synchronously passing the level name and basically that is that but you will see now if I do something like this here so here I'm calling the load level gameplay but here I'm going to call load level a sync passing the gameplay again pay attention how you are spelling gameplay because if you miss something it will not work if I go back in unity and if I hit the play button you will notice after two seconds we're gonna load the level but at lightning speed basically we did not even see it you see I mean the gameplay scene now you see I'm in the gameplay scene so uh yeah we did not even see it the reason for that is because this happens behind the background it basically waits for unity to prepare the scene you can have some big complex scene with some 3d world's enemies bla bla bla and this assing will wait it will fill that progress the way unity fills those assets or fills those 3d models in your scene basically unity loads the loads those models because you imported them it loads them and while it is loading them this right here will know the progress by using this operation progress it will know the progress of that loading and it will display that progress but since we are going to an empty scene there is nothing to load unity loads that seem pretty quickly that's why we did not even saw it because it was lightning fast that's why I showed you two ways how this works and in order to test this a sync way you will probably need some large scene add some 3d objects I'm not gonna do that but add some 3d objects put this and add blah blah and it will work but as I said I'm not gonna do it this right here will be enough again I'm going to go and demonstrate that so if I hit the play button you will notice that now you see it's loading loading going back now we are in our scene fire here and if you want to download the assets and this project link will be in the disco below if you have any requests put it in the comment below otherwise like share subscribe and fire here I'll see you guys in another video what is up guys make sure that if you like this video hit that like button subscribe and turn our notifications

Channel: Awesome Tuts - Anyone Can Learn To Make Games

Views: 19,698

Keywords: awesome tuts, unity loading bar, unity loading bar tutorial, unity loading screen, unity loading screen tutorial, how to create a loading bar in unity, loading bar unity, loading screen unity, loading screen unity tutorial, how to create a loading screen unity, simple loading bar unity, animated loading screen unity, level loading bar unity, cool loading bar unity, unity cool loading bar, unity simple loading bar, creating a loading screen in unity, load screen unity

Id: u1Fwm5eGYrc

Length: 32min 36sec (1956 seconds)

Published: Wed Jan 09 2019