How to Transition Between Scenes in Godot (Building a Level Switcher #2)

in this video we're going to take our scene switching system that we made in the last one and add a transition animation while our scenes are transitioning we are going to be cleaning up and finishing any sound effects or animations our old level needs to do in the background asynchronously while also letting our new level load things in so here take a quick demo and you'll notice i've added sounds and we'll do this as part of the video to kind of demonstrate when things are happening so as soon as i hit change scene here you'll see the transition and then another sound when our new level loads in and so we're going to be doing this adding this background loading and for the old and the new scene and some sounds to kind of help guide our player let's get started in the last video we made a scene switching system that let us go through or go back and forth between scenes effortlessly that was easy to expand too if we needed more levels later on what we did not do though is start actually adding a transition animation and making sure that everything that needed to clean up in our old scene and that everything that needed to load in in our new scene was given time to do it before that scene actually switched and the player was able to do things so that's what we're going to do now first by making a transition animation and then by giving signals to each of our our old and new levels to kind of tell our scene switcher when everything is good to go so if i come to our scene switcher the first thing we're going to do is actually add an animation player animation players are one of my favorite nodes in godot they're incredibly flexible godot's animation system is really really amazing and before we actually add an animation to it we are going to add one more node so i'll hit command a and the note that we're going to add is a color rect and what we're going to do is make this our fade in and out overlay and so what i will do is select our color rec here and i'm going to say overlay i'll just rename it and i'm going to hit this layout button and then hit full rec down at the bottom this will make our overlay stretch over the entire screen because it is a child of our node it will cover the entire screen and what we're going to do is actually set the color to be black and you can't see it right now our overlay the reason why is because canvas layers take precedence each canvas layer draws on top of other layers and our grass level canvas layer here has another colored rack so in order to do that we want our overlay to always be the thing on top of the screen so what i'm going to do in order to change that is just add another canvas layer here and we'll make our overlay a child of that so i'll do canvas layer oops canvas layer and we'll make our overlay a child of this now this is kind of convoluted the probably the best thing to do here is to make our levels not be canvas layers the reason they are is just to hold over of before when we didn't have a parent scene but just for the sake of this video we'll just do this now and i'll say overlay layer and now what we want is our overlay layer to always be on top so if i select any canvas layer you'll see it's got this layer property here and they're all set to 1 by default same with our overlay layer but we always want our overlay layer to be on top so i'm just going to bump this layer up to 10 and that will automatically have it take precedence over any canvas layer whose layer number is under 10. and so that's going to work for now just as kind of a canvas layer and you'll see that instantly because of that since i've changed our overlays color to black all we can see is a black screen now so there's two things we need to do one is that because our overlay is being drawn on top of everything else we don't want it to actually affect our ability to use the mouse and it will by default so i have to select our overlay node here come over to to mouse and instead of the filter being stopped i need to say it or put it to ignore what this is doing is telling godot hey this element this node should ignore all mouse events this will mean that we'll we'll be able to click on elements that are underneath it which will be our button our grass level and our desert level so this is very important make sure you don't forget to change the mouse filter to ignore now that's one thing the other thing that we really want to do is change the transparency on our overlay so for our color here we're always going to keep it to black but the way we're going to do our fade in and fade out is by adjusting our alpha value so we're going to set it to be an alpha of 0 by default so that we can still see our scene and when we create our animation it's going to increase the alpha value and then decrease it to fade in and fade out respectively and so what we're going to do now is create two animations i'll create a new one and this will be fade in and we're just going to add a new track it'll be a property track i'll select our overlay here and we will find color and here we'll just make this be one second so i'll insert key at zero and insert key at one and you'll see at zero it has a value of zeros all around zero for the alpha and then at one second we want to let me bump this up to one second make sure your time's at one we want to change we want our rgb to still be zero so black but change our alpha to be 255 all the way and now if i play this animation you'll see that it fades into black which is perfect it's exactly what we want so our fade in is good to go now we need to make a new animation and this is going to be fade out and you can probably already tell how we're going to do this create a new property track for overlay we'll do color as our track and then again zero in one second we're going to add a key so i'll have this at zero let me make sure that time is at zero again at zero we're going to start with our alpha all the way up and then at one we are going to bump our alpha or get our alpha all the way back to zero to make it transparent again and so now our fade out when i play it actually fades out and super easy godot's animation player the animation system makes it really easy to create a fade in and fade out really any basic animation the reason i used an animation player instead of a tween is just because i think it's easier to edit it via the editor and see it in real time and be able to adjust it than it is to use a tween and i think for things like this it's generally better you get a little bit more fine-grained control than you do with a tween node so that's why we decided to do this instead of between so now we've got our animations now we need to just actually control them from code and so in our scene switcher there's a couple things we're going to need to do first we need to get a reference to our animation player so i'm going to say on ready var and i'll just call it anim just for short and we'll get our animation player and now what we need to do is whenever we handle changing our level we need to play our fade in and so what i'm going to do is a couple things here first i want to move all of our cleaning up our freeing of our current level to actually the level itself so we can do that asynchronously in the background what we want to do for our system is while we fade in and then when the screen is black we want to let our current level take as much time as it needs to clean up but we want to move our new level on top of our current level so that even if our current level takes a few seconds it doesn't matter we or our old level takes a few seconds to clean up it doesn't matter our new level can get going as soon as it's ready to so we want to make that an asynchronous process so we'll get to that in a second but the first thing we want to do is as soon as we um start this we want to add in our new level so there's a couple things to think about here as soon as we have added our next level as a child we want to do anim dot play and we should see automatically it pops up fade in so that's what we're gonna do for now but one thing to know is that when we add our next level as a child it's going to probably draw on top of our current level right away which we don't want we want to see our current level until our fade and animation is done so what we can actually do is say and this do this before we add our child next level dot layer and set this to be negative one which means it's going to draw underneath our current level because remember if i select our layer here the layer starts at 1. so our next level is going to draw in underneath everything and won't be shown to the player even as it's loading in even as everything is getting ready and we add it to our our tree so that we're ready to show it to the player immediately this will keep it invisible for now so we're going to play do our fade in animation and what we want to do is actually connect a signal on our animation player and we're going to connect the animation finish signal to our scene switcher so i'll just find that in the scene tree or in our node and signals tab and then connect it and so what we want to do is actually do a match here you'll notice that with this signal we get a parameter which is our animation name so what we want to do is match anim name and so whenever an animation finish this same function is going to get called whatever animation that is so we want to do something specific depending on which animation finished whether it's our fade in or our fade out so what we'll do is say fade in because that's what we're currently looking at and so once our fade in is done so our screen is currently black so what we want to do now is actually handle freeing or starting to clean up our current level down here because we don't want as it currently stands our current level is going to get freed before our animation is complete we don't want that because we want our player to see the current level until the fade in is complete until when the current level is freed the player wouldn't notice it so we want it we want our screen to be completely black when we start to clean up our current level so in order to do that i can bring current level.q3 down here the problem though is we need to set our current level to be our next level and so we've got a bit of a variable problem here and what i'm going to do in order to change it this is one solution there might be other better ones but just one way to do it is move our next level variable out of this function and make it an actual variable that we have just a field we can access anywhere so i'm going to say variable next level and we'll default this to null and we'll set it to null whenever we're done transitioning levels so i'll get rid of line 15 which is the next level variable because we don't need that anymore and we don't actually need current level.net or equals next level right here so first things first we are going to start our queuing free down in the fade in animation area so we'll start freeing our current level once our animation is complete and then now that this is the case we can now say currently or equals next level and we can set our next level to be null since we don't need it anymore and again this will just make sure we're not storing something that we don't need so as soon as our fade in is done let's start freeing up our current level and then change our current level to be the level that we've loaded in and we'll change our current level or our next level to be null since we don't need it anymore and let's get rid of this line 31 here because we don't need that either now there's two other things we need to do remember that we set our next level's layer to be negative one so we're not going to be able to see it right now as it stands or at least we might be able to once we free our current level but we want to change our layer to be the the correct layer now so here we'll say current level since we've just set our next level as our current level so we'll say current level dot layer and we'll bump this back to one so we're restoring everything that it used to be we're storing it to the to the regular layer that most of our levels will be at now we're never actually calling our fade out animation so we're not going to be able to see this anyway so what we can do here is we could just say anim dot play fade in or fade out excuse me and so what this is going to do is as soon as our fade in is complete we're going to immediately fade out now remember we said we wanted while the screen was black to give our new level some time to finish loading in we're not going to be able to do that if we immediately play our fade out animation but just to get something that we can see that's working right now we'll do this for now and come back to that in a second so if i run our game now we should see we've got a grass level and if i hit change scene look at that a really awesome animation it's simple but it provides a nice transition between changing of our levels and it's pretty seamless we don't see anything going wrong we don't see an inner level kind of things loading or looking funky so we've made some really awesome progress here there is a weird line going on right here i'm not sure why that's the case but um really like this looks amazing this has got everything we need and we are able to create this nice transition animation without having to use any outside resources gado's animation player and just a colored rectangle let us create this from scratch so it's incredibly easy you could replace that colored rectangle the overlay with a uh you know some kind of a texture or a pattern or you can make a fancier animation to do this that's totally fine it would look great we're just you know doing the basic here so that we have a good thing to demo off but yeah it's really easy to swap out the animation or do something a little bit fancier if you want okay so i said there is one other thing we still need to do which was making sure we gave our new level our new scene time to load everything in additionally we haven't really moved our cleanup code to our level either and what i want to do to or what i want to do to make it feel a little bit better and to illustrate what we're which the changes we're about to make and so what i want to do to kind of illustrate those changes and help us see them in action is actually add two sounds one is the sound when you hit the change scene button and the other is a sound when a new scene loads in and so when we hear those two sounds it'll kind of guide us and and seeing how things are loading in and it'll add a nice little bit of juice and effect to our very simple game right now so let's go over to our level i'll just do our grass level for example and um let's add two sound effects so i'm going to hit command a and i'm going to do audio stream if you've never done used sounds in godot before it's really easy it's just this audio stream player and we're gonna add two this is going to be button clicked sound and i'll duplicate this and we'll say level loaded sound and i've just gotten two sound assets off the internet i think i got them from fezlin studios i'll have that link in the description below but for our button click sound i'm just going to have this like a little level up notification so i'll play this in a second and now that i've dragged our sound in i can just check this plane box here and you'll hear there you go just a little sound effect and that will be what happens whenever the button is clicked and i can do the same thing for our level loaded i'll select this and i'll find our other sound effect which is just like kind of a doorbell dinging and i'll draw that in there and if i hit playing here there we go two random sounds didn't really you know correspond to a game but just to show that there are sounds that will be played and when and we'll um our level switching will kind of allow those to finish playing and so let's actually wire these up to our game so when i do our grass level i'll come into our script here and now when we hit this on change scene button pressed we'll actually do we'll do the dollar sign we'll just get our button click sound here we won't store it to a variable and we'll just hit play and it's really that easy to play a sound and same thing too when we load our level in so we can just say function ready and here all we're gonna do is get our level loaded sound and hit play on that now we also um you'll notice i only added these these sounds to our grass level we'll also need to add them to our desert level and in order to do that rather than trying to copy and paste these i can select our desert desert level right click on our root node the desert level canvas layer and hit merge from scene you might never have used this button before but it's super helpful and this lets you merge specific nodes in from another scene so i'll select our grass level because that's where our sounds are and you'll see both of our sounds appear here so i can select both of them hit ok and all of a sudden boom we've got these new sounds here if i hit play you'll hear exact same thing that we had before okay so i think we're pretty much good to go here there's just one more change i want to make before we try it out and i was having us play our level loaded sound on ready just so that we could demo it and hear it play but i actually want to change this to be a function we have to manually call so i'm going to say just say like you know play loaded sound and so this will be a function our scene switcher will call when we actually load in our new scene but it won't happen by default and we'll come back to that in a second but now if i come to our scene switcher and again make sure that we're running this from our scene switcher or that's your main scene that's running automatically if i run this we should hear that when i hit this change scene button we change scenes but you might have noticed that let's do it again notice how it gets cut off right at the end and that's because as soon as our animation is finished we are deleting we're freeing our current scene and it's not giving the clicking the button audio enough time to finish and this is where i talked about wanting to move our logic for freeing our current level to the level itself so what we're going to do is come into our level script level.gd and we are going to have a function called cleanup and it won't take anything for now but this is just going to be where we do all of our cleanup and it's in this cleanup function that we could do any other last minute cleanup logic we need but for our purposes we're just going to call cue free now when do we want to call q3 here well it's when this button click sound is done playing and so what we can do to make sure that we are waiting for that to happen is we can say if buttonclicksound.plane this is a boolean property so if it's plain we can yield or wait until that signal is done and if you've never used the yield keyword in godot before it takes two parameters one is the node that you're yielding for a signal to so yield depends on signals so the signal we want to wait for is this the finish signal which is a signal on all audio stream players so we want to wait for the finished signal on our button click sound if i click on our button click sound and go to node you'll see that there is a finished signal there so that's the one we're waiting for so we need to say we're waiting for a signal on button click sound and the one is finished and you'll see it auto completes it because it knows which signals we have so we're gonna wait for the finished signal on button click sound so if it's not playing it'll just q free right away otherwise we'll wait for the sound now we actually need to call this cleanup function right and we need to make sure we're not cueing free from our scene switcher so if i go back to our scene switcher i'll get rid of this q3 and change it so that we call cleanup on our current level and notice now this is totally asynchronous we tell our current level to clean up and then we totally forget about it we just go on to our next level we set our current level to be our next level and so our current level the old level is going to be doing this cleanup in the background and it will delete itself automatically and you'll see that if i run our game and our scene switcher and i'll open up our remote tab over here so you can see the nodes that exist in our in our game itself so now that i've done this you'll see that in our game itself we have this grass level if i hit our change scene button it'll do the transition and now we've got a desert level and watch our grass level disappear once the sound is over same thing if i change our level again watch this desert level disappear now and it's happening totally in the background totally asynchronous and we've got some really good code that's just kind of handling it for us which is really awesome so now that we've got that there's two changes we can make to really finish this out one is we can add another case to our animation player finished function here this match so i can do fade out and here's where you could do some other logic if you wanted when it's done fading out but what i mostly want to do is use that function we added to our level a bit ago to play our loaded sound so i'm going to say current level dot play loaded sound and then now we're gonna actually play that loading sound when we're done fading in to our new level so if i run this now run our scene switcher we'll see that if i hit change scene it'll give us a notification it'll give us the little doorbell sound when we're done switching scenes so this isn't you know it's not amazing i probably wouldn't do that in a game but just to just to show you all is kind of an example of how this works and all the different places you can modify and expand and customize the scene switching transition now one other final change i want to make is you'll notice that if i press these buttons this change scene button very quickly i can do a lot of damage by creating tons of different scenes right away which is not what we want we want to prevent the user from being able to do that so in order to do that what we're actually going to do is disable our button so if i come into our level script we want to disable our button one after it's been clicked and two until we are fully loaded in so in order to fix that first problem of making sure we can't press it again after it's been pressed i'm going to come to our on change scene button pressed function here and just say change seam button dot disabled this is a property so we have to set it to be true so as soon as we click the button it's now disabled okay that's really awesome and now we just need to make sure that once we load in a new scene the button is disabled until the loading is done so in order to do that i can actually one come into our change scene button here in our scene tree go into the inspector and then i can actually hit the disabled button in the base button so you won't be able to press it by default and then what i can do in our level is when we call this play loaded sound uh so whenever this is being called from our scene switcher when the end of the fade in is complete or the fade out we can say uh change seam button disabled and set this to be false and you can now press the button now this is going to work except for one problem which is that in our initial loading of the level our button is now going to be set or disabled by default so in our scene switcher we can fix this pretty easily by just saying current level dot play loaded sound okay so we are good to go except we need to make sure we also disable our change scene bone by default on our desert level two so i'll select that and now if i come to our scene switcher and run our game watch what happens first we'll hear the loading sound initially right away just like that and now notice as soon as i press the change scene button that we won't be able to press it again it'll become disabled just like that and then did you see there how our button was disabled until the music played so watch this again and notice how when our level loads in it's disabled and then it becomes enabled so look at that not only have we created a really cool scene switching transition system we've also added some safeguards to make sure that the player can't automatically switch back and forth between levels too quickly it makes it gives time for the animation the transition to finish and we are giving functions and methods for different levels to load in everything they need to do in the background and do the level of cleanup necessary in order to let sounds and animations or loading or data transfer happen in the background as needed thanks so much for watching i hope this has been a helpful video in the next one we're gonna handle actually passing data back and forth between scenes which is gonna be really awesome to see and it'll bring a cap to this series i hope you've enjoyed this video if it's been helpful a like and subscribe is always appreciated we'd love to have you in our discord feel free to ask any questions there the link to join that is in the description below if you do find my work helpful donating me a coffee on buy me a coffee link also below in the description is something that's much appreciated and helps me continue to make great videos thanks so much for watching everyone i'll see you in the next video you

Channel: jmbiv

Views: 3,479

Keywords: godot, godot engine, godot 3.2, godot tutorial, godot 2d, how to make a game in godot, game development, game development tutorial, game development for beginners, godot for beginners, game dev, indie game dev, indie game development, hobby game development, gamedev, godot game engine, jmbiv, godot change scene, godot switching scenes, godot scene transition, godot level transition, godot scenes, godot scene change, godot level change, godot transition between scenes, gdscript

Id: VcI22IKoT_E

Length: 24min 7sec (1447 seconds)

Published: Thu Apr 29 2021

Reddit Comments

[u/guyunger]

hey man, nice tutorial. one thing that I would do different is to use a yield in the level changing function, this way you can also keep the next_level variable at function level. so something like:

func handle_level_changed(level_name):
    next_level = load(level_name)
    anim.play()
    yield(anim, "animation_finished")
    current_level.queue_free()
    add_child(next_level)
    current_level = next_level