Introduction to Drag and Drop - Simple Menus - GameMaker Studio 2

hello everyone i am bradley sword associate professor of computer and information science at the college of dupage in glen ellen illinois and this video is basically a hello world or just basically an introduction to the drag and drop interface of game maker studio 2.3 and we're just going to create a simple menu we're not going to include any bells and whistles we're just going to pretty much hard code a menu into existence so the only thing i have going for me right now is i have visual visual studio game maker studio version 2.3 open and so again there have been some some changes to game maker studio so even if you uh if you you know if you're used to game maker some of these things take a little getting used to so you'll see and there's you know a couple bugs that were introduced in this version that maybe you'll see maybe you won't as we push forward through these uh videos these video lectures so just be careful with everything so they say this is your first time with game maker you go my goodness there's a lot of stuff going on even here on the screen this is the asset folder here or the asset window this is where you're going to put all of the resources of your game all the assets that your game are going to use and so the only thing that comes for free is a room so if i if i hit f5 or i click i like f5 because i don't have to go over here and press any buttons or click anything and so you run and you have the most boring game ever at least you have something going the game will run this is my window and uh and i'm ready to you know to move forward from there and i'm going to change the name of this you can just go over to an f2 and i'm going to call it main menu room and you can call it kind of whatever you want but i recommend especially if you're sticking around and following along with me just until you're used to things just name them exactly when i'm naming them and so i'm going to go in double click and again if this is your first time using game maker everything is going to look new and scary as any other ide and any other system does but once you get used to it you'll see that there's only there's only three or four different uh types of window systems here and different types of assets that we play with on the general basis and so uh the only thing i'm in here for the room right now i want to change the graphical settings here the width and height i am going to make this 1280 by 720 which is otherwise known as 720p resolution okay so and that changes the window and now if i run this maybe you notice it maybe you didn't or will or won't but now the now now everything looks a lot more uh you know 16 9 right you know when it comes to the aspect ratio of the screen okay so let's create some sprites for this thing let's you know so usually the the train the the you know the train of thought here when you're working on stuff is you create your sprites you create your objects that work with the sprites then you place the objects in the room and then in my case then you start worrying about their interactions about how they're gonna what you know what you're gonna do with the things so a lot of times just getting something going is tricky and then and then sometimes it's you know once you have it working getting it to work better is the tricky part but it all depends on what you're trying to do okay so if i'm going to create a spray i'm just going to create a background sprite and so i'm going to call this main menu background spr and i'm going to change this using this setting here i'm going to resize the canvas to because it's background it's going to be my full image so 1280x720 and this brings up a lot of stuff we're gonna we'll talk about this over time not right not everything in one instant there's a lot going on we generally only use the collision mask and for some some whatever reason there's a bug in here where the the collision mask doesn't agree with the changing of the sizes and i don't know maybe that's the new thought processes i have to physically go in there but that's not that's not how things have been in the past but anyway if you double click or do you do double click anywhere double click here yep there we go this will bring up the actual window and like this is basically a paint editor you know if you're microsoft ms paint or anything like that like it's just it's tricky because they don't give you the giant window to work from which is fine i mean i mean if you're an artist you are not usually working in game maker anyway and you're just using this as maybe like a couple touch-ups or something or maybe not and so anyway so i want to make this i'm going to be making this is part one technically of a two-part uh two-part video series where we're going to be making like a a slide puzzle because that's just kind of like my hello world when it comes to this kind of stuff so i'm just going to create a very basic menu and again you are pretty much free to change this up and make this as nice as you want i'm not this is not the moment for me to teach you all the aspects of how the editor works if you're familiar with paint or photoshop or any other system you kind of know already and you know how you know you know how limited this system is compared to the cool stuff you can do in those other tools because this thing is not you know they want it to be as cool as all the other big tools but it really isn't so i'm just gonna go in here real quick and just change my font to just anything with gravy regular 100 and i'm just going to call this slide puzzle oh look at that oops it doesn't that size does not work 90 sure all right and again my job right now is not to make this thing look nice i'm just here to teach you function now so slide puzzle yeah i got that going for me if you want a center i'm not going to worry and i'm just going to bring this down to 10 point font and then just go copyright bradley sword 2020. that's my name don't wear it out okay so and if you want then if you really want to you can go like this and and try to center and if you really want a center center you could take your time and go down to the pixels within like no i'm not worried about all this go down to the pixel level with everything i'm just moving stuff around just to have it that looks cool okay then i just use the fill tool to fill in oops wrong blue to fill in everything that i've been doing and there looks that and that's pretty much it for a background image and so slide puzzle again if you really wanted to you can have fun with it so now what we're going to do is create two buttons we're going to create a quit game button and we're going to create a button for uh going to the actual you know the room where the puzzle is where we can do the stuff and that's where we're going to differentiate between this video and the gameplay video okay so this is that's it for this and so i'm going to create a new right and this is going to be quick game button spr and so those of you new to this i put underscore spr at the end of every sprite i put underscore room at the end of every room i do this for every resource type except for the objects themselves because in game maker every object type and every asset has to have a unique name that's pretty much how it works and if you you know and game maker does its best to try to avoid and it will warn you and it won't let you create the same name twice but whatever right so it you got just remember and that's why i do things the way i do things it's my conventional way of doing things and i don't know i can never never know the size of things let's see what does this thing look like in real side yeah i mean that's okay i'm not going to go cra again if you want to go down to the pixel level you feel free to i chose 450 by 125 for the size of my buttons and this is what it looks like in real size okay so i'm going to create actually i'm going to go ahead and rename this and i'm going to say off right you'll see why in a second here quick game button off sprite okay and then i can go in here and what i can do here is since i've been using that blue i'm going to go ahead and blue and then i've been using yellow i'm just going to create a quick and dirty border right and have some fun with it okay so there's my there's the border for and here's my graphic and so what i'm going to do here now is i'm just going to put some text in here i mean i'll keep the ravy style and i'll just say quit wrong size let's see bring it back up to 90. not too big uh i don't know let's find out undo undo undo there we go bring this just trying to get it so there oh boy it maybe it is too big no maybe not okay i'll bring it down 80 and try to get it in there we go and then i can drag this thing over and don't you know don't be so worried about it i'm again i'm not going to make it perfect i'm just making it good enough for right now and then go back in and fill in okay so there is my quit game button off and so since we're here we're going to have two states for this for each of the buttons that i'm going to show you i'm going to have the normal state which is the off state and then i'm going to have like a mouse over state which so it'll just basically flip the colors it'll be yellow with blue background if i mouse over the thing so it goes back between the two so i know which one has been selected and so if you want to you can duplicate this and create this and call this the on sprite mouse over mouse not over whatever however you want to go ahead and do it and inside of here you go okay here i can't just swap colors because there's aliasing going on you see the colors here it's not just pure yellow and pure blue now there are you know there's now there's a you know gradients to this you can't really just go ahead and just say turn the yellow to a different color which is unfortunate so um so first thing i got to do here is get rid of this wit and if you know anything if you've been watching my other videos you know that we can there's other ways to do this but this is just to get you acclimated with the graphic system and this is a lot of this we're doing we're hard coding just on purpose just to have some fun with this kind of stuff and i'm going to swap the colors out so blue becomes yellow and yellow becomes blue go okay so that's what i was that's what i'm thinking of there and then with the blue color i need to go ahead now and put the same text back in and there we go and then again the tricky part would be to make sure that it lines up exactly where it was in the previous video or the previous graphic so find something here and just say okay the first pixel of this the first yellow pixel is at let me in here this is what i meant to do the first yellow pixel is at 69 comma 51. and i go into here and i go okay the first blue pixel is at 71.54 and i've already talked to myself i already forgot because i'm thinking and talking and doing 69 51 i think that's what i said before and if not oh well i'm go i'm just going to go on and move on and move on with my life because you just don't want it to it's always it's gonna flicker a little bit but you don't want the wording to flicker too because then it's just it's just a little off-putting it doesn't doesn't look right if you don't do things oh there we go so i have here's my on button here's my i'm sorry my off button there you go and then here is my on button and we don't have to worry about centering or anything in our first video here so don't worry about any other settings uh we might have to worry about the collision mask maybe maybe not depending actually we do at least in my case i have to come come back in here i don't know why the resizing doesn't affect the collision mask but i do have to go in and manually fix this up and say what you know what are the bounds where can i click on this thing because right now it says just this one pixel up here and so i need to fix this up with 449 and 124 because it needs to be the full image and for some reason saying full image doesn't make it work so 0 to 449 and 0 to 124 because that's the size of my settings and so that's all i need for the the graphics for what we're doing right now for the quick game button anyway and so let's go ahead and put everything in and make it work right like i think we're done with this kind of stuff and then you can go ahead and i'll show you how to do the other the other button but i won't do it with you i'll leave that as an exercise for you guys okay so here we go so here's our setting and so now what's cool about this is i don't have to create a graphic for the background i can just there's different layers you will have experience with different layers and different instance layers different background layers and again if when this first came out i'm like why do we need this but it's really cool to have so that the your computer system doesn't uh have to spend time sorting which objects get drawn in which layers and which objects get drawn before other objects and so forth and so on so you have to go into the background layer and then you say well which sprite you go well how about the main menu sprite and there it is as long as your graphic is the same size as your room it'll look perfect and it does so there's my slide puzzle there's my copyright information i can get rid of that just i wonder what it'll look like in what it'll look like when i run it well let's see that's not the best font for small size but that's okay ah it doesn't look terrible it doesn't look great but it doesn't look terrible if you didn't know my name you wouldn't know what that red red ass but there there is my game and now let's talk about putting on you know the actual object in the room and i do this all the time then i forget to go back into the instances layer because you can only put backgrounds in a background layer and you can only put objects in an instance layer and there are other layers which you see here pathing layers and tile layers and all sorts of other cool stuff that you can go with here okay so i want to put this object in the room and so i'm going to put the and we don't have an object oh no right so we have sprites but sprites do not directly apply so i'm gonna you can't just the only way you can drag sprites in i believe is in a background can you nope can't even do that so oops i guess you can but i don't want to do that these things need to have code running behind them event driven architecture running behind them to make them work so i need to go ahead and create a new object and so again a whole nother menu system for you to get acclimated with if you're this is brand new to you and i'm just going to call this the quit game button that's it again it has a unique unique name and the reason why i don't put obj anywhere on this thing is because when you go to write game maker language code or just you know programming code you're going to be you know just just the tediousness of having to put that in there just gets too much so i just leave it as is and it needs to use the off sprite okay and everything else can stay the same for now and now that i have an object created even though it has no behavior associated with it it truly is an object and i can go ahead now go back into my room and i can drag the drag the object in oops i accidentally created an assets layer while i was doing this i have no idea how i was just trying to talk and i wasn't paying attention but in the instances layer i can go ahead and drag in the quit button and if you put the grid back on you see that it'll it'll move everything nicely if i want this centered well if i want this perfectly centered let me just show you a quick little thing here at least in this case this isn't always but i can go into the sprites and i can go ahead and over here do middle center for the the way that the object is centered this is my pivot point my rotation point and if i do that for both both sprites and i go back into my room now say like what did what did i what did i change here but if i go ahead into my grid settings and i go okay set my grid settings to 640 which is half the screen you will now see that i everything is centered horizontally i don't know if you hear that but the workers are here on my house so i didn't realize they just got here but there's my quick game button and so if i run this you will see there it is and now there's no code running behind this which is fine but so let's make this let's get this quick game button to have some functionality and then you know basically the video is over because i'll show you how to make the second second stuff here okay so in the quick game button um since we're using different sprites we don't need a create event like what are these events like goodness add event look at all this cool stuff create event destroy events step events alarms draws don't get freaked out keyboard mouse gestures collisions don't get freaked out we'll we we will introduce these slowly over time you will get used to the way things work but what i want to have is a mouse mouse enter and mouse leave because i want to change the graphic depending on what's going on and so if i go mouse on mouse enter you're like okay i want to change the sprite that's being drawn because we showed that we have the you know like the off sprite and the on sprite and you get used to this the toolbox over here in the drag and drop environment you go set sprite looks like little pac-man drag it in they go well i want to change it to the on sprite which ones it's hard to see such a small thing so set the sprite to on and now you'll see let me run to make sure you run the game okay so now you can see the game running and i go over to here and there it goes it changed there's no code to bring it back though because and now it's stuck in that on state forever but as you can imagine if i do a mouse leave state i can set the sprite back to the regular one the offspring and now we're done and now we can try it out here you go watch out inside yep careful for your eyes though if this is something that's sensitive to you sometimes it gets sensitive to me but it takes a while but you see i i set up everything perfectly i aligned my graphics perfectly so that this the the word quit doesn't shift around when i go off to on and so the last thing to do is to click to have something to click the quit button and call it a day and what you would do with that is you do mouse left pressed and then like you have to get used to all this stuff exit this that whatever i am looking for i don't know what it i can never remember because it's named differently in code as it is in drag and drop it's game end and code exit game in drag and drop so these are all events right like if the mouse ends up the first frame the mouse goes into the uh into the sprite it'll change the sprite and the first moment you leave the sprite it'll change it back and when i press inside the bounds of that sprite this mean left pressed means inside the sprite and click i'll end the game my menu is done okay and so that's all there is to that which is pretty cool right we now we have a working we have a working menu system so i will leave you with the task of creating the second button but let me just show you here for just to get you kind of going into part two is that i'm going to create a new room called puzzle room because because again part two is going to be a slide puzzle i'm going to go ahead and make sure i change the graphical settings to 720p to match the other room the 720p of the main menu okay and i'm not going to do anything with it i just have it as i just have it existing right now and so what i'm going to do is i'm going to duplicate the quit game button and i'm going to instead of being a quick game button i'm going to say play puzzle button and the only real difference here mouse enter and mouse leave they're the same right at least right now they're the same what you're going to do is change the graphic and on left pressed instead of exiting game what i'm going to do is find room events here and say go to room and i say go to rooms puzzle room and you do all this and then the first thing everyone including me forgets to do is to put the object in the room because you'll run the game you're like why isn't it there why isn't it working and you're like oh duh i did not put anything in there and so go back into my main menu room and i can put the play puzzle and it's going to be tricky for right now since the two buttons are identical at least when graphically the two buttons are identical oh what the heck i'll do the whole thing with you okay so then here's quit game this one quits the game right and then the other one will go ahead and actually change over to the other room there we go and so i'll just let's work it through for repetition sake here so what i want to do then is the only thing i got to do is change these sprites so quit will be a play so i can duplicate this guy okay and it's and so this one will be called play puzzle button and let's go oops well naming gonna be anal but okay i'll go in here fix this up and now edit this so that make sure i do everything right here when it comes to text 80 point ravi okay good so what i want to go ahead and just make sure i eliminate the word quit replace it with the word play oops i need it to be yellow go oops what the heck is going on here undo undo oops oh my goodness what in the world oh well here we go oops oh my goodness i'm undoing everything okay here we go now maybe maybe this will work now text play okay go ahead and try to center this thing a little better and again i'm not going for perfection for this round it's good enough for what i need i just know that i'm just going to use this purely yellow pixel at 42 32 and i'm writing it down right now just so that i can get it where i need to get it and so i'm going to do the same thing here with the quit game button i'm going to duplicate this because the on section and i'm going to make this the play puzzle button button okay go ahead go in here go in here and do the exact same but opposite colors and just go ahead and get rid of that bring in the text put in the word play drag this thing over so that the first major blue pixel is at 42.32 42 32 and that should do it when it comes to fixing this up and then i just have to go ahead and fill in everything that got moved in the process and now i believe i have the play game button in the correct stuff and the final final step 25 minutes into this video is to go into the object make sure i change the correct graphics settings make sure i'm in the right object play puzzle change the sprite to be the the introductory or the the the initial sprite is play off and then inside of here change this to be the changes to be oops change this to be play on and change this to be play off and again like with this if you go slowly you will know if things are wrong like if you go a little piece by piece by piece so here's quick game here's quick game quick game quits just like it does like it was supposed to and then now the play game button back and forth look at that look how nice that looks i can click and now i have my room set up and this is all of part two we'll be filling in and making a puzzle i'm gonna find some of some spicy meme that's gonna be out of date in a matter of minutes after i post it but i'm gonna go find something fun and we'll and you say we'll find a graphic in the next video but that pretty much covers setting up a menu system the hard way i'll say because right now again we've baked in the graphics and other videos show you how to use fonts and how to use text so that if you want to change things it doesn't take you minutes or more than minutes like hours even sometimes to change the how the button looks because you just want to change what the wording is because for my students your homework assignment is going to have many many many many buttons and you do not want to be spending many many many many hours just setting up and just the way the look and feel of a button when we can just write some code and you can have it done in mere seconds rather than hours right that's that's my job as a programmer is to make your life easy as a designer and an artist and make it all work together and so when you you know eventually change your mind on things it doesn't take days of work to change up whatever is going on but there we go we have a slide puzzle main menu we are ready to push forward we i am happy with this i think i love the blue and yellow color when it comes to just basic stuff to get going and it looks good enough to me so as always sword b at cod.edu is a great way of getting a hold of me if you have questions about anything we do in any of my videos my hundred something videos oh yes i have 200 subscribers as of today when i'm making this video september 23rd 2020 200 people like me how nice but anyway swordbod.edu is a great way of getting hold of me or comments below let me know what you think try to be nice you know i'm a person too i'm not i'm not making money off this i'm just trying to make this make life helpful give you guys some useful information about the topics that i cover in my videos so please be nice but otherwise thanks for sticking with it please come on to the next video and i'll show you how to create a graphical slide puzzle we'll have a lot of fun see you there bye-bye

Channel: Bradley Sward

Views: 2,418

Keywords: GameMaker, Studio, Game, Design, Development, Menu, Buttons, DnD, Drap and Drop

Id: 5e9YTb6x5uo

Length: 28min 37sec (1717 seconds)

Published: Wed Sep 23 2020