Gamemaker: Menus with Submenus #1 (GML)

do you need to add a menu to your game that also includes sub menus we'll keep watching and I'll show you how good a gamer's let's have a look at the menu that we'll be creating for this tutorial it's simply controlled with the arrow keys while enter or space we'll make a selection once you pick something you can then be offered another menu with more menus easily added before I get started though I also have a great game maker course over a new to me which shows how to make a complete platformer from start to finish there's a coupon code in the description which gives you up to 90% off the retail price so check that out if it's something you're interested in now let's get started with the menu so let's go to new and let's make a new game maker language project now I'm just going to call this menu and press Enter now the first thing we want to do is create our object so I'm going to go right click on object say create object and I'm going to call it o underscore menu now for the room I'm going to open that up I'm just going to rename the room by clicking on it pressing f2 and I'm going to call it R underscore menu now if we go into the room I'm just going to resize the room I'm going to make it instead of a thousand 24 just gonna make it 800 wide and a 600 high just to make it a little smaller and I'm gonna drag the menu object into the room now let's go to our menu object and let's add a create event so the create event will run when the object is created now the menu works fire an array so honoré is just a variable that can store multiple values and you access the values in the array by an index and the indexes is the number that points to a position in the array but let's add out right I'm going to call this our main menu now I'm just going to call the array menu and we open a square bracket and we write a value and then close the square bracket so we're now storing something in the position zero on the array and we'll call this one start now I'm going to duplicate that you can do that with control D and we'll do that twice so we're going to have menu one and menu to the number one I'm just going to call options and then number two we'll just have as exit now at the moment this is just a one dimensional array so I want to set that up first because that's the simplest menu you can create and then we'll change it a little to add the extra levels so we need a way to know which menu item we're pointing it I'm going to call that the index I'm going to set index to zero at the start and basically this is our menu index position so we know whereabouts we're pointing now I'm just going to create a step event now this step event will run every step of the game which by default will be 60 the first thing we want to do is get the players input so when they're arrowing through the menu we want to capture that so I'm going to capture it into a local variable with the prefix var and we're going to call it up I'm going to put an underscore before it because I'm doing it as a local variable and I like to use a and under school to indicate that it turns yellow indicating it is a local variable we can capture a key press by saying keyboard underscore check and the school pressed and we want to capture the up key of ek underscore up duplicate that twice we're going to change one of them to be down and we'll capture the down key the same way and we also need a selection key so I'm going to call this one select and we can capture the enter key but you might want to press space as well so you can put them all here like a copy of this and we'll change this to space I know how this works is when we are pressing the up key the up variable is set to 1 when we are not pressing it it's set to 0 so we can use that information and I'm going to store that into a variable called underscore move so if we write underscore down - and let's go up then we can set the value of move when we are pressing one of these so if up is being pressed the value of move is going to be minus one because it's 0 minus 1 and then that'll allow us to move up in our menu if down is being pressed and up is not being pressed then down we'll have a value of one up we'll have a value of zero so move will equal one and that'll enables to move down in our menu let's use that to say that if our mood variable is not equal to zero which means we are pressing something then we want to move the index and we can do that just by something index plus equals underscore move so we're adding the value of move on to the value of index and that'll move us either up or down in our ArrayList now there's a problem with that and that we could reach the end of the array or we could reach the start of the array we don't want to go beyond those limits so we need to clamp our values now in order to clamp the values I'm going to first look at the size of the array so let's make a variable called size we're going to look at the array length we just want the array length of 1d at the moment because we're doing our 1 dimensional array and the array is just called menu so we're just storing the size of that array into that variable if we just look back at the array our first item is 0 and our last is 2 so we can't go beyond those limits so we need to ask this question and say if our index is less than 0 well then our index is equal to the size minus one and the reason it's minus one is because if our array just has one element then the array size is one even though our index is zero the array size is still one that the array size is one more than the last index so when we have three items our array size is three but our last element index is 2 so the other thing that can happen is we go too far we go further than two at the moment but we can say else if our index is actually greater than or equal to our size well then we can just set it back to the start so index equals zero [Music] basically this means we are at the start we just want to loop to the menu end and this one is indicating that we're at the end so we want to loop to the menu start that's what we need for our menu there now we need to actually draw our menu but let's add a draw event we need to draw it so it loops through the array and it draws each item but the first thing I wanted to do is Center the text so I'm going to say draw set horizontal align and we're going to set it to FA underscore Center so that will ensure our text is centered now let's create a font to draw it in I'm going to right click on fonts go to create font and I'm just going to call this fmt underscore menu now your font selections will be different than mine I'm actually going to go down all the way and choose myriad Pro I'm going to set it to 26 you can choose whatever you like I'm just going to close that down and we'll go back to our menu now we can set the font so I'm going to say draw set underscore font and the font name which is fmt menu now because we're drawing multiple items of a menu I want to control the gap that's between each item I'm gonna set the line spacing and just create a local variable called underscore gap and then set it to 40 now we can draw the items so now I want to create a loop and the loop will go through the array and we'll output each element so if you press the f4 key you can bring up some quick selections that game maker has number 5 is to add a for loop let's just click that and now we need to loop through each element in the array so we can look at our array length like we did before and we need the length of menu so the for-loop will actually loop through the array and I will be the index while we're looping through but we're going to draw the array so I'm going to say draw underscore text and we need a location so we need an x and a y position to draw it I'm just going to do it that room underscore width divided by two and for the Y location I'm going to set it to room and it's got height but this time I'm going to times it by 0.4 so that it's not quite in the middle and then we're going to add the gap times I what that means is this gap value will be applied when I increments so I at the start is going to be zero so the gap actually will be zero but for the next element I will be one so the gap will be 40 and the next one will be 80 and so forth so you can use that to ensure that we get a even amount of gap between them now we need to have our string what we want to output so we're going to output our menu and we're going to output the I element of the menu those are brackets now the only thing wrong with this is that all elements will look exactly the same we need a way to know which element we're actually pointing at let's just go to the top here and firstly let's draw a color so I'm going to say draw set color and just draw it in white and now we need to look at our index variable and if our index is actually the same value as I well that means we're currently trying to display the value that our index is pointing at so if I is equal to index let's change the color because that's the one we're currently pointing it they will say draw set color and I'm just going to set it to see underscore teal now let's press play and see what that looks like now when we go up and down the menu icon shows which one we're selecting and that looks great now currently we're in France enter nothing happens so let's go set that up but back in our step event just down the bottom we need a way to utilize our select so if our select has been pressed so if I select is one now we could say if select is equal to true but essentially this is the same as writing if select because if the variable is true it's going to process the if statement anyway so get select we need a switch statement here in a switch statement lets us choose an option from a selection of options but it only allows one choice so we can say switch and we want to look at where we're pointing so where our index is pointing and based on where our index is pointing we want something to happen so we can say case 0 and case 0 will be our start because back here under the create 0 is that start 1 is an option 2 as an exit and now if we duplicate these I'm gonna select them all press ctrl D twice and we've got a case 1 case 2 this is our options and this is our exit so under here you can then write what you want for each one but for example in the start we could say room go to next now we don't have a next room so let's just go over here and let's create another room and we'll just call this art on the school game and maybe in the background we'll just change the color the blue so that we know that we're actually moved to another room - something like that we have another selection here and that's four options so we'll do that in the moment and our exit we can just say game on display and but now when we run we should get a little depressed enter and a selection occur but when we go to start we get another screen and we move to the next room so that works great so now the big question is how do we add submenus we want to add something to the options so we can select something in there as well but if we go back and look at our array this is what's called a one-dimensional array no only holds one row of data we can have something called a two-dimensional array and that's where we add another element and essentially we then can store multiple rows and each of those rows will be a different menu oh let's make this a two-dimensional array I'm going to hold down alt and drag down and that'll let me type into multiple rows at once I'm going to put 0 comma oh now made this a two-dimensional array we have another value here so essentially it's given it some height let's duplicate this and this is going to be our submenu one essentially this one is a submenu 0 now for the menu I'm going to just call it options now for our zero I can hold down alt drag down and then have one so this is our next element in the two-dimensional array but for our options menu this is where we're going to go if we choose options we can have a graphics and we can have say sound let's duplicate this and let's have a controls but it's going to make sure these are right so we have zero one two and three now the word exit should be back we want to move back if we're inside that menu and then back will take us back to the sub menu before we need another variable here and that variable is to know which sub menu we're looking at so let's call it sub on a school menu and we'll set it to zero so this is our current sub menu we need to make a few changes because we have a two-dimensional array now so in our step event where we are getting the length of the array this no longer works we need to change this to 2d for a two-dimensional array and we need to add which particular index we want to get the length of what we want to get the length of whatever sub menu is pointing to at the moment our sub menu variable will point to which sub menu which one of these we're pointing to that will get the correct length and then for our output we actually need to do the same thing here we want to get the length of the submenu and just for the output down here we need to ensure that we're looking at the submenu and we want the eye index for the submenu now there's no reason to test it now because we're still aren't doing anything with our selections we need to change here what happens when we select something let's just make this larger so we can look at it better now at the moment when we come in here we're just looking at our index but that's not enough we also need to look at which submenu we're currently pointing out whether it's of a new 0 or submenu 1 so we need another switch statement here so let's say switch submenu open brackets and close our records now we can indent this and do it twice because we need a case statement here that points to our zero case and a zero case it's going to be our main menu and then down here it's going to be our break now when our sub menu is 0 we'll come in here and then we'll be able to choose one of these based on our index if our sub menu is one will then we're in the options menu so we need to have another case statement for the options but let's duplicate that and this time our case is going to be one and this is for the options what are we right here well let's go back and look now options are graphics sound controls and back so they're going to be our cases so we have graphics we might need this sound to these comments will just help to give you a better idea when you're building your menu and when you want to go back and look at its really good idea to write the comments in with the double forward slashes this is controls and the last one if we just duplicate this change it to case three and this is our back and now we need something to happen when these things are selected but four options if we choose the option well then what we're doing is we're changing our sub menu from zero to one cause then it'll open this so let's do that let's set our sub menu to equal one and at the same time let's set our index to equal zero and that means that when we go to the sub menu we'll go to the first entry in that menu but similarly to that if we go down and look at our back if we choose back well then we want to come out of this submenu and go back to the one above no we're going to set our submenu to zero but this time we're going to set our index not to zero because if you go back we don't want to go back to start we actually want to go back to options because that's the menu that we were in so let's set our index to one now for graphics and sound controls I'm not going to do anything just right now on this let's test this out though press play and now we can go up and down we can select options with enter or space and we go to another menu now at the moment these all don't do anything but if we press back we go back in is still highlighting options which is what you want but that's how you do menus with sub menus now before I go I just wanted to show you some of the things that you can do you'll notice some additions here that enable some smooth scrolling to a larger scaled version of the text also once we get down to the menus when you try to make a selection your choices actually change the text so you can change individual text or you can actually have one text changing another one as well but these are just small additions if there's enough interest I'll make another tutorial showing how to do those kind of changes so that's all for this tutorial thanks for joining me and I'll talk to you in the next one [Music]

Channel: Slyddar

Views: 6,223

Keywords: Gamemaker, menu, make menu, studio, slyddar, gms2, add menu, submenu, ui, game ui, drag drop, dnd

Id: _2CrhKO5ojE

Length: 19min 53sec (1193 seconds)

Published: Mon Mar 16 2020

Reddit Comments

[u/Slyddar]

I've seen a few tutorials that show how to make menus, but they are always single screen menus, with no submenu options. This tutorial shows how to do the single menu, then builds on it by adding additional options for submenus. Hope some of you can find it useful.

[u/Nixu123]

Rooms exist...