How to make AWESOME Scene Transitions in Unity!

now something that almost every game needs is a smooth way to transition from one scene to another whether you're just switching from a main menu to your game scene or changing between multiple different levels like this well this doesn't feel right I feel taller well anyway so in this video we'll have a look at creating cool scene transitions that you can really get creative with we'll start with a simple fade to black and then once we have the core systems in place we'll have a look at how you can create other cool transitions like a circle wipe or even custom ones like this break is one that I created so let's get to it but first this video is sponsored by hosting her in the game development field you often find yourself needing to set up a website I want to try programming one from scratch and hosting it on my own but old bar is that a lot of work this is why hosting her is such a great solution for all your web hosting needs they're extremely fast very affordable and just so easy to set everything up with and not only is it extremely easy to set up they also take care of all the backend for you with hosting you can set up your own domain get VPS hosting and they even offer cloud hosting plants we've personally set up a website with them and everything just runs very smooth and hosting is also fully optimized for WordPress get up to 91 percent off yearly web hosting plants using the code brakus simply click the link in the description and get started so with that let's get transitioning so as you can see I've gone ahead and set up two example scenes we have seen a which is open here and seen B and both of these scenes are very very simple as you can see all I have in here are just a few sprites and some text elements nothing fancy and if we add play I've gone ahead and made these sprites pop up and down and if we go ahead and change to scene B we'll get an answer to this riddle so what do you get if you combine a magic egg with some fire and a princess well of course you get a dragon and that's all we have inside scene B it's just a sprite of a dragon and that's it so we'll have a look at how to transition between these two scenes you can of course have as many scenes in here as you'd like so the first thing that we're going to do is go to the higher and let's hit create empty and we'll rename this object to something like level loader let's also read set D transform on this and drag it to the top of the hierarchy so that we can always see it and from here you can add different transitions let's start by creating a simple crossfade so to do this we'll first need some UI so let's right-click on a level loader going to UI and let's create a UI canvas if we go into the scene view and hit F we can see that we now have an empty canvas here where we can start adding UI elements and the only thing that I want to configure about this canvas is I want to change the UI scale mode to scale with screen size just to make sure that all of our UI elements scale appropriately I'm also going to rename this to crossfade just to stay organized now of course a fade is very very simple we're simply going to dip to black and then fade back in our new scene and this only requires one element which is a black color that fills our entire screen let's go ahead and create that now let's right click on a crossfade go UI and let's create an image this gives us a white box in the center of our screen let's go ahead and fit that to the entire size of our screen to do that we'll click over here while holding down alt we'll click in the bottom right corner and that is going to scale our image along with the anchor point to fill our entire screen this means that if we go ahead and resize our game view this image is going to scale with it awesome so now we can set the color to anything that we'd like you can of course tip to white I am going to go ahead and dip to black and that is actually all of the UI elements that we need to create we are actually ready to start animating however one thing that I see a lot of people do is animating the Alpha of the color of the image and that could of course work but if you later want to go in and let's say change the color you need to go in and change that for the animation as well which is just not so handy and if you want to add more elements in here let's say you want to add some text that just says loading well then you probably want to fade that as well and just changing the Alpha of the color is not going to do that so instead on our image let's hit add component and let's create a canvas group component and what this does is that it to change the Alpha of an entire group of objects at once so really really cool I'm just gonna remove the text object here and now we are ready to animate so let's select our crossfade object let's open up our animation window you can get that by going window animation and selecting the animation window and we want to create a new animator and animation clip so we'll just go ahead and hit create here let's create a folder for this called animations and in here we'll create the first animation which will be crossfade underscore and we'll split each transition up into two parts one for the start of the animation which plays at the end of our level and one for the end of the animation which plays at the start of the next level so let's just create crossfade end first so let's save that and now if we hit this red record button we can go ahead and create our animation so I'm gonna go forward to about one second here and then gonna select the image and here we can change the Alpha to zero that's going to add a keyframe here where alpha is zero and it's also automatically gonna create a keyframe at the start where alpha is one so now we are already fading out so if we just play this we can see that our black image is indeed fading out and that's of course the end of our crossfade animation now I'm also just going to go in here and at the end of this animation when our black element is completely invisible I want to go ahead and make it non interactable and make sure that we don't block any ray casts and this is just going to make sure that if we click on the screen we're still going to register button clicks and all that stuff and this invisible element won't get in the way of that awesome and we can now select all of these keyframes and simply go ahead and create a new clip and this is of course going to be a crossfade start and here we can then paste these keyframes back in and let's simply reverse the order of these so we'll take this here and bring it to the start and the other keyframes here and bring them to one second and if we now play we can see the reverse thing happening where we dip to black awesome so the final thing that we need to do to these animations is make sure that they do not loop so that when we are trends they won't just stand there playing over and over to do that we'll go under animations that's like the first one and on the loop time that simply disabled that will do the same thing with our crossfade start so now we have our two animation Clips now we just need to define when we are going to play what animation and we do that using animated controllers as you can see when we created our animation Clips it actually automatically created an animated controller as well let's go ahead and double click this to open it up in the animator window and I'm simply going to dock that over here and here we can see our two animation Clips one of them is going to be a bright orange this is the default clip that is going to play at the start when we open up our level and right now that is set to crossfade and which is also what we want we want to fade from black to showing our scene right when we start however if this is for some reason set wrong for you you can always right click and hit set as layer default state on another clip in order to change to that instead of course when our level then ends we want to transition from our crossfade end to a crossfade start so we'll right click on a crossfade end hit make transition and click on our crossfade start so now we've made a transition between the two but we only want to do this transition if we trigger it let's go up here under parameters and let's add a trigger parameter let's call it start and now if we select our animation transition we can go ahead and add a condition here with the start trigger so now we're only going to play our crossfade start if this start condition is triggered and we can of course do that through code we'll also remove any kind of transition time to make this instant so let's disable has exit time and on the settings we'll set the transition duration to zero and that way we'll instantly start playing the crossfade start animation and that's actually all the setup that we need to do for our animations at this point we're ready to trigger them through a script of course to do that we need to make sure that both of our scenes are added to our build settings so we'll go file build settings and in here you can see that I've gone ahead and added my two scenes if they aren't in here for some reason you can always just simply drag them in I've also gone ahead and arranged them in the order that I'd like that seen a is first and seen P is second and to the right here you can see the index of these scenes this is called the build index and it's what we are going to use to through code transition from one scene to the other in the correct order now with that setup we can select our level loader hit add component let's go ahead and create a level loader script let's double click it to open it up in Visual Studio and the first thing that I'm gonna do here is get rid of our start function we won't be needing that and instead let's have a look at triggering this level change so in your game you probably want this to happen whenever the player kills a certain amount of enemies or reaches a certain point but since this is just a quick example we're just going to trigger this whenever we press a certain button so inside of update we can have some kind of if statement where we check for input dot and I'm gonna use get mouse button down and just input the first mouse button so whenever we click with our mouse I want to go ahead and load the next level and this is a function that will create now so we'll create a public void and I'm making this public in case you want to call it from other scripts for example if you have some kind of final check point that you need to reach you can call this inside of that checkpoint script let's name it load next level and in order to load a level we want to be using so using unity engine dot scene management this will allow us to access these scene managers so here we can go scene manager and then we can simply type load C here we can input any kind of scene name for example I could simply go scene be in order to load scene B or a bull index such as zero or one however instead of changing this from every single level to level that's just automated by taking our current build index so scene manager dot get active scene he's seen that is currently loaded dot build index so we'll take the build index off that scene and just add one on to that so if we are currently inside of seen a which has say build index of zero will get that scene get that bird index and add one in row two load scene B I mean just keep going like that for as many scenes as we have very simple and quick however this is actually going to load this scene immediately and we don't want to do that we want to give time for our animation to play so because we need to delay some code we actually need to create a kuroh team and we've talked about Cairo teens many times on this channel if you've never seen them before the syntax is definitely a bit weird but just stay with me and I'm sure you'll get the hang of it so whenever you're creating a kuroh team we don't type avoid we type I enumerator we then follow it with our function name so this is going to be something like load level and here we're going to take in a level index as an argument and here we want to do three things first of all we want to go ahead and play our animation we then want to wait for that animation to stop playing and finally we want to load the scene so step one here is very very simple all we need is a reference to our animator so we'll create a public animator and let's just call it something like transition this way we can reference different animators in order to have different transitions and then down here where we play our animation we simply go transition dot said trigger and we'll pass in our start trigger this is the parameter that we created inside of our animator and that should go ahead and play our animation then we want to wait for a certain amount of seconds so we'll type yield return new waitforseconds again this is the weird syntax that I was talking about all this does is that it pauses this co-routine for X amount of seconds before continuing on and we can type in let's say one second here or we could go to the top and turn this into our variable so that we can adjust it in the inspector so let's create a public float called transition time and set it to 1 by default and then we can simply put that variable down here finally to load the scene we use scene manager dot load scene just as I showed you up here and we'll simply load the scene with the level index that was passed in this way up here we don't have to all loads sing instead what we'll do is call load level and then pass this right in and because our load level function is a co-wrote team we also need a tiny bit of extra syntax here and that is whenever we start a core team we need to call the start co-routine function so we'll wrap this entire function call inside of start co-routine and I need to type that correctly there we go and that is actually all of the code that we are going to need and we are almost ready to hit play the only thing that we need to do is take this level loader and turn it into a prefab so let's drag it into our assets folder and now it's prefab and we can go into scene B and simply drag it in here as well to make sure that it is in both of our scenes this level loader script needs to be in all seams that you want to transition to and from that's very important we'll also just open up our level loaded prefab here and as you can see we need to reference the animator so simply dragging our crossfade here and I think that's all the preparation we need to do if we now go to scene a and hit play we can see that it immediately fades in and if I now click my mouse it's going to smoothly fade from one scene to another really cool of course it's a bit annoying that right now it's overlaying our entire screen with black so you can always go into the prefab here and just select the image and set the Alpha to zero and this way you can see what's going on in your scene when you're not working on it there we go and you might think that was quite a bit of work just to get a symbol fade going Harvie we've now done the groundwork for creating all kinds of really cool transitions so continuing from here is actually really easy if you're going to a level loader we can really easily just duplicate this crossfade and let's create something else like a circle wipe let's disable our crossfade and instead go into a circle wipe here let's have a look in the scene view let's remove this image and instead let's add some kind of circles let's right click go UI image and you can use any source image that you'd like here I've just gone ahead and created a quick circle sprite it's literally nothing about a circle that's it's a negative size here in order to make it big let's just move it over here on the X let's change the color to a black and let's make a quick animation for this so let's go create a new clip let's call this one circle wipe underscore let's do the start animation first let's it record go forward say one second and then simply move this circle over in fact let's just snap it to the center here this way we're kind of animating it in and let's just copy these keyframes go ahead and create a new clip which is going to be circle wipe and paste them and simply reverse them and instead of having the circle go back here let's go ahead and reverse this position on the X to make it go to the other side there we go let's select our two animations and disable the loop time and if we have a look inside of our crossfade animated controller you can see that these two clips have now been added and instead of making this animator more complicated let's just remove these and what we can then do is we can simply create a controller override so in here will right click go create and we'll select an animator override controller let's call this one circle wipe and what this allows us to do is reference our original crossfade controller and simply change the two animation clips so this is going to have the exact same structure as our old animator controller but similarly with other clips so we can take our circle wipe end and put that in place of the crossfade end and do the same thing with the start and now if we go to circle wipe here and reference this circle wipe controller instead and also go to our level loader and drag in our circle wipe instead of the crossfade well then we've actually created a whole new transition just like that and if we save this now and hit play we can see this animation playing really really smoothly awesome in fact you don't have to just use very very simple elements like I'm doing here you can add any kind of flavor to your game using some of these transitions let me just demonstrate this by creating a Brachiosaurus [Music] [Applause] so as you can see I've simply created these two right and left images that we can now animate individually as well as adding in the brackets logo so I'm just going to quickly animate these and once you've created one of the animations in order to reverse all of these different keyframes simply select all of them hitting ctrl a and ctrl C to copy let's create the other animation and let's paste them in however this time in order to reverse this that simply zoom out and this animation is one second long so I'm gonna drag on the bar here at the left and simply drag it over to the two second mark and that has now reversed the entire animation really really cool and finally once this transition is all set up we can go to a level loader and simply drag that in instead if we go ahead and play we can see right away the animation plays perfectly well that's pretty much it for this video if you liked it make sure to subscribe so don't miss the next one now these transitions are pretty quick but if you're working on a logic game I recommend starting to load the game in the background while the transition is playing this is called asynchronous loading and with it you can add another part to your animation in the middle with just some kind of loading screen luckily we have a video already on adding a loading bar but you can easily use this same technique without displaying the loading bar itself so definitely check that out I would also recommend that you turn the script into a single turn so that you can easily load a new level without having to reference it I'll of course everything to where I can learn more about Singleton's in the description also don't forget to check out hosting for fast web hosting solutions simply click the link in the description and get 91 percent off yearly web hosting plans using the code BRAC ease on that thanks watching and I will see you in the next video thanks of the awesome pitch and supporters who donated in December and special thanks to lost to violence locked forever Samuel Bolivia Tannen Chris face Amer Phi Megan Frazier Terry obesity Oh Leela set Daniel to Sonic Jacob Sanford marc-antoine Girard cracker appears no Kiyosaki the mighty Zeus Edison the fierce yet Jade kya and Erasmus you guys Rock

Channel: Brackeys

Views: 570,695

Keywords: brackeys, unity, unity3d, beginner, easy, how, to, howto, learn, tutorial, tutorials, tip, game, development, develop, games, programming, coding, basic, basics, C#, transition, transitions, scene, level, scenes, levels, animation, swipe, wipe, crossfade, fade, circlewipe, custom

Id: CE9VOZivb3I

Length: 19min 45sec (1185 seconds)

Published: Sun Jan 12 2020