Organising Data | Menus: GMS2 [P1]

hey guys so today's tutorial is on menus but I also wanted to be an exploration of how to go about planning any kind of data or complex system so I often see questions about how to set out a quest system or a dialogue system which as you can imagine depending on the scope of your game can require enormous collections of data and it can be a little overwhelming to try and plan this so really these are questions about how to organize store and access data and I wanted a to be an illustration of how you can go about doing that and we're just taking menus as an example now I find with systems like this where there can be a surprising amount of variables and elements that need to be tracked and modified I like to plan them out very carefully so that we can make the system as elegant as possible and by that I mean that we keep the code as simple and readable as possible and we reuse code where we can and also that we make the system flexible enough so that if we make tweaks to it later or adding new elements we don't break everything that we've done so we want to go in as prepared as we can and consider all the elements that we need and make the system with all of those in mind so firstly we're going to have different menu pages which each display a different set of options so already we know that what we're displaying is going to depend on what menu page that we're on the first one as you can see just has three options resume settings and quit resume we'll play the game quit will obviously quit the game but settings will take us to another page so here we have audio difficulty graphics controls and back which will take us back to the first page so each of these will have their own page as well and here finally we can actually get to changing the settings so as you can see we already have different types of elements so we had resume and quit which both execute a kind of function and then we have page transfer elements that go to new pages and finally here we're starting to get two types of elements that will actually alter variables about our game so that might be controls or the volume levels and the way that we go about changing them is also going to be different so right here in the audio we have sliders so you can see here like hit enter start modifying it and then hit enter again and it will save the new value and then in something like this instead of a slider now I have a kind of shift where I can go between a certain set of values and then I'm gonna have something like a toggle but when I want something to be either true or false and also controls where whatever I input into the menu it will change my control to that value all right so we have an idea of what our menu needs to have now we have to think about how we can actually store all of this information in our plan and I generally find that using tables or grids is perfect for this so I'm gonna do now is set up some grids for each of our menu pages so firstly let's just create the list of the menu pages that we had so remember we had main settings or your difficulty graphics and controls and you could have a bunch of others that's totally fine we're gonna make it so that it's going to be easy to add new pages all right so now I'm gonna create a grid for each of these pages so we can track all of the data we need on the separate menu pages so let's start off with the main page so remember we had three elements here resume Settings and quit so in the first column let's just put the name of what we're gonna be displaying as a string and then in the second column let's say that will store information about what type of element it is or what that element does so I'm going to create another table that has all of the different types of elements that we have so actually let's start with the bottom four those are the easiest to grasp visually so we had the sliders the shifts toggles and inputs and then we had the page transfers that go between the pages and finally I'm gonna call a more general one just a script Runner and this is gonna be for things like resume and quit and they're gonna be things that don't change anything visually about the menu it doesn't change any inputs it doesn't change what page were on or anything it's just gonna execute some kind of script it's gonna perform an action and that might literally just mean to toggle the pause variable or it might be to call the endgame but it might also be more complicated so if you're ending the game you might also want to do a bunch of other stuff you might want to save objects positions or play some kind of splash screen so you would put whatever you want in the exit script in there and it will run that script alright so those are all of the different types that our elements can be so for resume resume is a script runner settings is a page transfer it's going to go to a new page and exit is also a script runner so that's that types now in the next column let's store well we're going to store a differing things depending on what the element is so for the script runners let's store the script itself that we want it to run and for the page transfers will store the page that we want to go to all right and then for the settings we do exactly the same so we had the elements audio difficulty graphics and controls they were all page transfer types and then we put all of the pages that we want them to navigate to alright so next up is our audio and we're going to introduce a few additional sort of pieces of data that we need to store in this page so now we have the elements called master which is going to be the master volume the sound effects volume the music and the back page of course so the first three were of type slider and the background was just that page transfer and now because I want to keep things as consistent as possible in this next column for the sliders I'm gonna store a script that's going to be responsible for changing the volume all right and I'll just call that script change volume so so far it's kind of similar to the script on a type alright but we need some other things about the volume so in the next column I'm actually going to store what the current volume is so in GameMaker the way volume works is that it's usually a value between 0 and 1 so we'll just have everything at 1 to start off with and then in the final column I'm gonna put what I just said so the values that it can go between because of course you might have sliders for other things as well so just change this as you need alright so next up is difficulty and this one's going to be pretty similar to the audio page so we're gonna have enemies allies and back so I'm gonna change kind of the difficulty of our enemies and allies so the enemies will be either harder or easier and our allies will be kind of less helpful - very helpful and I'm really just putting this in to illustrate what you can do obviously changes to difficulty you're gonna be very dependent to your game so just take this as an idea so these are gonna be a different type now a different type of element so they're gonna be the shift type what we're going to change between a set number of values so just like the volume it's going to execute the script change difficulty and that's what's actually going to be managing whatever alterations we need to change the difficulty next we're gonna have the you'll value that it is currently on and then in the final column we're gonna have so those set values that it's possible to change between so I've just put easy medium and hard but in the actual preview I showed before I had different settings so you can put whatever you want here and be creative and just note that the number in the previous column is actually going to correspond to kind of the entry number in the last column so it's on zero right now which means it's on easy for both of them all right so let's scroll down to the graphics and controls so I had a few more elements for this I had resolution and window merge so that would be a shift and toggle and so my resolution is going to be a shift it's going to execute the script change resolution it's currently on zero so in the preview I actually did have a bunch of resolutions showing up but for the purposes of this tutorial you can put whatever you want here we'll go through the actual script probably in another tutorial because that will take a bit longer so just put a bunch of numbers in here for now or strings it doesn't really matter so same is with the difficulty the number in the fourth column is going to correspond to the entry in the last column next we've got the window mode toggle which is just if it's full screen or not so currently I am setting it to windowed so that's the second entry alright and last one is the controls so I'm just going to have up left right and down you can have other ones as well they are of type input now in the third column so there's a bunch of ways that you could control how you're doing the controls themselves I'm going to use global variables to store what the control is in terms of the keyboard but the global variables name is going to be what you see in these strings so the global variable for the up input is just going to be called key up for me and then what it's currently set to is gonna be in the next column so I currently have it as VK up so that's the up button on your keyboard you could put something like the W key which would be Ord brackets and then you would put whatever the letter is in those comments all right so that is our plan so now we can actually see how we have gone about storing the data and you're gonna find it's actually quite easy to translate this over to out card when we jump into game maker so what I'm gonna do kind of similar to this I'm gonna be making data structures for each of the pages they're going to be grids just as we see right here so whenever we need to access any of these variables we're just going to access specific coordinates of the grid so if you don't know the way that des grids work is they kind of have these coordinates like you see here so this cell right here of the grid to actually access this cell we have to access a specific coordinate of the grid so across here is the horizontal axis and down here is the y-axis of the grid so to get for example this cell of the grid the coordinates for X Y would be 0 1 so that is the cell 0 1 this one over here would just be 2 3 so we have done all of our planning let's jump into game maker all right so first up we're going to create a new object and I'm just going to call this menu we're going to come over to its create event and to all of our setup in here all right so first off I'm just going to declare a bunch of global variables you might want to do this in some kind of controller objects but I'm just going to do it here so I am setting up a pause variable that is basically going to be controlling whether I am showing the menu or not so I'm going to hit the button to bring up the pause kind of menu I'm also going to get the width and height of the camera just because what I'm doing when I'm drawing all of the elements is going to depend on what camera size is and then I'm just going to make a bunch of global variables for the different keys that I'm using so you don't want these to correspond to what you're using in your actual player object for the inputs so whenever you do a keyboard check instead of just directly putting in like VK left for going left you would instead put global dot key left all right and the next thing I want to do is just change the size of the GUI so the graphical user interface to match the size of the view and this is basically just so that I don't have to worry about any scaling it's just going to make whatever we do in the drawer event be at the same size as anything in the drawer GUI all right and now Before we jump into the menus I need a way of kind of setting up our menu pages and the element types for the menus so if we just have a look again at our grids that we set up you'll notice that for the element types I kind of just put in a word but what would that translate to in code it would be a kind of variable name or something so we probably don't want to use strings for this so I'm actually going to create an enumerator so the way in a numerator work is you can kind of define your own class of variable so the menu page enumerator is kind of like a new class of variables and within this numerator we're going to have so all of our page names or main settings audio difficulty in graphics and controls and we just comma all of them like this and each of these entries in the enumerator are kind of going to be equal to a certain number and if you don't specify what the number is so if you don't put main equals a number and you just comment them like we have it's just going to make them equal two numbers in chronological order starting from zero so main is going to be zero setting is going to be one and so on if you write that it would be equivalent so now if we write menu underscore page dot main that would be the same as if we had written zero and you probably know if you've ever used a raise or Grizz or anything that knowing the size or length of the array is really useful for when you're looping through the entries in code so one last thing I'm just going to put is height so that we can get the number of entries that are in our enumerator because remember how it automatically assigns numbers teach if the entries height is just going to be the last entry so if you want to add more entries you would just put that before the height variable and the reason I've done this it was to keep our code readable so I could have made our menu pages actual just numbers number types just like that so they now correspond to kind of the entry number here but this makes it a lot less readable for us so using an enumerator means that we're still kind of working with numbers and we can still use this to access what page were on as a sort of array in a list of entries but now it's just a bit more readable all right so we're going to do the same thing for the types I'm going to call this a numerator menu element type all right and now I'm gonna set up actual grids for our menu pages and they're all actually going to be represented by data structures so we're going to start off with the main menu and I'm just going to call this D s menu main and now I'm gonna create a script called create menu page and we'll come back to it later but just so that we have the scripts there all right so I'm going to use this script like this and now I'm actually just going to input everything that we have here as an array so each line is going to be its own array so for our first line for the resume so remember we just had the string resume and now we put in what type of element in it so for this we're going to refer to our enumerator entry for this so we put menu elements type dot script run-up so now we have assigned that a type now we're gonna put in the name of the script that we want it to run so just like we had in the grid I'm gonna put resume game so that script doesn't actually exist yet so let's just make it so that we get it coming up properly so resume game and we might as well make all of the scripts that we had in a career as well so we had all of these as well you yep so now we have that coming up in the syntax all right and we're just going to keep filling out all of our entries exactly in this way you're going to come up with these little warnings here saying that it wants more arguments but that's just because we haven't set up this script yet so let's keep going and just add all of those I might speed up the video for this all right so this is what it should look like when you're done you can see that it looks very similar to the grid that we had here so we have all of the string names of the elements in the first columns and then all of the types of elements in the second columns and all of the corresponding arguments thereafter so just take care that you have all the brackets and commas in the right space because the way that we've set this out is that each argument that we give the script is itself an array that we're declaring in these brackets and then I've just separated them on different lines and of course be extra careful for when we have arrays with in arrays like these if I just come over here so you can see I've changed it slightly from what we had in the grid just to be a little bit more fun so instead of easy medium and hard I've just put some words and the same for the resolutions and just note that the global variable names are actually in a string because we're going to use a function that will take in the global variable name as a string so that will be whatever you put here so for a global key left you put key left all right so now that we've done all that we need to actually come into the create menu page scripts and set up the menus so let's come over here go into our create menu page and we'll bring it up here now I'll add a description and also just the arguments or remember there of the form of an array and the number of entries in the array itself is actually going to be optional and of course we can actually have a variable number of inputs into this it's just going to be however many pages that you have in that menu page right so this is where what I was saying about flexibility comes in we want to make it so that whatever we put into this is going to create a menu with that number of pages and elements with whatever data that we want to input so to do this firstly let's get the argument count so the argument count is going to be how many pages are in that menu so for the menu page we have three lines right and these are all separate arguments so there's going to be three elements in the main page so in that case argument count would be equal to three all right and next I am going to get all of those arguments but we have to do it in a kind of sneaky way because we don't want to directly just say argument zero because then that would be a requirement for the script and we would come up with errors if we didn't input that number of arguments I want to make it so that we can give however many so I'm actually going to make a little loop and I'm actually going to set up a variable called aargh and it's going to hold all of our arguments and I'm also just going to have an I've al you that we're going to use to loop through all of our entries and AAG is going to be an array that stores all of the organs we have so however many arguments that we get in this repeat loop is going to repeat that many times it's going to store whatever argument that we're on so it starts at zero so for entry zero it's going to store argument zero and then it's going to increment this value for the next time so now we have this array that has taken in all of these so now we actually need to create our data structure our grid so we know that the height of the grid is going to be however many entries there are so the argument count but what about the width because we know that sometimes it's five sometimes it's four and sometimes it's three so what you could do is kind of access them and then check whatever the longest one is and then make the grid whatever that length is but to be honest I'm just actually just gonna make them all five just to make it a bit easier of course that means that for those times we only need it to be three we are just drawing unnecessary empty cells but that's not actually going to impact anything so I'm not too fussed so let's go ahead and create the grid so I'm going to call this D s grid ID I'm going to create the grid and so we give it a width and height so five like I said before and then the height was that argument count so this function will not only create the grid but it will also return the ID and it's going to store it here and eventually we are going to want to return this value so that we can store it in here so that des menu main will equal the ID of the grid that we're creating so the very end we're actually going to return this but before we do that we actually want to fill the grid with the values that we have input into this argument so again we're gonna use a loop we're gonna use a repeat loop you could use a Foley if I like using repeat loops so I'm gonna use my I value again so I'm just gonna reset that to zero and now I'm gonna repeat again by however many arguments that we've got so what we want to do is basically go through the array this thing right here which corresponds to each row that we had here and then I want to kind of fill these values one by one with the entries in the array which means we actually have to do another loop within a loop because firstly we add this one and then we add this one and then this one so we loop through the entries of the array all right so firstly let's get the array that we're going to be working on which is whatever kind of element that we're working on so for example the resume element or something and then let's get the array length so that we know how many times to loop through this entry and fill the grid without as much data it needs so for this we have to be actually directly altering the d/s grid itself so remember how I said that to access a cell in the grid we have to give it an x and y coordinate so we know that the y coordinate is actually going to just be whatever our I count variable is right so if this is the first one then we know we're on this entry of the grid and that's just going to be the first array and if I is one then that's gonna be this one so the thing that's going to actually be changing to slot in each of the values it's going to be the x coordinate so that's what we're actually going to be looping through and incrementing as we go through our repeat statement which means we're going to need another variable xx and now let's do our repeat the number times we repeat is whatever the length of the array is as I said every time we finish a loop we increment the xx value but during the loop we're going to fill that cell with the appropriate value so to do this it's kind of like how you would go about setting up a coordinate but we use just an accessor which just means kind of get this cell of the grid and then we give it an x and y and the x and y value is going to be whatever XX is and then whatever eyes and then we just set that to whatever entry that is in our array and finally at the very bottom of this repeat loop we have done with that entry so we increment our I I value so I know that's a little bit confusing we are going with to kind of repeat statements but it's a very efficient way for us to feel algorithm for the menus so we have all the information we need about the menus so now if we come back to our menu object it should no longer be complaining that we need a certain number of arguments because we made it that it can be variable all right so now we should be creating grids that are filled with these values now I'm gonna do a couple more setting up things we need some way of changing what menu page that we're on so I'm actually going to have feste a page variable and then depending on what this equals we're going to be on one of these pages and then I'm going to have a variable called many pages which is going to be equal to an array that stores all of those so let's just type all them in right so that is just getting all of these and putting it into an array so now whatever page is equal to we're going to access that page in the menu pages so right now page is equal to zero so it's going to be on the main page and if we want to change to the audio page then we're going to change page to be two because remember that's zero one two and finally just so that we can navigate the menu I'm gonna have what element that we're on so I'm gonna call this menu option but I'm actually going to have this also be an array so that each page has its own menu option so now depending on the number of menu pages that is that's the number of entries that we're going to create in the menu options so I'm going to do this with another repeat loop so I'm going to go right and then whatever entry of menu option that is going to correspond to the page I'm going to start that off as zero so that they all kind of start off at the top all right that is all the setup we need and before we forget so because we have created data structures so those DS grids so we have to come into the destroy the cleanup event and we have to destroy all of our data structures and now because we have actually created an array that has stored all of the IDS of the data structure we can just loop through this and delete them all in a similar way to what we've done here so actually we can just grab this because it will be in a very similar form but instead of creating you know a new variable and setting its value we instead are going to destroy all of our entries in the menu pages all right so we're actually done with the setup now we haven't drawn anything visually but we can still check that all of our data structures setup has actually worked that we've actually transferred our plan and arrays into grids so if we run the game in debug mode we can actually check on what a grid's are storing so I'll come up to this little bug symbol here or just hit f6 to run the game in debug mode there's nothing in your game you'll just be met with a black screen but that's fine we want to come over to this tab here hit pause so we can actually investigate some stuff come into the instances tab if you haven't got this already and have a look at your menu object so we can see in here all of those variables that we set up for the menu so our page variable which was set to zero and we have all of our data structures here with the DES prefix and then the menu pages array itself that is also storing all of the data and you'll probably note that interestingly the IDS of all of our data starters are just numbers that's just how game maker does it but what you can do is sir it's just displaying the real value of it here but if we right-click this and come and tell it that this is actually a deer's grid we can investigate this further and now there's a little plus here and we can look at what's stored in each of the spots so as you can see our grid has a width of 5 and a height of 3 so this was for our menu our main menu so that's exactly what we want and now we can have a look at what is stored in each of our columns so in the first column right that's where we want all the strings and we can see that that has transferred properly and then in the second column that was the type so remember we had nice and numerators but here it's just showing us the actual numbers and you can see all of the variables have come across right and there was nothing actually stored in theirs fourth and fifth columns for the main menu but for some of these other ones if we just keep clicking and have a look at all the contents you can verify if you have actually stored everything properly all right but next time we will actually visualize some of this data and get all of our options actually drawing on to our screen so thanks for watching I'll see you in the next one so this topic on menus was actually chosen by a vote on patreon so thank you to everyone who voted and he's supporting me to create these tutorials and special shoutouts to Daniel Hargrove maximal in our booth alien XD game studio the great poultry Stewart Wells one g72 and Hunter T for their support thanks guys I hope you're well and I'll see you next time

Channel: FriendlyCosmonaut

Views: 51,958

Keywords: menus gamemaker, menu gamemaker, menu gamemaker studio 2, menu tutorial gamemaker, organisation gamemaker, organising gamemaker, data gamemaker, data organisation gamemaker, how to organise gamemaker, organisation tutorial gamemaker, menu tutorial gamemaker studio 2, menu tutorial gms2, tutorial gms2, gamemaker tutorial, gamemaker studio 2 tutorial, friendly cosmonaut, friendly cosmonaut menus, friendly cosmonaut tutorial

Id: 1ITZOrI2qkA

Length: 28min 18sec (1698 seconds)

Published: Thu Nov 30 2017