The EASIEST GameMaker Studio Menu Tutorial

by the end of this video you'll have made this very simple menu system hi there thank you for joining me my name is drew and this is a retro cemetery tutorial for game maker studio 2.3 we are going to use and actually this works for 1.4 and 2 as well so don't worry about that this is going to be a menu tutorial that is painfully simple because there's a lot of menus out there that show you either how to use like the mouse and you just hover over a button and you click on it and then it goes to the next room or something and that's cool but sometimes you want to use a keyboard or a controller on the other hand you've got some that show you how to use for loops and arrays and all these other crazy things that are wonderfully thorough but also kind of confusing for newer users so i developed this when i was just a little baby nude game dev and all that stuff baffled me wildly and it's really effective and it can work for almost anything so don't use it for like role-playing games or strategy games where you need a lot of menu systems but just for an arcade game where you just need to get started and maybe have some options or something this is great and it's really simple it's gonna be awesome for new devs so let's go ahead and get right into it let's create a sprite i'm going to call this this underscore menu and i'm going to change the size so that it's big enough to give me some elbow room edit image i'm going to make the background blue just so we can see what we're doing i like that blue a little better and i'm going to create a new layer i'm going to choose the white button or the white color and i'm going to hit t or you can select it from over here i'm going to start some text and say start menu and exit now if your words look really blurry and awful that's probably because you have anti-aliasing on that doesn't look great i don't like the way that looks so make sure anti-alias is off start menu unless you like the way it looks it's up to you i'm just trying to show you how i do this from here you can either just click off to the side or you can hit escape and ask you if you want to commit tool changes if you say yes it stays if you say no it goes away so pretty simple stuff go up here and hit ctrl v v control v twice so that you copy and paste these three frames mac users i apologize i don't know your shortcuts because i don't have a mac you can also right click and say copy and paste up here now we've got three frames that are identical we need to show which one is being selected so let's choose you hit the s key on your keyboard or choose the rectangle select tool and we're going to highlight the bottom two words and choose a gray color not the darkest gray because if you're on a black background that one's hard to see and then i'm going to hit either v or u select the color replace tool and i'm just going to dye these bottom to dark gray then i'm going to go to the next frame and i'm going to select start button and i'm going to hold control and highlight exit and hit v and then i'm going to replace those colors and then i'm going to do the same thing for the first two buttons right then i'm going to delete the bottom layer i want to make this stand out a little bit more i want to make it look like it's glowing because i think that's a cool effect so i'm going to say duplicate layers i do this all the time by the way use this for fire for bullets for menus i use this effect all the time select the bottom layer and go up to effects and select blur i'm just going to bump it up to about four and apply to all frames and just the selected layer why and now it looks like your button kind of glows this is a nice look image auto trim all frames and now it's just the size that i want it to be perfect let's go ahead and create an object and say this is oh underscore menu assign the sprite that you just made and start the create event say image speed equals zero that's very important then we're going to go to the step event and we're going to create some local variables now these variables are different from standard variables or global variables because they can only be used in this block of code only in the step vent can't use it in the create event can't use it in other objects and we only want to use it here so that's good we don't want to give that control to anything else so we say var up down except and back here we're going to say up down accept and back and here's a little cheat hold down the alt key and highlight off to the right and drag your mouse down so now you can write in this whole field we're going to say equals keyboard check rest and we're going to open some parentheses then we're going to say or gamepad button check pressed parentheses 0 comma gp underscore and then i'm going to do close parentheses and semicolon let's go fill this in this is going to be vk up this one is going to be vk down you know i just realized that you guys might have trouble seeing this if you're working on a smaller screen i'm going to make this a little bigger so that you guys can see you guys and girls can see exactly what's going on that one also image speed i apologize i should have done that earlier and it just dawned on me that you guys might be watching this on your phone or something and this helps a lot so we've got up down accept and back we're going to use keyboard check pressed which means only when you press a key not when you're holding it down and not when you release it because those are different functions this is just when you tap this button vk up so that's going to be your up directional p key on the virtual keyboard or gamepad button check pressed gp which is gamepad add u which is the directional pad and up and we've got down is going to be keyboard check pressed vk down or gamepad button check pressed 0 gp pad d this is going to be i'm going to use f and d for accept and back because your hands are probably on the asdf keys starting to say ord open parentheses open quote capital f close quote close parentheses when you're doing letters you have to put ord print parentheses quotes uppercase and then close it out that way or gp face one which is the a button on an xbox controller this is going to be ord quotes d close parentheses and this is going to be face two now if you're having trouble with any of this stuff just remember that you can middle click on anything in game maker and if it has if it's like a function or something it will bring up the menu and tell you exactly what it is and that's just fantastic especially with like the face buttons when you're getting into the xbox controller it's got this mildly confusing upside down illustration of an xbox controller but it is upside down so that you can see the shoulder and uh bumper buttons trigger and bumpers or however you want to call them and there you go so this is your pad up down left right base one phase two phase three phase 4 and so on you can study this on your own time i want to make this as breezy as possible for the menu tutorial but definitely come back here and check it out once you get into controllers all right so now we've got how to move up and down and accept and go back now we need to say if up and image index actually i'll show you how it is first if up image index minus minus and if down image index plus plus you could also say minus equals one but minus minus and plus plus is the same thing as saying plus equals one those means it's going to go down one and up one now why is that well that is because we've got three frames here starting at zero and then frame one and frame two and so we're saying you should remember we're saying no image speed so it's not animated at all and then pressing up pressing down advances you further into the animation and then pressing up goes backwards in the animation simple as that now this will cycle through that so if you keep pressing up you can go up and then it starts over at the bottom so let's go into a room and i'm going to make this room a little smaller create viewports enable viewports and clear viewport background very important i'm going to make the viewport visible i need to change the camera properties and the viewport properties it's going to be a room that's 360 by 180 and i'm going to change the properties to 720 by 360 which is double that size let's go ahead and bring the menu in and just put it dead center play so now we've got our menu here and you can press down to go down through the menu and up to go up through the menu and it cycles through very simple very cool but sometimes you don't want it to cycle through so we're just going to put a little condition in here if up and image index is greater than zero and if down and image index is less than two because we have three frames and it starts counting at zero so zero one two so it's saying for up to do anything the image index has to be above zero and for down to do anything it needs to be above it means it needs to be less than two so now up doesn't do anything if you're in the top actually it's not doing anything at all oh wait this needs to be greater than zero my apologies i had that backwards how silly and the this needs to be less than two so now you can go down and you can go up and they won't cycle back through simple as that if up in the image index is greater than zero because if it's at zero this does nothing and if down and image index is greater than two i'm sorry less than two because if it is two or higher this does nothing so let's try something real quick just want to make sure this works instead of saying 2 because your game might have more option menus than just start menu and exit maybe you have credits in there or some other function that you want a different room you want to go to so let's try image number minus one image number is the maximum number of frames in your sprite but it counts like image number for something that has three frames would be three but it starts counting at zero so zero one two so we need to subtract one from there let's just make sure this works yep that works just fine that way no it doesn't matter how big it is it'll still always work it'll never exceed what the maximum amount of frames should be and let me just try this on my controller perfect oh that's great okay now how do we get it to do the things now we just have to put some conditions in here now this requires a little bit of juggling so this is why this wouldn't work for like any game that has like a ton of menus or anything like that but for just something really simple like a little shooter or an arcade game this is perfect it's if image index equals two and accept game end because the second and uh image index is exit let's create another room real quick room this one is going to be actually let's just duplicate the room we had because then we don't have to set the measurements as we are underscore game and then we're going to start one that is duplicate that our underscore menu delete that from our game delete that now to know that we're in the game room we're going to change the color to red and if we're in the menu room we're going to change the background color to green no bad choice blue okay so this is just going to represent a menu like or maybe a credits room or something like that and then the game is going to be represented with a red screen that's just so that we know we're going into a different area so let's go back into our menu a menu option let's say if image index equals zero and accept room go to our game and then we're gonna do one more if image index is equal to one i'm sorry that is supposed to be two equal signs not one because two equal signs is asking a question it's saying if image index is equal to zero one equal sign is assigning something image index equals zero or something like that you always wanna make sure you're using two equal signs to ask the question does it equal that so if image index is equal to one and accept the room whoops room go to our menu all right so and just say yeah i realized that i put a back function in here but i have no use for it in this particular situation though because this menu option won't be in the other rooms so you won't need it actually so let's just go ahead and try this out alright so i hit the f key on start and it took me to the game room if i go down to menu and hit f it takes me to the options room and if i go down to the exit button and hit f it ends the game let's just make sure this works with our 360 controller yep it sure does so that is how you make a painfully simple menu system for game maker studio and this would work with any of them no problem you just have to remember exactly what your image index is supposed to be so i remember that zero was start one was menu and two was exit and it's really just as simple as that um yeah that's it and if you're making a small game this is just such a quick and easy way to just get things started and you don't have to worry about arrays or you know for loops and all these crazy things and trying to set up a whole menu system or anything like that it is just a very quick and easy simple menu the only thing that's kind of a pain is if you were to say like oh well now i want to add credits well now you have to go in here and you would have to make the height you know much bigger and then you would need to go through all your things and like scoot them down and then type in the center and then go back and change all your code and whatnot i know i made that change and i can't undo it oh well so yeah it does kind of lock you in which is not incredibly versatile it's not ideal but again this is just for a simple fast menu system i hope you found this useful thank you very much go make some awesome menus for your games take care bye

Channel: Retro Cemetery Gaming

Views: 2,453

Keywords: gamemaker, gms2, gamemakerstudio, gamemaker studio, gamemaker studio 2, yoyo games, game dev, indie game, indie game tutorial, tutorial, game development tutorial, game development, indie game dev, game design, menu, system, menu system

Id: B4LdYrjHSMU

Length: 18min 24sec (1104 seconds)

Published: Wed Dec 30 2020