GameMaker Studio 2: Complete Platformer Tutorial (Part 16: Mouse menus)

hello everyone welcome to part 16 we've got most of the fundamentals of a video game here and what we're gonna start doing now is tying up some loose ends starting with this title screen we're gonna make this feel a bit more complete than just being a little menu in the corner that we can kind of cycle with the arrow keys first thing we're gonna do we're just going to keep it simple for this point we're just going to put in a title up here in this big open space up here I'm going to put a little character down here that's really really straightforward and we're gonna make this menu a bit better make it mouse enabled since we actually use the mouse as part of the controls in the game it's expected that the user is gonna have their hand on a mouse right so we should make these - enabled as well as keyboard rows we're going to keep the keyboard controls I'm gonna make it so you can use either one okay cool so let's get started so I've gone ahead and made this to be the title of the game we're gonna call it respecting the rules because that's the simplest thing I can think this game is about we have a signpost that tells you not to kill anyone but you're probably going to because we gave the player a gun and player someone they're bad people so that's what I've called the game you can call your game whatever you want to call it whatever it means you know I'm not gonna give you a title for your own game I'm not gonna include this in there the things you can download from the description I guess it'll technically be in the source code but you can create whatever whenever you want or created 610 by 302 that's just what I happened to turn out to be just to kind of occupy this sort of space in the top left of here this sort of one or two four by 768 space and just gonna occupy this top left here so there's a couple of ways of doing this I mean this having a giant sprite like this it's all well and good but it does take up some space on your texture page however think that's gonna be I know it's something we haven't really talked about but all the images in your game especially when you're making a small game the way you can think of it as you might have multiple of these in a bigger game but when you're in a small game all of your sprites are kept on what's called a texture page so this is the texture page for our game including the week respecting the rules thing you can see it has everything from the game has all the player sprites has all the fonts that we've used all baked in so it could just draw them or at once so any fonts you have different size they're gonna take up lots of space on this especially depending which characters you want to include in in any given font all of our big background pieces you can see they take up space on here as well and you've got loads and last of the stuff in texture pages get bigger you might end up splitting across multiple texture pages swapping texture pages and stuffing start the eventually in a larger project it's gonna have an impact on memory and and performance as well just from swapping between different texture pages it's all kind of a subject for more complex tutorial but it's just something you might want to be thinking about when you start me create really big sprites it does have an impact as I suppose is probably obvious but we can talk about more of that in a different tutorial if you want to preview what your texture page looks like by the way income to game options around the cog go to graphics and using text based size I'm going to define the size of each specific texture page as well and you can hit preview that and it'll compile it and it all it will send you via file explorer to the place and it'll show you what I just showed you just now okay so that's one thing to think about the other way you could handle doing something like this if you don't want to use a really big sprite as you could just I have a font and instead of obviously if you just made a really big font that's worse I hurt having a weak spur because then you're taking up even more space in the text page right as I just showed you these get boiled in to the texture page but what you can do is you can use commands such as draw draw underscore text underscore transformed and just go stretched and you can take a font and actually just draw it and a bigger sign so you could use that sort of thing for trying things like this of course that's typically slower any performance sense because slower specifically telling out in runtime because obviously the game has to rather than just copying and pasting from the texture page and just slapping that down like a sticker and the game actually has to calculate which letters you want to use how big you want to draw it where it's going to draw and how did how to do all that just using the fun dynamically rather than just sort of slamming this into place okay so those are the two differences we're making a tiny platformer here which from these methods we chose to use doesn't really matter too much so we've gone for the simple one in this case which is timing a big image and put the origin in the top like that and we're gonna put that into the room into our menu okay so open up room menu if you haven't already and how are we gonna put this in I mean we could use something in the drawer event of Oh men you and I sort of draw in the top left which would be handy because I mean we could do things like we could dynamically bring it onto the screen in the same way we just want the text but if we just want a static image in place there's actually a pretty useful built-in way to do that in room Eddowes that allows you to sort preview what it all looks like in real time and place it so what we're gonna do is create an asset layer okay I'm gonna call this time for stuff so what's an asset label and ask that layer allows us I'm not sure if I'll ask you to do more than just sprites because it's not called a sprite layer as such but from one the only thing I'm aware of it being able to do from the IDE at least is put sprites in the lot so what it means I can do is just like how with an instance layer I can directly can drag instances of objects into the game world I can just click and drag from the sprites section of the resource tree just s title I'm just gonna drag that onto this layer and it could just chill just in the game world allows me just salt position it however want I'm gonna present it pretty high because remember the camera actually shifts up a tad cuz remember we don't see this bottom tile here it shifts up like one tile but a pretty high up similar margin I think that what the the menu actually handles on the sides I think that's about the right spot for it the other thing I'm going to do on this layer is I'm gonna drag in the player run sprite as well you know pop it here I'm gonna hold ctrl just a free me free myself from the the grid and just like an myself right on the grass that I think that's pretty much spawn and if I hit play here we can play the all the animations in the room so we can play that school in background we can see though the characters are sort of running along in South then we can drag in a gun as well and pop that on him and in just the same way so there is who's gonna that's a little bit oh why are we usually usually has it like a bell there right that seems about right okay cool then this looks a bit more like a proper little title screen right and if we run the game now we will see just that the camera will adjust itself slightly of course we can make sure we've got it all right and they will care of it we got our title up here we've got a little dude running along okay so time out for a second I am mentioning notice this before or I don't know if I noticed this before and did another time out and another thing so feel free to skip this if I've said this before I don't think I have I went back and looked through the footage and I think I found this out but the trees and the mountains in the background on the menu aren't screwing us they should be which is a little unusual and that's because of course I'm now using the camera on here to allow us to do the screen shake and stuff on the menu but the men the camera object controls the trees and the mountains and keeps them proportional to like where the player is to create our kind of parallax effect we obviously don't want my on the menu we want it to just kind of be scrolling the background along with the the bottom so in order to fix that just go into your camera object go to this step event and on the bottom you just want to wrap the little parallax bit in an if statement that just says if we're not on the menu room okay so there only works on the side of the menu room and then on our land while scrolling to work properly sorry about that I'm sure I might have corrected that in a previous part if I have I'm sorry this was pointless but um yeah just wanted to fix that real quick okay thanks get back to it now and the menu so it just looks a bit more like an actual menu now okay that's obviously really really straightforward so I'm going to stop there we're gonna add mass control to the menu now so rather than working with the workspace we don't need to do anything with the object itself so I'm gonna right click on a menu and just hit open all events grips okay and then gives us the create event the draw a GUI event and the staff event all the ones we set up we don't need any new events or anything like that and even if we did we can actually create them just right clicking and add an open event which is kind of cool but we don't need to change anything the object so we just want this this code available to us here and then press f12 I'm gonna press FA a couple of times just and again that's nice and big just soon where you can see what we're doing so in the create event we just need one more variable than what we are have with all of our and then you sell because we did our menu and a little bit of a weird way like we you know we filled the array and the theoretically most efficient way possible which is to fill it from top to bottom and we work when we draw it from the bottom up we only worked out with menu why where the bottom of the menu is and then we sort of drew it upwards from there so what we need to work this out we want to we need to know where the bottom is but we also need know where the top of the menu is okay so I'm gonna write just under all this just because we're gonna rely on a few of these variables so just near the bomb menu underscore top equals menu and the school y minus open bracket open bracket menu item height times 1.5 and if you remember that's the value that we used in draw GUI to determine where to draw each particular item of the menu we used my own menu item height times 1.5 that is the height of the average of each menu item based on the font we're using so the exact height of the text and then times up by 1.5 gives us that a little bit of a gap in between okay but the top of the menu is one of those so one menu items worth of height multiplied by the number of items in the menu which we figured out just above here is the array length of menu okay so times menu and the score homes in this case would be three could also write three but that's obviously less dynamic and useful okay so that's the only other variable we need we know where the top of the menu is and we know where the bottom of it is and that's all we're gonna worry about okay so let's come to the step event and this is how we control our menu currently so we have if if you're in control a menu and all these different things to do with the up key the down key in the enter key okay so underneath all of this we're gonna overwrite those things if if the mouse is in the right place so if the mouse is hovering over one of these options that will take the mouse into account rather than the keyboard okay so how are we gonna do that well first of all we need to get where the mouse is you may think we can just use something like mouse X or Mouse why you see those turned green they represent the mouse's position but what they represent is the position of the mouse on in the room okay so in the in the game room not necessarily on the screen or on the GUI okay remember that we draw all these many ones to the GUI so that it's completely independent of the camera and where the camera is pointing in the room is just drawing it to the sort of the window is the display okay so we want to get our Mouse's position based on the window or the GUI and not the game room which could be like any any way at right and it could be completely unrelated to where the menu is okay so how do we get that well we can get that by timing bar Mouse wine GUI okay that's gonna be our our own named temporary variable equals of device Mouse y2 GUI and then that will get an in bracket 0 close bracket semicolon and that will get as exactly where after that goes all the y-coordinate of our mounts really in relation to the GUI zero on the end here you can put in a number of different Mouse devices if whatever reason you've got multiple mice on a computer so because this is usually Mouse a zero has in your first Mouse plugged in but that's mostly used for things like twitch devices and I think it's to do with multi-touch and stuff like that you could correct me if I'm wrong all you need to know of your main PC game which we are just put that to zero okay next up we want to check if Mouse whine gooey and we have that why corner we want to check if it is less than menu Y which is the bottom of our menu and okay with two amps and symbols we want to check that it's loose my fury we want to check that it's above the top of the menu so great a man menu go on top okay so now what do we do if our Mouse is below the bottom sorry above the bottom but below the top I know it looks weird because I see Y increases as you go down okay so what do we do if those two conditions are true it means we're between the top and bottom of the menu well as you can see from our keyboard controls what we did is we set menu cursor to be whatever item of the menu we're currently selecting okay so we just want to override that with wherever our mouse happens to be okay so we know we are hovering over at least one of these so what we can do is divide the position of our mouse in the y-axis by the number of menu items there are and that'll give us like if it's if it's notice the top one and so on that will give us which one we want to use so I'm going to is menu underscore cursor equals open bracket menu y- mounts y cubed so this is taking the bottom of the menu and subtracting our current Y mouse coordinate from and because we know we're between the bottom and the top we know that's going to be somewhere between the bottom of the menu and the bottom of the menu - like 200 or something so say it's between a 7/16 the bomb so say it's somewhere between like 730 and 630 or something like that right that that's where that value will be so that's going to return something between like naught which would be right at the bottom because there's no difference his values at all and something like a hundred because we're right at the top of the menu okay so it gives us a value between like noir and something like probably a bit more than that I don't know the exact value but what we're going to do is take that value and divide it using the div function which lets you divide a thing but returns the whole number of divisions only so for example three div ten would give you three because you would get three threes in ten and the one left over doesn't count for anything because it's not a whole division or for maybe a cleaner example five div fifteen would give you three because you get three fives and fifteen but five did 16 would also give you three because she can't get one and you would only go up to four when you did five div 20 gives you the whole number okay so we're gonna did that by menu item height times 1.5 that obviously is the height of one particular item so while we're at zero which means we're while this value is zero meaning our mouse is right at the bottom as we go up and up and up eventually our Y corner eventually this value rather will become more than one of this value which means giving it will return one and eventually it'll become more than two which means that doing it will return two and so on and since our menu goes in that exact order zero is quit one is continue and to his new game that gives us exactly the option that were hovering over okay it's a little I'm trying to it of just because we're going from the bottom upwards but hey that's what we're stuck with for now okay so semicolon on that that and without doing anything else we can now hopefully run that and we should see that operating as we expect yeah so if I just hover down here so if I'm like hovering up here I can move this around with the arrow keys just as before if I just come down and hover over a new game you can see we still a new game and continue and quit and so on in fact it works no matter where I hover on the screen you'll see a log Ames actually do it like this ooh because it's it's simple we're not working on box we're just checking the Y corner here I play boulders gate for example you can see that on dialogue options and stuff like you're gonna have it down here if that really bothers you what you can do is because we already know on menu X right which is the far left we could just check in the first place we could do that like and here also get like the mouse mouse X GUI and check like a mouse X GUI greater than menu X or something like I think that's the right value I think that's the left of our mini if I remember correctly and and then if you did that then we would only do this if you were on that side of the screen as well but that's just extra stuff that we don't really really need um I don't think anyway it might bother you so you can do that if you want but I don't think we really don't think is super necessary certainly that works and that allows us to select any of those options but um still the only way currently to actually trigger one of those options is to press Enter so now when you make it so we can click the mouse button and have this stuff go off fortunately actually doing that is incredibly straightforward so we're gonna do it in this section again so we'll make sure that our mouse is actually like in the right area to be potentially hovering over one of these things if it's just on the top left of the screen and we click we don't want anything to necessarily happen so inside here I'm going to say if Mouse check button breasts in brackets M be left close bracket close bracket open curly bracket close curly bracket and then in the middle here I'm not actually going to type anything I'm literally just gonna copy this stuff from where we press ENTER and put it in here because we use all the same values menu cursor to do is determines which option is selected and this does everything else in fact you might even want to consider since we've duplicated code they're like putting this in a script for example just playing the script that's like menu option trigger or something like that right and maybe passing menu cursor along to it as an argument and that kind of thing I'm just just doing these these these fly things so yeah that that's really all there is to it if I run there now you can see we can select these for the mouse we can also still select with the keyboard so I know like new game for example with the keyboard so that all still works for restart the game I can select a new game and it works just the same it's like living you and it quits all just the same you just using the mouse now okay that's all there is going to be for this part told you would keep it nice and simple this time and I'll catch you guys next time thank you very much watching as ever a huge house to my patreon supporters for making all this awesome work possible thank you in particular and in no particular order to mark Lintz Louis R Pereira doe on tech men Brandon Kelly Dan in a mule Chris Maha and dressed to back comb attainment James grimly vedere Yaga mark day Harold Guidry matte coat Nathaniel Wolff Fisk McTaggart NYX lavish Steven Hagen Henry Wirtz Michael Ward Jason McMillan Shana --then crispy Owen Morgan sir none may bounce of the dog TJ and Patrick Duffy thank you all for your support and thank you for watching and I'll catch you guys next time

Channel: Shaun Spalding

Views: 55,853

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: jl0Ga07tZWw

Length: 20min 49sec (1249 seconds)

Published: Fri Apr 06 2018