How to make a Simple Menu in Godot in 10 minutes

today we're going to make this simple menu screen you can move between options you can switch to a scene and you can exit i'm going to make this from scratch so okay first thing i like to do is go into my project settings set my resolutions so we'll go 320 by 180 and we'll set a test with height times three and [Music] 2d keep start with the margin container as a base node so you can always add margin call this main menu and then start setting up the control hierarchy start with centered and then vertical elements and then center and a label for the title text so this will be title text and i don't like the default font so i like this site fit font maker too i'll link it in the description and i picked uh shakir go2 all right shakira go2 so let's go new fonts dynamic font dynamic font data grab that font and sometimes it doesn't appear at first so i like to just toggle it the size we'll give it 32 and some some shadow and then we'll get the v box container for the options the center v box and we'll do a another center and h box so horizontal elements because we're going to have a label that represents the option that's uh like the current selected option and then the text so this is going to be its own text and this is going to be text as well so for this one i will first save this dynamic font as cargo and then i will just apply it here onto this element but i will make it unique because i want to make it size 16 and give it a shadow as well okay and then i'll duplicate this i'll call this selector this one can be just option name we'll call this start and then duplicate this call this one options and we'll call this one exits okay now one of the problems is that they're not the same width so we can grab the largest one which is 49 and give the other elements a minimum x of 49 and i'll do the same for the selector because the way that we're going to be toggling it to determine which one is shown or not is setting the text to empty and that kind of moves the elements which we don't want so we'll take that minimum x7 and apply it to all the selectors so that way that when we set this to empty it doesn't move the whole container all right let's give it a background color rect assign it a color say that looks pretty good and a script we'll do empty okay so first thing we'll do is set up the function that determines where the current selection is at so we'll have a current selection start at zero and then we'll grab a reference to the three uh selector texts so already var selector one copy the path selector two copy path and selector three copy the path and i'm just going to create a function that sets the current selection and we'll pass a parameter to that so we'll start by setting all the texts to empty and then only setting the one that we want to be the selected one so current selection is zero then we'll set it to greater than and we'll do the same for the others so selector two selector three and then in onready we'll set the initial one to be zero and we'll save this scene so now when we load it you can see that only the first one shows that it's selected next we'll want to listen for input going up or down the selections so we'll look at the input map and notice that we have ui left do i write ui ui down and ui accept to work with so let's listen for those inputs so we'll start by checking for this action just pressed ui down so for going down our selection selection is going to go from 0 to 1 so that's incrementing it so we'll increment our selection by one and set the current selection so let's test that out oh disappeared um oh that's why all these are zero okay there we go but if we're at the last one and we hit down it disappears so we don't want to be able to go down if we're on input two so we'll just add an if statement current selection is less than two and we'll pretty much be doing the same thing for ui up so only if it's greater than zero and we'll decrement so up down up down up going up didn't work ui underscore up okay cool next we'll um implement the acceptance the enter the space bar to accept to select an input but first i'll just add some space here looks better okay um let's create a sample scene to switch to so just a simple let's just give it color wrecked and i don't know center container and a label that just says first scene make this make it purple and we'll give this the same font first scene cool first same save save okay let's get a reference to this uh constant first scene equals prelude first scene and now we'll check for ui accept if we accept then we want to handle the selection and we'll create the function for that now handle selection so if current selection is 0 which is start then we'll switch scenes we'll switch scenes by getting the parent which would be the root note and adding the child first scene instance and then we'll get rid of this scene let's test that out so press enter and first name okay and we'll just check for the options one and i'll just print options and last one will be the exit which is just get the tree dots quick yep so we hit options add options so options would appear whatever start first scene and exit exits

Channel: Jon Topielski

Views: 39,255

Keywords:

Id: Jjv2MWbQVhs

Length: 9min 13sec (553 seconds)

Published: Wed Aug 12 2020