GameMaker Studio 2: Complete Platformer Tutorial (Part 10: Menu screen)

hello everybody welcome back and congratulations on making it all the way to part 10 we're in double digits land how very exciting today we're going to be looking at something very important we're gonna be putting it together a basic menu system okay it's gonna be very simple screen first of all and we'll probably expand it a bit make it a bit fancier and light versions but we're just going to start off by being I'll to put in a few options move between them have it show which one we've selected at any point in time and then do a thing based on the thing we've selected okay that's the bare-bones functionality of any menu and that's what we're gonna be setting up today so the first thing we want to do is create a new room from then okay we want this to be a fairly separate screen and I won't use our transition effects that we created before to move from it to our actual game okay so I've gone and created something that looks very similar to a regular game okay looks very much like the actual game itself but it's just gonna be scrolling constantly our background elements and I've set this up just through a number of background layers you can do this yourself however you want to but I put that this isn't a tile layer down here this dirt okay I put together a new sprite that was just an assembly about three of those tiles on top of one another and I used that as a background just so that I could sort of Tyler vertically using a horizontally rather using the background layer and then if you scroll down on a background layer you can actually set a horizontal speed okay and I set that to minus three I said the trees and the background for minus two and the mountains to minus one so I retain that kind of depth effect I'm not sure if I've worked those numbers out to be exactly correct like if they're exactly what they should be based on the parallax of the other things but it creates a good enough effect for what I'm going with other moment so I can I can preview how that looks actually with the background swirling and stuff like that when it's set up in the IDE if I just hit this play animation button and the room editor it'll actually do this for me so I can actually see kind of what its gonna look like that's what menus just gonna look like on my later point out of like a version of the player down here and a big like title here when we come up with a name for the game but then I'm just gonna have this screen and I'm going to have a simple menu just in the bottom right okay that's all I'm gonna do once you've got your new room set up exactly how you want it visually we need to do a couple of things in order to set up the environment for our menu so the first thing I want to do is where you placed our o transition from the other part our transition controlling object that's a persistent object and we just put it in here because it was this was the first room of our game and we wanted it to exist just through the full duration of our game but obviously if I menu is gonna come before that and it should by the way if you haven't already put your menu room to the top of your list so that's the first one that gets run but in our r1 here in our first level where we've got the transition object I'm going to delete that from here and I'm gonna come to our menu and on an instances layer I have here I'm just going to place that into this room instead okay I'm also gonna place a copy of a camera into this room as well that's not a persistent object but I'll need that in here just so that I can use our screen shake effect that we set up before as well just as a nice little touch when we're like picking our options from the menu we can add a bit of screen shake just a sort of bad to the effect hello everybody it's shown here just interrupting myself because I made a mistake how embarrassing by bringing this camera object into the menu room I forgot that the camera interacts with layers that are named mountains and trees to set up our parallax scrolling but we don't want that here because we set up automatic scrolling ourselves in the IDE so you'll notice for the rest of this video whenever I run the game on our menu the trees and mountains don't scroll and it looks really weird how it's silly of me in order to fix this all you need to do is change the name of the layers that you have your trees and mountains on assuming you're doing the exact same thing I'm doing the same layers you may maybe you don't maybe didn't make this mistake in the first place but just if you've got the same layers as me change the name of your trees layer and your mountains layer to be something like trees underscore menu or mountainous underscore menu or whatever and then the camera object won't interact with them at all okay I'll give you back now sorry the one other thing I would want to do as well is in a player we had this event that's key press our event that restarts the game I'm actually going to right click that and hit cut and take it of the player object and put it into the camera okay just because this is an object that's all is there in fact actually I mean better idea might be to delete that let's put it into transition instead because that actually is a persistent object that we know is always going to be around okay okay once all that's done let's create on menu object okay so right-clicking objects hit create object and call this one Oh menu first of all I'm actually just going to come straight to our menu and do something I tend to forget to do a lot and actually put the menu into the game world right away rather than leaving it to the end where I'll forget okay so just put that also just on the instances layer anyway you want to really um we're gonna work out positions dynamically so doesn't work out it doesn't matter where exactly you put it in the room so just uh along with transition and camera just put the menu object into the menu room now let's come back to the object and add the create event okay let's some I'll press f12 just give us lots of room and I'm gonna maximize this as well okay we'll call this is then a GUI bars menu setup because that's that's what it is I guess that's what we're gonna do and I'm just going to assign all the different variables that were gonna need for this particular for this particular system for making our menu work okay some of them you might know understand what I'm gonna do with them right away but they'll make sense as as we carry on okay so these are just the variables you're gonna need I'm gonna make GUI underscore with it's going to be equal to display get GUI width open bracket close bracket semicolon and then very similarly GUI height equal display GUI get GUI height um right close bracket semicolon let's make this a bit bigger just so you can see everything I'm doing cool GUI underscore margin there's gonna be 32 what we're gonna do instead of just using magic numbers where we know that our screen is a thousand twenty four by seven six eight I think and it's saying like okay drew lists it roughly like a thousand seven hundred ish to be in the bottom right we're gonna get the values so that we can change the size of our game and site spot resolution and stuff on the fly and still have this work and still have a draw stuff where we expect it to roughly okay the margin is just going to be like 32 pixels from the edge of the screen no matter how big the screen is okay that's where we're gonna kind of draw everything just to kind of give us a bit of space so we don't draw things right at the edge of the screen next very variable we want is menu underscore X it's gonna equal gooey wet plus 200 okay which means that that's going to be the exposition of our menu at any point in time we're gonna change that as well so that it starts off GUI width plus 200 is going to be off the edge of the screen to the right but we're gonna reduce it over time so they come it comes in from the right it enters from the right okay in fact first of all I'm just gonna comment that out and put a semicolon there just leaving that they're ready for us later and initially I'm just gonna put menu X as being gooey with which is the far right of the screen okay the reason I'm doing that is so that when we do our draw stuff we could and we can see it right away and test it and then we'll put it back to plus 201 we're aware to do the bit that brings it onto the screen okay so we'll just leave it at that for now menu underscore Y is gonna be GUI underscore height minus GUI underscore margin okay I could put the minus margin on there in here as well but it doesn't really matter just gonna be what it's gonna be for testing initially so our menu height a GUI height is the bottom of the screen and minus that margin just a buffer is off the bottom again that's what I mean I could put on the expedite so it's okay for now menu underscore X underscore target this variable is gonna be where we're looking to actually end up our GUI which is what I just said is going to do it with - GUI margin and then we want menu speed this is going to be the value decides how quickly our menu like moves from from off the edge of the screen onto the screen and the lower the number is gonna be better and you'll see why that is later I'll just leave the reminder here blower is faster not bad it necessarily but faster menu and the score font that's we're gonna draw our menu as text okay you could draw as images if you wanted and it's very very similar you do almost exactly the same thing you would just use draw sprite or something so draw text and you'll see when we get to that but I'm gonna use a font I'm gonna call f menu okay speaking of which I should probably add that font now so I'm gonna go to font right click and hit create call F menu and I'm gonna use of pixel font I found called a born to be sporty okay I know make that about size 24 I think it's the right size for it if it's not I'll correct it later but I'm pretty sure that's the size I used for it before okay so it's close that and come back now to that tab at the top bone menu Oh menu create so that'll turn red now cuz like the font is actually in our game and the next variable is gonna be menu and just got item height equals font underscore get size menu so that we can change this one around and then still have our stuff be positioned correctly based on how big the text happens to be so it isn't like overlap one another and all that kind of thing then I want menu underscore connected it was going to equal minus one and then this value is basically going to get set to a number when we select and then you want insulin when you set a new game it'll probably get set to like two and when we've set it to continue is set to one and we're set to quitter set to zero and then based on that number we'll do something right then we start a minus one because we're not initially committed to anything okay and then last on menu and to score control equals true okay it's just gonna be a boolean that decides whether or not we have control of the menu and we can move up and down select things which will set to false ones who've actually selected and options that you can't select multiple options before one gets carried out right okay after that we've almost got all our variables done now but we actually setup the menu itself okay so we want to decide what our menu entries are gonna be I'm gonna type menu open square bracket to blue square bracket equals open quotation mark new game close quotation mark semicolon then menu open square bracket 1 close square bracket n equals continue their menu open square bracket 0 close square bracket equals quit and these are gonna be the options of our game and close that there we go so this here wife create is what's called an array okay this is a good way of creating a list of variables that are related to one another and that you want to sort of find a specific entry of it's basically a way of containing lots of lots of variables inside a list of variables inside one variable why would you want to put them all in one variable it so that you can use that one variable and other variables to decide which entry you want to find so it allows me to do something like for example I'm gonna have a variable called menu under scope cursor which is going to decide which option we're currently looking at and on menu okay and for that number to be relevant we can use an array so that when I've right types a menu open square bracket and then you cursor after this point or it would have to be sometime after that point we would be referring to a particular entry of this array okay based on what we put in the square bracket and what we put in the square bracket as menu cursor which is 2 which would bring us to entry to up here which is new game ok now you might be wondering and be a bit confused why I've done it in a seemingly backwards order where I've created menu 2 is new game than 1 continuing 0 quit and that has to do with how I'm drawing things in the the drawer event later and just the order I draw I draw it from the bottom upwards the bottom of the menu upward so I want to draw a quit then continue and then new game because like finding the we've got something that finds the bottom really easily with having to find the bottom and then go up a bit and then work down it's easier to just go from the bottom and move up okay but also it's actually more efficient then this is a much more trivial point but it is more efficient when you declare an array to start with the biggest variable because it when you make an array GameMaker makes room in memory for every entry of that array and so if I make a second make the second entry first it still reserves the memory for entry 1 and 2 and then it doesn't have to reserve that memory like again and and keep adding to the memory every time it creates a new one it just does it all at once and then it just fills in the memory with the data later so it's a slightly small amount more efficient ok it's not something you really need to worry about most of the time but you know it was good as I said was mostly done for convenience during the drawing system but that that either way that's the explanation for why I've done it in a seemingly anti intuitive way ok and the last variable I'm going to need here is called menu underscore items okay this is gonna tell us exactly how many entries there are how many menu items are which will be useful when we're drawing it so we know when to stop looking for things to draw okay we can get this dynamic I could just put in 3 Reich's I can see 1 2 3 but I want to get this dynamically so we can keep adding options and not have to change this number and no type array underscore length underscore 1d ok this is what's called a one dimensional array as well you can do two-dimensional arrays which involve doing things like like like this but that's more complicated and for a different tutorial and a different thing we don't need any of that right now we want a one dimensional array array which is what this is so array length 1d and the name of that array has menu okay and then includes bracket semicolon and that will return 3 because it'll work out that there are three entries in here even though they're numbered starting from zero there's three physical entries so that's the number that'll get returned is three okay okay so that was a lot of soap but it does make everything we want to do later a lot easier to build referred leaves and their values very dynamically so let's now go back to Oh menu and I don't know event list I'm gonna add the draw GUI event which we've used before just the drill stuff that'll slot to the screen and doesn't move based on our camera okay now before we do anything else in fact that's maximize this space there we go before anything else cook or draw menu that's what we're gonna be doing and then I'm gonna just solve some stuff for drawing text to the screen okay no time draw set fonts it's going to decide what font we're gonna use in the F menu it's gonna side that draw set H align and sets the horizontal alignment of any text drawing that we do okay just like if you use Microsoft Word or anything like that you know what like paragraph alignment and stuff like that is but this is gonna be F a like you want this right aligned okay so we're drawing text from the right not literally letter by letter right to left the put an aligned right to left okay and then draw sent via line which is our vertical alignment F a bottom because as I say we're drawing from the bomb right upwards so no draw quit then continue then new game in that order okay it's important that you set these to whatever you want them to be before you ever draw any text and that includes even if you're working with the default so by default this is like left aligned and I think like I think top aligned for the alignment agent line but you were even if you if those are the values that you want and you still need to set these every single time you want to do draw code okay otherwise you might run into a situation where some code run one object runs its code before another one and you do some other text often your text changes font for some areas to change font or change alignment randomly and that's because it's still using the settings from last time so once you set these they're set and they will apply to all text drawing operations from that point forward including in other objects and other times and so on okay so you have to make sure you set them specifically at the start of every time that you're gonna do anything to do with your text okay every single time next up we're going to use what's called a for loop okay so I'm gonna type for and open a bracket so for works very much like a while loop that we've used before okay which is it's going to keep doing a series of things that we're gonna put inside these brackets until a condition no longer is true where you would use a full loop rather than a while loop is if you've got a variable that you want to increase or decrease or do something with every single loop and use that variable to decide how to do certain things so it's very useful for drawing say menu items in order or drawing like like a number of hearts in the top left or something like that for your lives or something like that right where you can use a number and increase that by 1 for every loop and use that to decide where you're drawing each thing or something like that okay so I'm gonna create so what you do in the for loop is you have to decide what variable it's based on so I'm gonna time var I equals 0 the reason I've used VAR that rather than just writing I equals 0 it's because this is only a temporary variable that we're using for this for loop we don't need it once we come out of this event okay so just like far the bar there won't I declared it okay semicolon now that's very important that's one of the rare times where semicolons actually are really important I less than menu underscore items okay so this is the condition this is like though with a while loop condition this is what decides whether or not we keep doing more loops or whether or not we've we should we should stop okay so while I is less than the number of menu items which is 3 it'll keep doing this and we're gonna go from nought to 1 to 2 and then when we hit 3 we break out okay so there are 3 menu items semicolon again very important and then I plus plus or you could also write I plus equals 1 okay or I equals I plus 1 you get the point we're increasing I by 1 okay and that's what should happen to I or what should happen to the variable that we declared here every single of this for leap okay so once you've got those 3 things in there you declared the is 0 and while I I start 0 while it is less than menu items keep doing the loop and every loop increase I by 1 okay that's powerful loop works very very useful and you'll see how we use I did where to draw things as we do this so inside this this for loop we've got quite a lot of stuff to do in here I'm gonna draw our whole menu and type of our offset equals to okay you'll see what that's for in a second bar T XT equals menu I okay so again we prefer bank to our variable here oh sorry array are a ray variable menu which have from my career van has all of our menu items in it as strings and we're going to take one of those strings which is the the item of the menu that we're currently drawing okay and it's going to put that string into txt just to allow us to be able to use that for drawing later the reason we don't just grab this but when we do draw text and we put it into variables because we're going to manipulate it slightly here I'm gonna see if menu underscore cursor equals i okay so menu cursor is though I'm not square bracket no regular bracket there we go so menu cursor as we knew from our create event let me open that as well just like ensure create event so we knew in here is set to two which is new game currently right this is determining which option we're currently looking at so if the item of the menu that we're currently drawing cuz we're going to draw each one in turn is the one that we've got selected and I want to do a couple of things I want to set txt our strength equals string insert open brackets and what this does is allows us to add an extra and a string onto another string or insert a string inside another string somewhere and what I'm going to do is the string I want to insert is just and right facing arrow I don't really know what the name of that character is I'm sure it has a fun name and then a space and then that bat that's it that's the string that we're going to add so I'm just going to add this little arrow just to point at the option that we've got selected okay the string I want to add it to as you can see at the bottom here it tells a substring string and index the string is the string that we want to add it to is txt and the index is whereabouts in that string the want to add it we're going to add it as 0 which is at the start so far left of the string okay close bracket semicolon and then the other thing I want to do is I'm gonna set another variable another temp variable call to equal C underscore white okay call is going to be the color of the menu item that we're gonna draw then I'm gonna put an else statement after this if statement here so if this isn't the menu item that we're with if this isn't the menu item that we currently have selected then we'll draw it just gray instead so I'm gonna save our call to equal C array I'm using the declaration both times there because obviously I mean I could declare Varco up here and then just use the word Col down there but it's a really big difference okay so next up I'm gonna work out where I want to draw this particular IMF text okay so I'm gonna use a couple more temporary variables to work that out so that I can just use those in the draw text thing rather than having a really long draw text line okay so far X X is going to be menu X that's the really simple one that's just gonna be wherever our menu is horizontally well why why is gonna equal menu underscore Y - and this is where we're going to make use of this I variable again menu underscore item height that's the height of our font remember x and we could just write x I at this point but we want to also leave a bit of a space between each one that'll just stack them right on top of one another because it'll be like my notes I am i x 0 then i my x 1 and i am high x 2 but we want to leave a bit of space that's x some things let's open another bracket and do i times 1.5 closed bracket and then close the first our brackets again okay semicolon to end that line so that should let us draw each menu item one at a time from the bottom up okay so let's actually draw them now i'm what i'm gonna do though is I'm going to use a really cheap simple effect for creating a blank outline around a text okay so I'm the most efficient or in fact well it's not too inefficient but it's not the most efficient way of doing it but if you've not gotten any items of texturing drawings we're only drawing a handful for a menu right if you're drawing loads of items or texts all over the screen you might want a different way of doing this kind of thing maybe baking it into the font and so on but this is a quick way of doing an outline for a sprite one base is going to do is draw the text an extra four times in black offset a little bit and then draw the text in white or gray on top of that so it creates like a little fake outline effect works really well with pixel fonts doesn't work so well with other bigger fancier fonts okay so draw a set color C underscore black sites before like naturally so we before actually using our color we're just setting it to black to draw the shadow or the broadly outline okay I'm going to draw text xx YY txt okay semicolon and I'm gonna copy and paste that line three times okay so we've got four of these and then what I want to do is just modify the exposition twice and the Y position twice just a little bit in each direction and that's where this offset variable that we created up here comes into play right it's going to be two pixels I'm just gonna be with two pixels in each direction so I'm going to do xx - offset then on the next one xx plus offset then YY plus offset and then YY and - offset doesn't now what or do you do those end you do is in any order you like just make sure you do all four of those then I'm gonna set draw set color which changes our draw and color again back to Cole okay which is going to be either C white or C gray which are constants because depending on whether or not this is the item we got selected then draw text xx YY exp okay and that'll draw that string where we want to draw it okay and since in our create event we set any X would just be our GUI with four now we should actually see that now let's run the game since we've already added that menu into the actual the game world and we can see it appearing here so we've got new game continue quit we can modify or change it in any way the next step as you can see it's drawing them in order and the goose new game is the one we set to menu cursor okay was just option number two and it's drawn in white a little arrow next to it to show that that's that's the option that we want okay so close that now and go to Oh menu and we're gonna add another event this time it's gonna be the step event okay this is where we're gonna actually control the menu and make it move around and make it so that we can select an option and go from one room to the next okay okay so in the step event and maximize this this is just gonna be called control menu okay that's really what we're gonna do and so that's ease the items in from the far right of the screen so they start off screen and they come in from the right just this is a nice little intro effect okay I am use in menu underscore X plus equals so adding to that variable open brackets menu underscore X target that's where we want to be - where we currently are okay close bracket divided by menu speed this is the exact same formula that we used in our camera to sort of ease in so it'll slow down as it comes to a halt once it comes in okay let's actually now if I just go to Oh many of correctly creative then if I set there's if I get rid of this let me go on and this comment on here and actually set menu acts be GUI with plus 200 and then I run the game we should find that uh I think starts off on the right and actually just comes in now okay very simple house drawing on top of the bars at the moment but that's okay so that comes in nice and smooth so back in the step event now let's add a section for menu menu controls okay so she's gonna cause keyboard controls okay eventually we might wanna be able to control the mouse since a lot of our game has controlled the mouse and so on but we're gonna keep it as simple as we can for now we'll expand it later okay so if menu control that's our boolean that's currently I think set to true I hope it's set to true creative urn menu control yep set to two let's go back to this a true not to sorry if I said that so as i assuming this is set to true if keyboard which it is I'll just go check press VK up okay so if we're pressing the up arrow key menu cursor plus plus that will just add one to it okay you could usually also do equals itself plus one so on but the quickest way to just do that if menu cursor greater than or equal to menu items close bracket menu cursor equals zero so if we go above the number of items that we have in the menu it'll loop around okay so if I just run that now and I just press up you can see we cycle upwards through the menu look at we just the numbers we have line it up sort of that works mathematically when we're adding otherwise you might get it the wrong way around you might have it sort of is moving you down menu and so on you just change the way around but you're adding or subtracting and so on right okay so that works and then we just do the opposite thing sit down okay so I can just copy and paste this more or less here keyboard check pressed VK down this time and then you cursor minus minus to subtract one from it this time if menu cursor is less than zero because zero is our bottom option right that's our quit option it's less than that we've gone off the bottom so set menu cursor to equal menu items minus one we can't set it to 3 which is menu items because there is no option three it only goes up to two right it's always going to be that way am i how big the array is because that's the size of the array but minus one from the size of the array is the final entry in the array okay that's just how it always works if we were to run that that would show that menu working correctly in terms of moving up and down it now that's everything we want so next we want to make it so that if we actually press ENTER we do something right actually make the menu functional so if keyboard I'm just a Czech underscore pressed VK underscore inter okay so if we press the Enter key menu and score X target as you see this is going on it we never stopped doing this it's just we reach the target in the end so it stops actually having anywhere to move right but if we just change this to something else then on then you will scroll to that new position automatically so menu x target equal GUI with plus 200 okay and send us back off to the the far right of the screen again menu underscore committed equals menu underscore cursor okay so whichever option we only set that which is currently minus one to be the the menu entry that we want the one we selected so that tells us what we've actually picked okay then I guess we can do a little screen shake here guess why not from our command that we set up before it's really easy to - now remember so and we want it for magnitude of say for for 30 frames okay just a simple little screen shake just that you know give it a little extra polished touch and then menu control lastly set that to false okay quickly I'll run that now just to demonstrate the move up and down the menu and that's why selects a continue there's a little screen shake and it goes off to the right and we also wouldn't be able to control the menu anymore like we can't control off the screen you can't see but trust me you can't because we certainly need control to be false and we check to see that that was true when we started doing this whole section okay last of all once we've actually moved off the edge of the screen we won't actually do whatever we've committed to right so if menu underscore X is greater than GUI with plus 150 150 not equals 150 which it is at the start of the game so we need to make sure there's a bit of a difference there and menu committed you could also write and and there as well which is a special thing but I'm just using two amps on symbols to do two conditions at once and menu committed does not equal minus one so assuming both of those things are true the menu commits thing is what makes sure it doesn't do it right at the start of the game when it's already off to the right right so if it's gone off to the right hand we've committed to an option switch okay another switch event just like we set up in the the slide transition stuff right switch menu underscore connected so we're gonna do something based on what menu committed is okay open and close a block case to okay that's our new game case all right and also case default so default will happen in case we if we say it was menu committed was 12 or 30 or something like that and we didn't have a case for that number it would just do whatever is in default right okay and by putting these two together like this they're both basically the same thing right okay so slide capital s slide transition that's off script from before right trans underscore mode dot next so they'll just so send us to the next room right semicolon break now I could do a case one which is for our continue but we we don't have saving the loading or anything like that right now so I'm just gonna rely on case one being running through the default so it's going to act as if we selected new game so I'm not going to write a case one I'm gonna go straight to case a 0 which is gonna be if we want to quit so I'm just gonna simply do a game underscore and which will just close the game down okay and then break at the end of there so we don't carry on and then that's the whole switch statement so if I run the game now Oh oopsie-doopsie I spelled committed wrong wherever I smell that wrong curd can become my commented okay there we go classic typo error the most common error you'll ever have okay so we've got our game up now and the menu is here and if I select new game goes off to the side closes brings us into the game world if I restart the game now and it's like equip instead because off the side of the game closes and last of all if I select continue it'll just do the default it'll just assume I selected new game and do the exact same thing and bring us through into the game so that's how you do menus in a very simple way but that's very expandable you can just keep adding options to that look in the create event you can just keep adding different text options then keep adding different cases for what you want that to specifically do okay very very simple there's a lot more we can add to this mouse control and so on all kinds of things like that which will probably go into in later part but I didn't want to make this one too long it's already a little bit long and so I hope you enjoyed that hope you found that useful we went through a lot of different stuff there let me know if you're enjoying this thank you to my patreon supporters who will be in the credits in a moment and I'll see you guys next week shoutouts for this month's extra special superheroes Dan in a mule Knicks lavish Stephen Hagen John Grimshaw Nathaniel Walsh bowels of the dog Louis R Pereira Charles Montgomery Harold Guidry Jason Macmillan and Owen Morgan if you want to get more involved in what I do would like to see my videos go ad free and get access to other perks please check out my patreon account for more info on how to do exactly that that's what these guys do and they're the only reason I can make videos like this every week thanks everybody see you next time

Channel: Shaun Spalding

Views: 139,657

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2

Id: fWAhi10q1ZE

Length: 36min 26sec (2186 seconds)

Published: Fri Nov 10 2017