How to Make Smooth Menu Transitions in Godot (Awesome Godot Menus #1)

in this series i'm going to teach you how to make an awesome dynamic good-looking main menu like you see in my game contrast la and in other games like no man's sky and destiny in this first video we're going to focus on just having smooth transitions between submenus like you see here that move smoothly between one menu to another to do that we're going to create a main menu that looks just like this and that lets you move back and forth between menu options smoothly transitioning between them the whole time let's get started so here's a demo scene that we're going to be using to help make this happen you'll notice here i've got a canvas layer so this is just going to be our main menu canvas layer i like to have all my menus instantiated with a canvas layer at the top just so in case you do end up putting them over your game it's easy to make them appear on top of the screen while your game might be running in the background but that's not super important what is important is you'll notice that i don't have a container as the root of my menus i've actually got this menu root which is just a simple control node the reason we want to do that is because godot's layout system is incredibly powerful and it's really really good for making layouts it's not very flexible though and so the the nice nicety of making really good layouts comes at the expense of being able to move things around easily your wrecked position size and scale are really determined by your container and it's hard to adjust those from code so what we're going to do is combine the best of both worlds we're going to make individual menu elements that use godot's powerful layout system but we're going to keep our top level menu elements themselves not bound by specific containers so we can move this menu root around and give it this nice dynamic feel while not having to worry about making the layout of our entire menu system itself so the first thing we're going to do to that point is you'll notice that this menu route i've set the layout to be full racked this means it'll take up the entirety of the screen whatever that is and i've got two menus so we're gonna practice transitioning left and right like we saw in that intro clip so this first menu is gonna be our main menu and the second menu will be you know sort of a secondary menu that will have so i'm going to set these both to be full rectangle i'll do that here and then do this here this is just saying hey take up the full width of our menu root but you'll notice i can still set these properties themselves i can move this around we are not being bound by a container because our menu root is not a container so we are still able to manually determine our location and properties and so what i'm going to do is look at the size of our viewport um we've got a 10 24 by 600 viewport what i'm gonna do is move our second menu to be um that much over to the right so we're gonna do 1024 and so now we've got the second menu that will be off screen it'll be off our camera you can see the little camera blue blue thing over there let me fix that uh that's weird so we're going to move this off screen and what's going to happen is our menu root is going to have a script that's going to determine it's going to slide this smoothly over into our main menu's position while sliding our main menu to the left so we're going to get this nice effect of being able to control our menu positions directly while also being able to let godot do all the work of laying out our menu for us one other thing to note is that this is going to involve some hard coding of size values but this is generally okay because once you you pick a project resolution you're generally not going to change it so we have a width and height of our game of 1024x600 another thing we can do is use the the stretch mode of 2d and the aspect of keep so we can make sure that this isn't going to change as our game is resized it's going to keep the same aspect and so these values are going to be constant in whatever type of resolution or window our our user is using so now that we've got that we can start adding these scripts okay so i've gone through and added just some basic uh labels and buttons here just so that we have something to work with so i've got like we said before we've got our one our menu one which is our main menu i just added a center container with a v box container to kind of stack these buttons here and i added a title and just some tool buttons which are buttons that just don't have any styling to them because we just just to make keep it simple so we've got these three buttons and all we're gonna do is work with option one and when we click option one it's gonna bring us to the second menu which i just added just to have some variety just a regular v box container no setter container just some labels nothing there and then a back button that we'll be able to use to go back to the main menu so now that we've got both of our menus and that and they are they have some content that we can see let's actually add a script to our menu root here and we'll start getting the animation going okay so i'm going to come to our menu root i'm just going to add a script here we'll just call it menu root for now and we're going to need to start adding some things in so first let's talk about the variables we're going to need we need to keep track of this origin here where our menu our currently visible menu needs to be and the current menu size and so we're going to keep track of that and we're also going to have a method of keeping track of where we are in our menu stacks so say there's a button you have like 10 menus that each lead to each other and you're all the way over here you want to be able to keep track of the order that you've moved across your menus and so we're going to use a stack for that so a couple things that we'll need we'll save our menu origin position and this is going to be a vector 2 and we'll just default these to vector 2.0 and then we're going to make another one of these except instead of origin position we're going to say origin size so these are going to keep track of our menus position and size and again this is going to pretty much look like what your window size is but this allows for some flexibility for resizing if you're not keeping the aspect you can update these whenever your menu resizes so there's some room there to do different things and then we're going to say var current menu this is just going to keep track of which menu is currently visible and then var menu stack and this is just going to be an array that oops of an array that's going to hold our stack of menus godot doesn't have a built-in stack data type but we can pretty much make our own just by using an array so now we also need to get references to our different menus we only have two so we're gonna say menu one and this is gonna be menu one and we're gonna just copy and paste this and we're gonna do menu two and do the same thing here so now we've got references to both of our menus we're able to move back and forth between them so let's start adding some of this code the first thing we need to do is in our ready function we're just going to replace this basic one here and we're going to say menu origin position and this is going to be vector 2 of 0 0. now we could be a little bit better about that and we could actually get this value by calling in our you know menu one or knowing what our default menu is but we know that it's gonna always start at zero zero we've intentionally done that so we can say also menu origin size is also going to be vector 2 and we're going to say this is rect.size we're going to get our viewport rack here so get viewport rect and this is going to get the size of our viewport the size of our screen so again there's some room here this is going to help us work with resizable if your game is not keeping the same aspect or is able to be resized you'd have to you'd want to call this and reset your menu origin size whenever your node gets resized there are some uh there's a resized signal on nodes so you might want to use that but we won't handle that in this video so it's gonna be get peoplerect.size last thing we need to do here is just set current menu to our menu one so we're gonna set our current menu to be menu one which is great so now we need to add in some functionality to move between menus so what we're gonna do is just say function move to next menu i will change that more in a second and we'll have another one called function move to previous menu just like that and so we're going to use these two to kind of connect our buttons going forward or going back and we're going to pass in to these a menu id and this is going to be a string so we'll say next menu id and this is going to be a string because we want to use the same move to next menu function for any of our menus regard we want it to be dynamic so this is going to allow any menu to move to another one by doing this and we'll just add it to our stack for our move to previous menu we don't actually need it right now because we're just going to go back in the stack we've already got that data okay so let's start getting our next menu first we're going to need a way to actually convert from this menu id this string to our actual menu object so we're going to add one more function this is going to be func get menu from menu id and this is going to take a menu id which will be a string whoops not stirring and this is going to return an object we won't actually give it a return type right now uh oh we'll give it a control because they're all some form of control here so we're just going to use a match statement which is like a switch and case statement and other languages so we'll say match menu id and then we're just going to pretty much look at what we're doing here is we're going to give easy to read names to our menus so we'll say menu one and this is just going to return menu one and then we'll do the same thing for many two as we can return menu too and then we'll have a default here just because we need it we'll return menu one okay so now we've got a way to convert from these strings that we'll assign and make it this is just an easy way so that when you're designing a new menu you can just give a string rather than having to worry about trying to get a different menu from somewhere else the purpose of doing this is that each individual menu does not have to know where the other menus are on the scene tree all it knows is there's an id it's supposed to go to and so it kind of decouples your code from each other each menu doesn't really have to know about the other which is nice so now that we've got this get menu from menu id function let's start implementing our move to next menu so we're going to say var next menu here and this is going to be get menu from menu id and we'll pass in next menu id so we're going to get the actual menu object one of these from our get our next menu id and then we're going to do two things we're going to say current menu dot rect position so this is erected global position excuse me so what we're going to do is we're going to move our rectangle our current menus wrecked one screen size to the left and move our new menu one screw size to the left also which is going to put it in the middle of the screen so we're going to say our wrecked global position here is going to be equal to and this is our current menu so we want this to be the left so this is going to be equal to negative menu origin size.x and then zero so we want to take the size of our menu and move it left move our menu all the way to the left that amount so move it totally left we're not changing its y because we'll just keep it in line and then we're going to do this with our next menu we'll say next menu do that whoops direct global position and we're going to set this equal to vector 2 of menu origin position or sorry not vector 2 we'll just say menu origin position since it is a vector 2. so now whenever we click on this next um we click on this uh on to move to the next menu we're gonna move our current menu to the left and move our next menu into the viewport and this is gonna work great the problem is that it's gonna be an instant transition so it's not going to look great but we will address that in a second the last thing we need to do with this too is say menu stack dot whoops dot append and so we're going to add on to our menu stack our current menu so this is saying and remember we haven't changed our current menu to be our next menu yet so we're adding the menu we just moved out of site to our menu stack so we know where we've come from we're adding it to our array here and then we can say current menu equals next menu and so our stack now is a reference to our previous menu even though our current menu is now the menu we have on screen and so with this in mind we can now actually go and start implementing our move to previous menu so we're going to say var previous menu and here we're going to grab this off of our menu stack so menu stack dot pop back and so we want to make sure we're actually you know we haven't messed up how we've set up our menu we want to make sure there's actually a menu that we've been before now so we want to say if previous menu does not equal null so if there's an actual menu to navigate to we're going to say pretty much what we've done up here we're gonna say previous menu dot rect global position uh we can actually really just copy these but we're gonna move our previous menu to be menu origin position and we're gonna move our current menu to be that wrecked global global position and we're going to move our current menu to be the same up here except instead of negative because we want to move our current menu to the right we are going to move it menu origin size dot x all the way to the right and then the only other thing we need to do here is say current menu equals previous menu and be this pop back function here removes it from the array as well so you don't have to worry about that so this is going to handle pretty much everything we need just to get basic movement between menus and get rid of that placeholder comment there also get rid of this plot process function the only other thing we need to do is actually hook up our buttons so if i come back to our menu root we can grab our option one button i can just connect the press signal here we'll connect to our menu root and i'm also going to connect on our menu 2 our back button connect the press signal here and what we can do is just on both of these call the functions that we just made so we can do move to next menu and we'll just say menu 2 is our id because remember we're trying to match this up here and when the back button is pressed we can say move to previous menu and that's all we really need to do so now if i select our scene here and i'm going to hit command r to run this we'll see that we have this menu here and if i click on option one all of a sudden we're on our second menu and if i click on the back button we're back on the main menu so this is great it's a super easy way to transition between menus but now we're going to actually add animation to make it look a whole lot better so there are two primary ways that you can do transitions in godot you can use an animation player and you can use a tween the problem with the way we're doing this is that because our positions are not set in stone it's going to be easier to use a tween than an animation player because with an animation player it's much harder or impossible at times to use dynamic values you usually are hard coding property values so what i'm going to do is add to our canvas layer here a tween node and then what we're going to do is within our menu root we are going to grab that actually i think it's a child of our menu which is totally fine so we'll say unready var between and this is going to be tween whoops to capitalize that between and i guess it's not our child of our menu root so we'll just make it child there we go and so now we've got between and what we can do now is use our tween to move between these positions so rather than just setting these positions and hard coding them we can actually interpolate between these properties so what we're going to actually do is replace these calls with a tween dot interpolate property call and what this does is it takes a property and you give a starting and an end and it will interpolate smoothly between those two so we're gonna do two calls to this one from our current menu and one for our next menu now before we get into this we also need to determine how long it should take for a menu to transition from one to another so i'm going to add another thing here or another variable we'll call this menu transition time and this will be a flow and we'll set it to half a second so 0.5 so this is going to be the time it takes for our tween to move menus back and forth and you can adjust it as needed for your game so the first thing we're going to do is replace our current menu we're setting this to be to the left so we need to slide our current menu to the left so if you look at the properties here we need to tell it which object it's actually acting on which is our current menu then we need to give it the property which is going to be rect global position and this is a node path or a string you can use here and then we need to give it an initial value which is just going to be current menu dot wrecked global position so we're going to go from its current position and then our next value is going to be what we have up here this menu this vector 2 of negative menu origin size.x and so it's going to go to the left that way and then the final properties we need to give it here are a duration it's kind of hard to see here but this one is a duration so we'll say menu transition time and then you can specify and pass in different easing functions after this but these are optional parameters we don't actually need to do it so this is going to be good enough for us so now that we've got this let's make a new line and this is going to be i just copied and pasted it and this is going to be moving our next menu to the current menu area to the viewport to what's visible to player so we're going to start from next menu direct global position and this is where we're going to move it to be vector 2 of 0 0 because we want it to be centered right or sorry not zero zero menu origin position which is zero zero in this case but again we want to um just be a little bit flexible and allow that this might be different at different time so menu origin position so now we've got these two tweens here and they're good to go the only thing we need to do is actually start them so we need to do tween dot start and now we're gonna have a nice animation oh and i need to get rid of these two lines so get rid of lines 25 and 26 here so we're only moving by the tween and now we've got this nice animation that's going to slide our current menu to the left and slide the next menu into view at the same time and it's going to look really good we can also do the same thing with our move to previous menu so instead of doing these two hard-coded positions here we can kind of copy these three lines up here and we'll adjust as needed whoops okay so here we want to move our previous menu and current menu so we're moving both these it's both rec global position but our previous menu is going to be menu origin position so we'll set that as our destination here we'll keep the same menu transition time and so previous menu and we need to make sure that this is also previous menu so we're moving our previous menu from its current position to the menu origin position and then we're moving our current menu to instead of negative menu origin size.x to positive menu origin size.x so we're moving it to the right so i'll copy that in there and this needs to be current menu okay and so now we've got nice tweens that are going to animate nicely for both going to the next menu and the previous one the only thing we need to do is make sure we take off lines 35 and 36 so that we can actually see it in action so now i'll select our menu root hit command r or control r to run it and we'll see so i hit option one smoothly move to the right and i hit the back button smoothly move to the left so there you go we've got this nice transitioning menu animation and you can do some stuff like adding some vertical movement you can make it go slower faster you could even not make this go totally off the screen you can make it move a little bit to the left and have them both be visible on the screen at the same time there's a ton of options that you can do with this it's really flexible but see how we've gotten the nice benefit of we're able to get this smooth transition animation by using this menu root that's a control node but we're also letting godot handle making the layout of our menu itself so we've got these nicely laid out buttons and and labels and elements and we can make these really nice menus that look good but also handle moving between them with ease so here's what we have everyone we've got an awesome looking menu that you can move back and forth between different sub menus with ease it looks good and it's nice thanks so much for watching i hope this video has been helpful if it has a like and subscribe to support the channel are always appreciated we'd love to have you in our discord server and if you have any questions you can ask them there the link to that is in the description and if you found my work helpful donating or buying a coffee on buy me a coffee are always appreciated and helped me to continue making great free tutorials and content for godot thanks so much everyone see in the next video you

Channel: jmbiv

Views: 3,208

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, how to make video games, how to godot, gamedev, godot game engine, godot menu, godot menu tutorial, godot ui, godot ui tutorial, godot menu system, godot tween, godot tween tutorial, godot control node, godot ui animation

Id: 3lgjj7Wccyw

Length: 21min 35sec (1295 seconds)

Published: Thu Jan 14 2021