The Unity Loading Screen Guide : Smooth Scene Transitions in Unity

hello everyone I am the unity dude and in this tutorial I will teach you how to create loading screens in unity for smooth transitioning between your scenes if you're looking for loading screens with custom themes and beautiful animations make sure to check out loading screen studio available on the unity asset store with this asset you can create fully customized loading screens giving your game a professional look the link for loading screen studio is available in the description of the video so let's get started with the tutorial I have already prepared a simple main menu with a few buttons and images at the bottom I have a start button clicking on this button calls a simple function to change the scene the button calls the onclick play function of the main menu script here we simply call the load scene function of the scene management Library if I go back to Unity and run the project the game gets stuck for a while before loading the next scene this is because Unity is unloading the previous scene while loading the new scene during the loading process it looks as if our game has frozen which gives it an extremely unprofessional field to fix this we can show the user a loading screen while Unity is working in the background to load the new scene let's start by creating a new UI canvas for our loading screen make sure that the sort order of the loading screen canvas is higher than that of any other menu this way the loading screen will be displayed on top of all other user interface next let's add an image as the background of our loading screen stretch the image to cover the whole screen change the image to some artwork from your game and after this let's add a progress bar for the progress bar we can use a UI slider position the slider at the bottom of the screen and set its length as required and as we can see the value of the slider can be changed to show the loading progress we can change the image assets of the slider to make it look more professional first off we don't need the handle slide area just disable this component and now we can change the background of the slider and also the faill area of the slider change the height of the slider to make it more visible next let's add the spinner and the loading text in front of it for the spinner we will display a circular Sprite on a UI image and next to it we will add a loading text label while the slider shows the current loading progress the spinner will be there to show the user that the game is not Frozen now let's rotate the spinner using a simple script add a new script to the spinner which we will call rotate spinner in the script we need a float variable for the rotation speed and in the update function we will change the Z rotation of the spinner based on the speed speed back in unity set the rotation speed of the spinner and run the scene to test how our loading screen looks and everything looks perfect the spinner is rotating just as we want it to and all we need to do is add code to make the loading progress bar move so let's add a new script to the Loading menu canvas I will call this the loading menu manager open up this new script and start by importing the required libraries we will need the UI library and the scene management library next we need to make the scene manager object an instance what this will do is make sure that there is only one loading screen object in the whole game and this object will not be destroyed during scene loads also we will be able to access this object from anywhere in our game without a direct reference for this start by creating a static variable of the loading screen manager class we will call this variable instance and in the aake function of the script we will start by checking if there is already another instance of this loading screen manager object if there is another instance we will immediately destroy this loading screen object otherwise we will set this object as the instance and we will also make sure that this object will not be destroyed during scene loadings next we need to make the switch scene function which we will call from our main menu button click function the function will have an integer parameter for the new scene number in the function we will activate our loading screen object and set the progress BAR value to zero create a game object variable for the loading screen object the the loading screen object will contain all the other loading components which include the background the spinner the progress bar and the loading label next create a slider variable for the progress bar and set its value to zero back in unity assign the reference for the progress bar create an empty game object inside the loading screen canvas and move all the other loading screen components inside this object and now we can disable or enable this object from our script to show the loading screen pass the reference of this object to the script and now we can go to our main menu script and in the button click function where previously we were directly switching the scene now we are going to call the switch scene function of the loading screen manager script we can do this using the instance variable of the loading screen manager so let's go back to your unity and test our code so far and when we click the loading screen and when we click the play button we can see that the loading screen shows up however since we have not added code to load our scene the progress part does not move so let's add Logic for loading our scene and displaying the progress back to our loading screen script create a new core routine which we will call switch to scene asynchronous and inside the Coe routine we will create a new asynchronous operation for loading the scene asynchronously the asynchronous operation will make sure that our loading screen does not freeze while Unity is loading another scene pass the scene ID inside the load scene asynchronous function and as long as the scene is not done loading we will keep looping our Co routine inside a while loop inside the while loop we will set the value of our program Press Bar which we can get from our asynchronous operation after that add the yield return null statement to wait for the next iteration of the core routine when our V Loop is finished it means that our scene is done loading in the background we can now disable the loading screen object to show our new scene to the user I usually prefer to add a short pause before disabling the loading screen just to make sure that the scen scripts are done processing and now we can just start this core routine from our switch to scene function and we are all done let's quickly go through our script to see what our code is actually doing when the start button is clicked we find the loading screen manager instance and call it on switch scene function the function takes an integer parameter for the new scene number the switch to scene function then enables the loading screen object and sets the progress BAR value to zero it it then starts the Coe routine for switching scene asynchronously the asynchronous function then starts loading the scene in the background while updating the progress bar when it is done it finally disables the loading screen object everything is now ready so let's build our project and test our code and now when we click our start button our loading screen shows up and after a few seconds we can see that our new scene is ready in the background and that's it for creating a loading screen in unity if you found this video helpful make sure to like And subscribe

Channel: The Unity Dude

Views: 1,181

Keywords: Loading screen Unity, Scene transition Unity, Unity async loading, Unity UI/UX design, Unity progress bar, Unity scene management, Unity asynchronous scene loading, Unity loading animation, Game loading screen design, Unity loading screen spinner, Custom loading screen Unity, Asynchronous loading Unity, Unity beginner tutorial

Id: mja_wSMQu7I

Length: 8min 41sec (521 seconds)

Published: Wed Feb 21 2024