How to make a LOADING BAR in Unity

in this video we're going to have a look at creating a loading bar like this one in unity let's get started so this thing is completely empty except I have a camera and a canvas with a background element and a load level button and this is just a standard unit button I've just changed the way it looks a little bit so we want to create a new script let's also create an empty game object for the script to sit on let's reset the transform on it and let's call it level loader we then take our level loader and drag it to the top and add a component which we will also go ahead and call level loader choose C sharp and hit create an ad let's now double click this to open it up in Visual Studio and the first thing we want to do here is get rid of both the update and the start method we also not be using the system dot collections dot generic name space so the first thing that we want to create is a function that we can call from another script or from our button that will tell this script that we want to load a new level to allow myself to access it from another class let's make it public it's not going to return anything so we'll write floyd-- and let's just call it load level now we'll probably also want to be able to specify what level to load we can either give it a string here for the name of the scene or an integer for the index let's just do a scene index here now we want to access the scene manager in order to load a new scene to do that we go up here and include Unity engine that's scene management this way down here we can now write scene manager does load scene and we want to choose the one called load scene async now the normal load scene method basically pauses the entire game in order to spend all its resources trying to load a new scene however load scene async loads the scene asynchronously in the background that means that it keeps our current scene and all of the behaviors in it running while it's loading our new scene into memory what we can then do is get some information back from our scene manager about the progress of this operation to do that let's first finish off our method here by giving it our scene index and the cool thing about this load scene async method is that it actually returns an object with information about how our operation is going this object is called async operation so if we now go down here and make an async operation variable we can just call it operation and set it equal to or a sync method well then we can actually go into our operation object and access properties storing information about the operation most importantly we can get information about whether or not we are done loading and we also have this progress value this is a flow going from zero to one that indicates the current state of the process so all we need to do is make sure that while this operation is running we continually update our UI to reflect this progress variable and because this method is running asynchronously meaning as a co routine we'll have to do that in a corrode team as well if you've never had a look at corrode teams before this part might be a bit confusing and that's mostly because of how weird the syntax for corrode genes is basically what we'll do is go down here and create a new method and instead of writing void we write I in numerator we can call this method load asynchronously I think I spelled that correctly then as an argument we'll also want to take in the same scene index and we can output this line of code down here instead then we can create a while loop and this loop will continue running as long as operation dot is done is equal to force or if we want to write this in shorthand notation we'll write while the operation is not done then inside of this value we'll first off update our progress that could be by simply writing out our progress in a debug deadlock statement we could simply write operation dot progress into our LOC and then after every message we'll go ahead and wait a frame and then continue our while loop so we'll write yield return null and this is going to wait until the next frame before continuing so what's happening here is that whenever we call this Co routine we go ahead and load a scene asynchronously using this scene index specified within store information about the status of our current operation into a variable called operation then we start a while loop that will run until the process is done and each time it runs through we are going to throw out a message about our current progress and then we are going to wait a frame until we do that again now we of course also need to call this Co routine so appearance of our load level function will write start crow routine and will input the load is synchronously co-routine and of course as an argument we put scene index so then currently a few problems with this but if we go ahead and try it out it should actually be working now of course whenever we load a scene we want to go to file build settings and make sure that the scene we want to load is in here I'm going to add firstly level 1 which is the one that we're currently add and then level 2 which is the scene that we want to transition to now the level 2 scene here is super simple it's just a panel with the text element that says level 2 and that also means that this is going to load ridiculously fast and so we'll probably get a few messages down here but it's possible that we only get one when beginning and when we end to find out that set a connection between our button and our level loader to do that let's select our button let's go down here and add an on click event let's drag in the level loaded object and under that let's go to the level loader script and access the load level function the level that we want to load is that with an index of 1 now when we hit play and hit load level when see indeed that the transition happens lightning-fast it goes from 0 to 0.9 and then the levels loaded however this is a bit weird not that the transition happens this fast that's a great thing but the fact that it ends at point 9 the reason for this is that whenever unity wants to load a new scene it does so in two stages the first stage is loading here Unity loads from the memory the assets that make the new scene if you have a big scene this is what is going to take the most time and so this is the face that we want to show using our loading bar the second scene however is activation keys unity goes through and deletes all the old stuff that we don't need anymore and replaces them with the newly loaded ones now when it comes to the progress value unity will during the loading stage go from 0 to 0.9 and it will do so in increments how are we doing the activation stage unity goes from point 9 to 1 and it doesn't actually do any values in between that mean so this value is actually only useful for us from 0 to 0.9 and you need to also reflect that by setting is done equal to true as soon as the loading stage is done so what we can do is use a bit of quick math in order to make our value from 0 to 0.9 go from 0 to 1 do that we make a float called progress and we set it equal to mass clamp 1 this climbs the value between 0 & 1 and in here we fitted our operation dot progress divided by 0.9 now instead of debug that logging our operation dot progress we simply feed it our progress this way if we go back and play and hit load level it goes from 0 to 1 but debugging values like this is boring let's instead add a cold slider and after that I'll show you what it looks like if you're loading a more complicated scene let's go to our canvas here let's add a new UI panel let's change the image here to none to make it just a solid color let's make sure that it scales to our entire screen let's then bump up the Alpha to make it non transparent let's also set the color value to the same as our background here let's call this one the loading screen let's go and right-click and add a UI slider on top now there are a few things that we can change on this lightly the first thing is that we don't need a transition because we don't want to be able to interact with it and so I'll also set interactable to false I'll disable a navigation and let's also go in here and delete our handle slide area it's starting to look like a loading bar when then take our entire slider and maybe scale it up a bit you can see now that we can adjust this value down here which goes between 0 and 1 by default in order to fill up our slider however if we set it to 1 it will actually not go all the way there to change this let's go to our fill area and let's scale this tiny bit to the right we can also select our fill and change the color here to a light red now as we adjust our value we can see that looks much better now all we need to do is reference our loading screen so that we can enable and disable it and reference our sliders so that we can change the value through script let's disable our loading screen let's go into our script let's create a reference to our loading screen we'll make it of type game object and call it loading screen now we also want a reference to a slider to do that we'll have to include unity engine dot UI now we can create a public slider variable called slider then when we start loading the scene we can set loading screen active by calling set active and inserting true and while we're loading instead of debug logging our progress we can set slider dot value equal to progress so let's say that and head into unity let's select our level loader and we should see two appearing let's drag a loading screen into the loading screen slot and I'll slider into the stylish slot now when we play and hit load level we should very quickly see a slider appearing let's try and go under upload settings and change the level here instead of loading up this test level I'll go ahead and load a level from the Unity survival shooter project this is freely available on the asset story and on the link in the description let's drag in the complete game scene let's hit play so let's hit load level cool right now I'm on a really fast computer so that's two loaded pretty quickly but hopefully you get the idea the final thing that we can go in here and add is some kind of text that also shows the progress maybe in percentage so let's right click on our slider go UI text let's go enjoy seeing you I'm going to snap this to the right by holding down alt and clicking here I'm also going to change the font to a robot of font you can download that for free I'll then align it to the right and center also bring up the font size to something like 18 and let's just insert 20% here just so we can see how that looks let's then take the text element and drag it a tiny bit to the left voila we have a percentage text now we can rename this to progress text we can go into a level loader at the top we want the reference to a text object we call it progress text then down here where we set our slider value we also set progress text dot text equal to progress multiply with 100 to make it into a percentage and then we'll add the percentage sign let's say that going to unity select our level loader drag in our progress text disable our loading screen hit play and yay we've got text that's pretty much it for this video if you liked it make sure to subscribe so dome is a future one also it's been a while since I mentioned I have a patreon page patron is a way for you to support me with a monthly donation you can donate any amount and it's cancelable at any time patron is one of the things that keep this channel going on also this video was inspired by a written tutorial by Allen Saucony he has a lot of great tutorials on more advanced unity subjects I definitely suggest you check them out on that thanks for watching and I will see you in the next video thanks - of the awesome patreon supporters who donated in May and a special thanks to Derek James Kirk Faison RFI stone gamer Cmdr fi stone 38 Thomas royally James Calhoun cyborg Rami and Jason Lotito if you want to become a picture in yourself you can do so at patreon.com slash practice

Channel: Brackeys

Views: 732,575

Keywords: brackeys, unity, unity3d, asset, assets, model, texture, models, textures, material, materials, beginner, easy, how, to, howto, learn, course, series, tutorial, tutorials, fix, tip, game, development, develop, games, programming, coding, basic, basics, C#, loading, loading bar, bar, progress, progress bar, ready, activation, scene, load, percent

Id: YMj2qPq9CP8

Length: 11min 25sec (685 seconds)

Published: Wed Jun 14 2017