How to Make a Menu System (with Submenus) in GameMaker Studio 2!

yo in this video i'm going to show you how to make a menu system in game maker studio 2 complete with sub menus exactly like what you see on screen right now this is a deceptively simple but very customizable menu box so the first couple minutes of this video are actually going to be dedicated to showing you how to set up your own font and nine slice sprite it's very very short segments but as that stuff comes up i include time stamps on the bottom of the video so if you want to skip all the font stuff you can but i seriously recommend going all the way through it if you do go all the way through then you'll be able to pretty much make any kind of style of menu box you might want to make with very little extra work [Music] all right class let's get started for the sake of clarity i'm putting everything that we're going to do in this video in this little purple folder called menu system and i have three things in there right now one is just a blank room that i call the room title screen this is what i'm gonna actually use to put my menu in to test it we have a custom font and a background for the menus so i will show you both of those super super quick so in sprite main font i have this which is most of a font just a very very simple pixel art font feel free to pause this as i scroll through and if you want to copy it whatever you don't have to make your own font but it's just a lot more smooth and handy to have whenever you're using your like everything is totally your own assets and you're going to make sure while you're making your own or copying this or whatever that all of the characters are in the same position like this and you're going to want to make your font in this exact order this order is very important for game maker to know whenever we actually set up this font what to type then once everything's in the same place you can go to image and then auto trim and it'll make your sprite as small as possible without cutting anything off of any of the letters and here in your workspace just make sure that your origin of your sprite is in the top left now we have the menu background we're going to use and game maker 2.3 has 9 slicing which is a great feature that is super super useful for menus and text boxes all that kind of stuff it basically means that you can make a sprite background and resize it however you want and it won't stretch and strain itself in weird ways it also means it's very very easy to do cool little animated backgrounds like this so i'll show you really quick how to set these up so in my image editor i'm gonna go ahead and resize these frames to 48 pixels by 48 and now you can see how it's divided up there's a center piece there's a top left bottom and right i have it animated so that it'll loop as it goes diagonally down but you can just have this be a solid color whatever then i did the same thing i did with the font and i auto trimmed it to get rid of all the excess stuff out here we can go to the nine slice panel activate nine slice make sure that it is checked on and then you can drag these borders to tell game maker where you want it to actually separate it out if you're just using a solid color it doesn't really matter but if you do have like an animation or you're doing something like this you can select the left bottom top and right and the center all separately and switch them down here in tile mode to repeat i think by default they'll always be on stretch which can make an animation or something look a little goofy okay and the last thing is just make sure that with this sprite our origin is also on the top left okay now that all that's out of the way we can actually start to making our menu so i'm going to create a new asset create an object and i'll call this object title menu i'm going to set its sprite to be our nine slice sprite that we made sprite menu and now let's set up our create event so first let's declare some variables for our width and our height of the box whenever it's drawn these are just kind of some values that i have picked this actually doesn't really matter right now but just for the sake of making sure that whenever we draw something it's something reasonable looking next i'm going to set op border as 8 and op space as 16. so up border will be how far our text is from the side of the actual text box that we draw and space will be the distance between the different options and now we can make our options so we're going to make an array and we'll just call it option so we'll say option 0 equals and we'll call this start game start game because this is our little title screen now we can make a couple more so let's call option one will be settings and then maybe option two will just be quick game [Music] quick game then a variable that we will use to keep track of how long this list of options is we can actually immediately do that by calling array length and we want the length of our option array so now our op length will be 3 and we're actually going to set this again in the step event because we want to keep track of this but that's a little bit later on so now we can add a draw event [Music] and first let's draw the little background so we'll say draw the menu background and to do this we're going to use the function draw sprite ext so we're just going to draw our sprite index the image index we're on which is important if we have an animated menu like i do draw add our x and our y and then here's what we really want is our x scale and our y scale to get those we will say width divided by sprite width and height divided by sprite height the reason we do this is pretty simple you can sort of think of it like this where this would be if we're talking about the x scale this would be our width variable that we set which would be 64 times 1 divided by our sprite width 1 divided by our sprite width is basically just returning a single pixel because if we look at our sprite menu here it's 20 pixels wide so if we are saying 1 divided by 20 up here 1 20th of 20 is one so this is just it would be returning one pixel and then we're just multiplying it times the width that we set here so it's saying one pixel times the width that we have which would make it 64 pixels wide and that's the same principle for what we're doing with the height over here okay now we're just going to set our rotation to zero we don't want that to change our color will be white which is just the blending image color it won't actually draw white it just draws it exactly how we created it in the sprite editor and i'm gonna set the alpha to one but you could make your own alpha variable if you wanted your menus to be slightly see-through you could make it a little bit less than one so maybe 0.75 and it would be a little bit see-through but i'm going one okay so we've drawn the menu background and i'll actually just show you this working right now let me go into my room and i'm just going to place this title menu object right here i guess and as you can see it is drawing everything properly with the dimensions i set so now we need to actually draw our options let's go back into our title menu object and now we want to draw the options and to do that we're going to need our new font which needs to be created in code first so i'm going to make another new object here and i'm just going to call this say object settings let's say this is going to be a persistent object that hangs out for the whole game and stores some important information that we're going to need such as a font so we can add our create event here we're going to create and store a new font in a global variable so i'll just call this global dot font main so that equals font add sprite and let's pass through our sprite main font now for the one that i made our first character that we're going to start pulling the font from will be 32. next it wants to know if we want our sprite to be proportional which means that it will calculate the space between the different characters based on how large the character actually is and we want that to be true if you set this to false whenever you type letters like i a very very thin letter will be put the same amount of space away from two o's would be for example if we say true it'll act probably more like what you would assume a font should act like and so then we have separation how many pixels of separation do we want between each letter and we're just gonna say one because we have a low resolution font anyways so one pixel will be perfect okay so now we have our font totally set up to use one more thing we need to do is add a clean up event here so we can delete our font because our font is taking up memory right now and if we don't delete it it will stay in memory and it could cause a memory leak which basically means that over time it could slow down your game and crash it so we can just go in our cleanup event font delete and pass through the font that we just made okay before we forget let's go ahead and put this in our title screen room i'll put it just in the top corner now because this is persistent just remember that you don't want to put this in a room that you're going to be coming back to a lot in your game because you don't want more than one of these running around it would be best to put these in like a title screen or maybe even a an initialization room that you run at the very very beginning of the game just keep that in mind okay so back to the title menu so now we can do draw set font and we can set our new font now we can do a draw set vertical align so v align that will be fa top and then we can do h align and set that to the left so whenever we draw some text and we tell it to draw at a certain point the top left of our text will line up with that point now the best way to draw all these options because we have a few different ones and we could have theoretically any number of them instead of doing each one individually it makes a lot more sense to set up a loop and loop through each one of these different options and draw it so let's set up a for loop and that looks like this so four parentheses let's set our let's set a variable a local variable so var i equals zero as long as i is less than our option length so the number of options that we have i plus plus and our curly brackets here to execute this code what this is doing is it's saying we're starting with bar i equals zero and until i is equal to the number of options that we have we will add one to it so let's use the function draw text so we need an x position y position and the actual string the text that we're going to draw for our x position we're going to say x plus the option border so that way our text isn't just pressed right up against the side of this little background that we're drawing here same thing with the y y plus op border and then we're going to draw our options here and so we're going to say option i so first we have zero so draws option zero then the next time it loops through it draws option one and then it draws option two and then it stops looping because then it's equal to the amount of options we have so it won't run this code in here anymore that's great and the last thing we need to do is we want to we don't want to draw them all in the exact same x and y position because then they would just draw on top of each other so we can do this to our y value we can add up space times i so whenever i is zero we're not adding anything else to the y and we're drawing option zero when i is one we are adding 16 to the y position then drawing option one and then whenever we get to two we're adding 32 drawing option two this could go on for as long as you wanted it to as long as you have that many options so let's run this and see what it looks like and there we have it it's not perfect right now obviously our background doesn't quite match how tall our settings are or anything like that but i'll show you a way to do that in a little bit first let's make sure we can actually select these different options so let's go back into our create event all this is great but now let's add another thing here and we will call this pause for our position this is the variable that we'll be using to actually highlight and select our options so let's do that in the step event first thing we want to do is we want to get some inputs so we can actually change our selection and all that stuff so we'll just say up key equals keyboard check press vk up and we'll say down key equals keyboard check vk down we're going to be using these stored values to actually move up and down in the menu so now we can go to move through the menu oops easiest way to do that is to say pause plus equals our down key minus our up key if you watch the rpg videos you know exactly why this works and i would guess in general if you're looking up the video on menus you probably know exactly why this works too when you go down the y value increases so we are only changing the value whenever an upper down key is pressed because these functions only register for one frame and whenever you do register one of them pressing down would make sure that you're adding to position which makes it go down pressing up means it would be subtracting so it goes up now we don't want our position to be out of the range of our array that we set here so we don't want it to be below zero and we don't want it to be above two because then we're going to get some errors so you can do this in a couple different ways i think a nice way to do it is to loop it so if you go if you press up while you're on the top option it'll send you to the bottom and if you press down while you're on the bottom one it'll send you back to the top so we could just say if pause is greater than or equal to our option length then we can set our pause back to zero and then we can say if our pause is less than zero we can set it to our option length uh minus one because our option length right now is three because we have three different options here but because we started counting our options at zero we want to set it back to two so that would just be whatever this length is minus one okay so we are going to move up and down with this but we can't see any changes yet so here is a nice little easy way to do that let's go back into our option for loop we will set a local variable and i'm just going to call it underscore c for color we can set it to c white first we can change our function from draw text to draw text color we can add our color here there are four different places for it because you can do kind of gradient stuff but we just want to do one solid color so they're all going to be the same one and then we set our alpha i'm going to set that to 1 again so this is doing exactly what it was doing before it hasn't changed anything but we can say if [Music] our position our pause variable is equal to the loop that we're running through at that moment then we can set our new color to let's say yellow so as this is looping through if our position is one on the one loop whenever i is equal to one which would be our settings here it now knows to color the word settings yellow or whatever we put here so let's see if that works and here we are all right perfect pressing down and it loops up and if i press up it loops all the way through okay now let's actually make some stuff happen whenever we press an accept button on one of these so back to our step event and we're going to add a new input i'm just going to call this accept key and i'm going to make this the the space bar which would be bk space so now we're going to use a switch statement to use the options if you don't know what a switch statement is it functions very similarly to having a bunch of if statements but it's a little bit nicer for a few different reasons and here's how you set it up so let's say switch we're going to switch the position variable which means that this is the variable that we're going to be checking let's do some curly brackets here and we'll say case 0 colon and then we're gonna add a break down here so this is kind of like saying if position is equal to zero or in the case that position equals zero run all of the code before this little break that we've put in so what do we want to do for zero if we go here our zero option is just start the game and in my case so that would just be room go to next so in the list of rooms that i have it would just take me to the next room in my room order which for me that would be room bedroom but that doesn't really matter right now so we'll comment this out and say this is start game then we have two other options so we have one here which is our settings which is case of one add the break here we're not actually going to be doing anything with this yet so we can just keep that blank and then we have quit game and that's case of two add a break here and we can call game end and before we test this we don't want to run this code immediately we only want to run it once the accept key has been pressed so we will say if accept key then we can run this switch statement and i'm going to tap this out to make it look a little bit cleaner so let me test all those really quick so first if i press my spacebar it takes me to the next room then if i press on settings nothing happens and if i press it on quick game my game quits perfect and now we want to see what a sub menu looks like so for something like our settings here we're going to want to have a whole different list of settings stuff like window size brightness controls whatever so we're going to need to make a couple little tweaks to what we have and then add a couple more things so first we're going to want to change option to a two-dimensional array and we would do that like this [Music] this way we can check what set of options we're using based on a sort of menu level which would be a really helpful variable to have so down here i'm going to add menu level equals zero now that we have it set up this way we can have a whole different list of say our settings so we could say option one zero equals window size you could say option one one is maybe brightness maybe one two is controls and then maybe one three the last one will just be back to return to the last menu i can label these really quick i'll just call this pause menu and call this settings menu and now that the size of our option list can change based on which one we're in we're going to need to set option length dynamically in our step event so in our create event we can just initialize it back to zero and we can go into our step event i'll put this under our inputs we'll say store number of options in current menu so we'll say up length equals array length and now that we have a two dimensional array we need to provide which of these this the array itself and then what level we're on so we'll say option and menu level so now everything that uses option length like all this stuff down here and this for loop right here to draw all the options is totally fine something that's not totally fine though is here where we're drawing option because now it has to be a two-dimensional array and we are drawing a one-dimensional array so this will give us an error so all we need to do is make sure that we are drawing the correct menu level so we will say menu level and then this option here okay back to our step event because we are going to be setting up another switch statement because now we don't just need to check what where our position is we need to check which menu level we're on so i'm actually going to clean this up a little bit and make everything a little bit more compact so i'm going to put all of these different case statements on one line each it's totally okay to do this so i'm going to add this here i'm going to move this up here and then i'm going to scrunch them all together just like this so that way it's a little bit more readable whenever we use our other switch statement so let's set that up so now we're going to switch our menu level i'm going to tab this over here and this is our menu levels first case so in the case that our menu level is zero we're going to run all of this code have that out and maybe tab these out a little bit so you can see it's just one thing and this is our normal pause menu this is the same exact thing that we were doing before but now we have room to add our settings menu so in the case of one now we can switch our position again [Music] and let's check what our settings were so for our settings we had window size brightness controls and back so our case 0 is window size so case 0 make sure we add in the break and we're not currently going to do anything with that and the same for the other options so we have our brightness we have our controls as case two and then we have back as case three now we can actually do something with back whenever we're going back from this menu we want to set our menu level back to zero and same thing with up here whenever we click on settings and when we're in menu level zero and we click on settings we want to set our menu level oops to one so whenever we press the accept key it checks what menu level we're on and then it decides what to do based on our position after that so let's try that okay so here we are so if i go down to settings and click on it yep everything changes so now we're on the second menu level here and it gives us our new options if i click on any of these nothing happens but if i click on back oh okay i totally forgot to add in a certain couple lines of code what was happening there is our for loop here was checking for our option at menu level zero because we set ourselves back to menu level zero but our position was still at three which that doesn't work with these options here that's that's too many so by the time we got to this for loop it was checking for menu level zero option three which is not a real thing so after we pressed our accept key let's store the value of our menu level by saying var and we will say sml or underscore sml for start menu level and that equals this value right now then we can go under our big switch statement here and we can say if our sml is not equal to our menu level then that means that our menu level has changed and we can set our position back to zero which is how most games work anyway whenever you click on a menu it will normally take you back to the top of the next menu or the last one so now our position is where it needs to be and we need to actually run this code right here one more time so that way our loop doesn't run too many times so we can just copy this and put it right back in here so and we will call this correct option length and i'm going to tab all this out so i know it's all part of this using the options so now let's check okay so go down to settings that's fine it took us back to the top like it was supposed to everything's good and if i hit back then it works fine okay great now we can fix kind of how ugly that menu looks right now first i'm just gonna add this because it looks kind of weird without a comment there and now we want to sort of set the position of our menu and the different options appropriately to look nice more than the positioning or anything like that i think the most important thing here is making sure that our width and our height of the text box matches how many options we have and how wide they are and stuff like that so let's go to the very top of the draw event here so we can calculate our width and height properly so we'll say dynamically get width and height of menu so to get our height we are going to say height equals up border times 2 because we're going to have that border on the top and the bottom of the menu box then we're going to add the height of our font sprite main font [Music] so now we have the exact height that the option is going to make up plus the two different borders and now we need to compensate for the other number of options we might have and we would just say plus the length of our options the number of our options minus one since we're already accounting for the first one here and times option space so now no matter how many options we have our height will fit perfectly and that's that so let's check that as you can see now it fits my options quite nicely and even if i go into settings it fits them perfectly too but our width doesn't dynamically change it doesn't look bad right now but if i happen to have a really really long option name or if all these option names were a lot shorter then it might look a little bit weird that it doesn't resize or anything like that so let's get our width too i'm going to put this above our height and first i'm going to set avar we're going to call this new un underscore new underscore w for new width we'll just start it out at 1 easy we're gonna use the we're gonna loop through every option again in the same way that we did down here so we're just gonna we can even just take this loop and set it up like this now we need to check how wide each of our options is so we can say var underscore opw for our option width we can call string width and then whatever option we're checking which would be option we need to check the correct menu level and then we need to check i whichever thing we're looping through right now and then we can set our new w to whichever of those two values is larger because we want to find the largest width and we could just say that by saying new w equals max then whenever you put max you can put any number of arguments in here and it will just return whatever the highest number is so we can say maximum we're checking itself and we're checking the new option now new w will be returning the longest option we have so we could say our width ooh width equals new w and then we'll do the same thing here with uh adding the borders back in for the left and the right and now if we check that so you see here our start game is the longest and you can tell that this is the same distance here if we go into settings you can see it resizes a little bit and now it matches perfectly with window size which is the longest option of these four okay and if we wanted to do just one last thing we can manually set our x and y positions to always center this little menu here so after we get our new width and height we can say center menu so let's set our x to equal our camera x so camera get view x of our view camera zero or whichever camera that we're using then we want to add half of the view width of our camera so plus camera get view width of view camera zero and half of that so divided by two we're only adding half of that so we can get half the screen and then we want to subtract half of our new width value and we can do the exact same thing with our y so y equals camera get view y plus camera get view height make sure you change this to height from width if you copy and paste it like i did and then we're subtracting half of our new height so if we try that out okay it looks pretty centered to me and centered okay thank you for watching the next video i'm doing is going to be a dialog system or a text box system in a lot of ways it's going to build on what we did in this video so if you're at this point in the video right now you should be well equipped to follow that one whenever that comes out it'll also be pretty customizable and give you a lot of options for branching dialogue and character portraits and all that kind of stuff so keep your eyes peeled for that one what you're seeing right now on screen is my game rosa star cross it's still in development but there is a free demo out on ichio h.i.o whatever you there are links to check that out below if you want to feel free to follow me on twitter maybe join the discord maybe subscribe i don't know man it's up to you hope you learned something and uh have a good day bye bye [Music]

Channel: Peyton Burnham

Views: 17,885

Keywords: gamemaker, yoyogames, rpg, how to make, gamemaker studio, gamemaker studio 2, gms, gms2, tutorial, undertale, earthbound, platformer, rpg maker, deltarune, code, programming, rpg tutorial, menu, menu system, submenu, submenus, textbox, textbox system, dialogue, dialogue system, branching dialogue, how to make a menu system, menu system tutorial, menu gamemaker, menu gms2, shop system, how to make a shop system, submenu system, title menu, pause menu, pause, menu tutorial, gamemaker menu

Id: xLasKr0ekHY

Length: 32min 38sec (1958 seconds)

Published: Thu Apr 29 2021

Reddit Comments

[u/Pawel0103]

Great tutorial bro! :)