GameMaker Studio 1 & 2 Inventory Tutorial

[Laughter] [Music] and this is part one of the awesome inventory system now if you'd like to follow along and exactly what I'm doing here I have this project that is starting from scratch but all of the sprites and the player object have been created for you it's available in the description down below for you to download for game maker studio 2 and you can follow along with me there if you so desire but with that let's go ahead and get started the first thing we're going to do is make an object and we're going to name this obj inventory and this object is going to manage our inventory system apart from the player so it'll be separate that way if anything goes wrong if we have any bugs we know where to look and this object is going to be persistent from room to room so it will always be there now to make sure that is the case we need to click on persistent which is right here game maker studio 1 it's the same kind of box as persistence just make sure that is checked and then while we are thinking about it let's put it inside of our room doesn't matter where I would put it inside like in the top left corner or something like that that way it's in your room so with that let's go ahead and put a create event inside of here and we are going to set up a few variables and these variables are actually going to be global variables and we initialize that with the term global var and that allows us to access these variables from anywhere without having to use an access or saying like obj player dot inventory or something like that so we can name these whatever we want I'm going to name them player inventory and player inventory width and I'm going to set a player inventory width equal to 5 and the reason I'm doing that is we are going to be using the width of this inventory system in several different places and I want to be able to access that very easily and if we use a variable like this then all we have to do is come in here and change this number if we ever change the design of our inventory instead of going around and finding every single five that relates to the width and then changing that in there so this just makes a lot easier in the long run which is what I'm trying to design for is a very flexible and dynamic inventory system that you can use in lots of different cases now player inventory we're going to use a function called DS grid create and this is actually going to be our primary inventory and the DS grid system is what we're going to be using all of those built-in functions to manage it so I'm gonna middle click on this and I'm gonna bring up the help menu because it is very helpful to understand what we're using now D S stands for data structure and that just means that is a way of holding data in a particular format that is kind of industry standard so that we know the things that a grid can do we can we know the things that a map can do which is another type of D s there are built-in functions and if we go back to D s grids right here you can see that all of these functions are related to D s grids and so these are the functions that we are going to be using things like DS grid set and DS grid get we can actually access them through the normal array accessor but we want to use these functions because we know what we're going to get and we know how they're going to work so with that let's talk about DS grids and why we want to use them in the first place so they are a 2d array that can be any size and obviously have a lot of functionality built in but they can store any kind of data you throw at them they can store sprites strings numbers scripts all of these things that we are going to want to be associated with each item in our inventory this grid can hold and we can sort through this array and find things that we need to through a couple of four loops that once we write once we are good to go because we'll add them as a script and we can call them and add functionality that we want to our own inventory system I want to show you the inventory that we are going to be using throughout this series it's going to look like this so the orange numbers are computer counting which is how we're going to access them and the black numbers are for normal counting but also how the some of the functions the DS grid functions actually return numbers such as the height and the width they return a height of 2 which is important to know because if we are counting computer style we need to realize that a height of 2 is actually a height of 1 in the way that we need to know about it now our items are going to have just five things of information about them they're going to have a name amount description sprite and script and they're going to be in this order which is important because we are going to access things like the name in the amount when we need to sort through them when we need to find a specific item the name is going to be in the zero slot so when we reference the x position of zero we know that that item is going to be the name of that item and when we reference the fourth spot of the x-axis we are calling that script to be used so with that out of the way let's go ahead and create our inventory and it's actually very simple because we just need to give it a width and a height and we already have a width which we have predefined here and a height of one because we wanted to have a height but there's no actual items inside of it so again this is counting from one so this is just going to be one item of one height inside of our d/s grid there's nothing in it now but we are going to put something in it and then I'm going to show you that this is actually working now to add items we need to create our own script because we are going to add it like I showed you in the in the way and in that specific format for our for our items so we're going to call this add item and this is actually going to be a very generalized script in the sense that you are going to be able to use this anytime throughout your games when you want to add an item from the end of a fight all you have to do is grab the item that it is and call this script pass in the right information and it will add an item to the inventory if you are buying an item from our merchant if you pick up an item from a ground this script will be functional for all of those cases which is very useful now I'm gonna copy and paste something in here which you may have seen you may not have seen this is JSON comments and it allows our our custom-made functions our scripts to behave and look a little more like game maker studio functions with these in here I've added the function name a description and also the arguments that we are going to be passing in so if I come up here and I actually type in add item it changes color because I have changed the predefined color for my scripts that way I can see them easier but you can also look right down here that it now tells me like a game maker studio built-in function what I need to add in I need to pass in a DES grid and it's going to be called grid you know the grid to add is what I need to put in there which is going to be player inventory so I need then I need to pass in a string and an item name and so on and so forth every time that you add this set of scripts you or set of comments you can make a script look a lot more like a function and you can find that in the help manual which is where I found it so what we're going to do is we're going to set these up we're gonna say grid to add 2 equals argument 0 we're gonna say new item name equals argument one new item amount equals argument 2 new item description equals argument 3 new item sprite equals argument for and then new item script equals argument 5 ok now we need to think about a couple of cases here so when we are designing a script we need it to work under any circumstances and for adding an item we need to think about two cases so case 1 item is already in the inventory and then case two it's not in the inventory so for case one depending on how you want to handle it we are gonna handle it as if we already have the item in the inventory we are going to increase the amount that it is because you can hold as many items as you want here now of course you can add in like a weight category and then you know you can have all sorts of different information about your inventory if you want specifically but in our case we're just going to say if we have an item already just increase the amount if not then we are going to add the item to the inventory so to increase the amount what we need to do is have a special case so we are going to check to see if that is already in there we're gonna check through a for loop and we are gonna be using for loops a lot throughout this series so if you don't know how to use them I suggest to you figure that out I have a couple videos on them game maker language and so forth but if not I'm gonna try to explain them here as best I can a for loop well actually let me show you a little thing you can actually what is that I just found this f4 and if you click for you have a predefined for loop that it sets up for you now these words are kind of big but basically you need to initialize a variable that is going to be changed every time the loop is run so I'm going to say I equals 0 so it's just a variable called I then I'm setting up right now and it is going to start at 0 and it's starting at 0 because our inventory starts counting at 0 the condition is while I is less than DS grid height grid to add 2 so while it is less than the height of our grid to add 2 and while it is less it is going to then go through this entire statement here all of the code inside of these brackets will then be run while this is less than that when it comes to the end of this statement it is then going to increment it and we are going to say plus plus I which just means I equals I plus one it's the exact same thing it's just that plus plus I is a shorthand for it and it's the way that I learned to code so maybe it's the way you learn to go so our statement here is going to look like this we're gonna say if DS grid get grid to add two you have to pass in the idea of the grid on all of these functions you want to use so it knows which information to grab so if we're gonna grab the information on zero which is the name and I which is the item slot because we're going to go through our inventory and look at every single item and if the information returned from this function which can either be a real or string if it is returned and it equals new item name then what we want to do is just increase the amount that item is there because it's already there so this is this if this returns true it means that we found the item in the inventory so then we're gonna say DS grid set grid to add to this is going to be 1 so we're going to set the value of 1 and I so the spot we're at but the amount value we're going to change and the amount we're going to change it is by the new item amount right here but we have to get that value beforehand because we can't just assume that they only have 1 because sometimes if it's like gold they could have a lot more and if they picked up 5 gold we need to add 5 to however much they had before and to do that we use their function called DS grid get so we get the amount they already have and then add our new amount to that so grid to add 2 and it is going to be 1 and I for work for exactly where we are it's going to be plus new item amount and then we are going to return true and this is just for if anything goes wrong we can set up a return false and then we'll know that something failed along the way so that is the case if we find anything so if we find the item we're just going to increase the amount and we'll call it good we don't need to do anything else but most of the time we're not going to find it and we actually are going to want to do this second case and it will look like this let me bring this up so if des grid get grid to add to zero and zero we're gonna say if it doesn't equal zero so this is simply a check and this check is saying that if the grid is empty then we don't need to do this but if the grid isn't empty if the first slot in the inventory it has an item already then we are going to increase the size of the grid but if the first item in the inventory is zero which zeroes would mean that there's nothing in it which right now there is nothing in it when we create a grid it fills all of those slots up with zeros which is how we know that there's nothing in there so there is five zeros right now in our des grid so we are checking to see if the grid if our inventory is completely empty in the way we know that is through zeros so we're checking to see if it doesn't equal to zero because if it does we can just put an item in that slot does that make sense I'm sure I'm hoping that this makes sense if our inventory is not empty what we're gonna do is des grid resize we are going to increase the size of our grid by one grid to add to and the width is player inventory width and the new height is actually going to be DS grid height grid to add two plus one so if our grid is empty that means that the first the name of the first item will be zero and if that's the case we are then just going to add in the next set here but if it's not empty if there's already an item there then we want to increase the grid size this is a safety check because when I was making this I found that if you just resize the grid every single time because we're starting the grid at one size it does a funny thing so just make sure you have this in here now what we want to do is say new items spot equals DS grid height and this is going to be grid to add to as usual but now it's going to be minus one because we want the spot that is below what it actually returns because remember the DS grid height will return a size of two and if we're counting in computer which is how we're going to assign it 0 1 2 is actually the third spot so we need to subtract one from whatever this returns in this circumstance and so now what we're going to do is just use the function DS grid set and set all of the values in our new blank inventory spot to the values that we have passed in so it's going to look like this we're gonna say grid to add to zero new item spot that's why we did that so that it's we don't have to put this function in there every single time and new item name so what am I gonna do right here is actually copy this and paste it now be careful because we need to change these numbers right here to 1 2 3 & 4 and we need to change what we're putting in there as well so this needs to be new item amount new item description new item sprite and a new item script but with that that actually lets us add all of the values that we are passing in into the correct spots and we have to do that a lot but now it is a script it's a function that we can call very easily very quickly and it will just work every single time so even though we had to kind of copy and paste this code a lot we just have to do it once that's it so now we have any working scripts to add items to actually any inventory any grid we can actually add items to and it will do it perfectly because we have set it up that way now to show you this we're going to make obj pickup and we're gonna do this so that I can show you in kind of a graphical visual way so that you can actually see it working so we're going to not give it a sprite because we're going to assign it a sprite and the way we're going to do that is come into our create event so set up default values and now inside of here we're actually going to say my item name is equal to undefined my item amount equals undefined I had a description equals undefined and my item sprite undefined my items free undefined so what we're gonna do is when we create these items inside of wherever we were going to set all of these values so that they can be dynamically created at will instead of having a set of items for all of them right now I just have these sprites but in a big game you'd probably have way more items than this using just one item and through this method you can have all of the items in your game as pickup objects with just one object right here and the way that you can do that is by adding the draw event and inside of draw we're going to assign sprite index equal to my item sprite we're going to draw itself which is very important otherwise it will not appear and then we are going to add a collision event with our player and inside of here we are going to call the function add item and we want to pass in the player inventory and then the item name is my item name I hide on the mount and you can kind of see where we're going from here we're just going to pass in those values that we just set up my item description my item sprite in my item script and then we're going to call instance destroy on our cells because as soon as we pick up that item we no longer want to have that item in the room so inside of here we're going to pass in three items and it doesn't really matter what but if we double click on it and click on creation code we can then set this up so to make sure that we got this all correct I'm going to copy this section into heater and inside of our creation code I'm just going to copy and paste that and then I'm going to set these for whatever we want so this is going to be a red berry my item amount will be one description will be a delicious red berry my item sprite this SP our red berry an item script right now is just going to be nothing because we don't have anything to give it a script eventually if this was a healing item we might have a healing script we can pass and how much it would heal and so on and so forth but right now we don't so let me just go ahead and paste that one more time give it another name we'll call this one sword my item amount of one description is a metal sword duh my item sprite is SP our sword and item script again will be blank and then I'm not gonna set this third one so that you can kind of see exactly what happens now if we run this two of those items will show up the third one is going to be like that because the very first sprite in here is actually my spr bard walk up and it picks up undefined kind of as a well when it assigns sprite index inside of the object pickup it does it with the very first one that comes into contact with and so it looks kind of funny but if you ever see like the very first sprite show up in your inventory somewhere that's what's happening is it is pulling the very first value of your sprite but now if I collect this well nothing happens it doesn't look like anything happens but it does so I'm going to press f6 to open up the debugger and I am going to set global variables to true I'm going to pull this up and I am going to right click after I pause I'm gonna right click on this player inventory and set it to DS grid and now right here you can see that it has a width of 5 and a height of 1 now if we play this and I move around and I pick up a berry it's going to then add that berry and keep the height of 1 because the was empty the first time and if I come over here and pick up a sword it is now a height of 2 Redbury and a sword so that is a fully working inventory to be able to add items to it what happens if we do that yeah we pick up an undefined item so that's kind of funny but that is our inventory system at least the very basics of it so creating an inventory is actually super simple if you're using DS grids most of the functions are already there they are created for you and all you have to do is utilize them you can see it here in the debugger with just that one one script that we made we can add items to our inventory in the correct amount and where they should go and so let's get on that and start working on the GUI for our inventory first thing we need to do is make a new object that is going to take care of all of that displaying information we're gonna call this obj inventory GUI GUI cool user interface we're gonna assign it the sprite SPR fantasy inventory sprite like the name I know and then we are going to add a create event so inside of here we're gonna set up all of the variables all the data that we need to be properly display our inventory as we register and as we grow this object so first thing we need is text boarder this text border is going to specifically apply to this sprite in the sense that right here it has a little bit of a border you can see it has a little bit of gray and then brown and I want to display the text right here on this light grey parchment like paper that's what our border is going to allow us to do so if you change the sprite you'll need to change this value as well we're gonna set my items equal to player inventory and this is just so that this name is a little bit shorter because we're going to use it a lot we're gonna set my color you want to see black which is just going to be the text color that is displayed we're going to say is empty equal to false and this is going to be so that if we have no items on an inventory we then display an empty message which is you've no items ok now we're going to set up some global variables these variables are going to be accessed in different scripts and different objects that our obj inventory GUI will create so we want to be able to access them easily and quickly so that's gonna be item selected scroll them out and inventory and at so let me go ahead and increase this window so we can see ok so first off item selected it's going to equal zero so this is going to be the item that we are currently chosen on our inventory list we're gonna have scrolled amount equal to zero we'll get to that eventually and inventory end at is going to be a couple of different things that I can choose from it's gonna use this function called min which stands for minimum so it's going to pass in several different values and then return the smallest of those so we're gonna pass in the DS grid height of my items and that is this is specifically so that when we are when we choose to display how many items on the inventory GUI we're going to choose the either the amount of items we have in our inventory which can range from 0 to 20 mm I think the array size is in here maybe it's 220,000 I don't know it's something ginormous or we're going to display the maximum of our sprite height and the way we get that is by using the function floor which is just rounding down to parentheses here cuz we need to do some math in the right order we're gonna get sprite height minus text order times 3 so that times 3 is specifically so that it fits exactly how we want and doesn't display items outside of the sprite - parentheses at the end of that 3 and divide by 32 with two parentheses at the end of that as well this math needs to be done in the correct order you need to multiply this and then subtract it and then divide the value so if if you have any weird display issues it's probably from that right there because you need to make sure the math is done properly another value we need to have on here is inventory on screen and that's going to set start at zero as well and then we're going to set the is empty message and inventory end at in a special case so we're going to say if des grid get my items of zero zero which is the first item name in our list if that's equal to zero that means we know that it is empty so we actually want to display nothing on screen and we want to show our is empty message so that will equal to true okay now that sets it all up we're not going to use all of these values in this part but we will in the coming parts the next big thing that we need to do though is actually be able to display our inventory we have the object but to bring it up we're going to add a key press of the letter I and this is inside of obj inventory okay so create the inventory on screen so if the inventory is not on the screen then we want to make it but if it is already on the screen we want to destroy it and when we're going to check that is through an if statement so if instance doesn't exist and we're going to use the exclamation point which is not and then the function instance exists obj inventory GUI so if this does not exist we want to make it so we're gonna say inventory display equals instance create now this function right here will work in game maker studio 1 it will not work in game maker studio 2 if you're following along in one then just use that but know that you will need to separately set the depth of the object being made so that it is lower than whatever is making it so that is always on top of the screen for gaming studio 2 we need to use the function depth and we actually set the depth when we make it so we're going to create this at 0 0 because we're going to set the X&Y later in just a second this is gonna be depth minus 1 and we're gonna make obj inventory GUI now the reason we've given it a name is that we are going to come down here and say width and inventory this plenty and this is where you'd set the depth if you're in game maker studio at 1.4 we're gonna set the X and the y coordinates because we want to set it based on the sprite that is being displayed for our obj inventory GUI and before this is made we don't know what it is I could get the information from this right here but perhaps you've changed the sprite you want to draw and this will allow you to change that sprite and still have it be in the correct spot which is the bottom left corner for this specifically so we're going to use the function sprite get X offset of the sprite index and the sprite index is with the object we just created so it's the sprite index that is assigned to obj inventory GUI and Y is going to equal room height - sprite get Y offset of our sprite index so if I press f5 and run this we are going to be able to create our obj inventory GUI and place it directly in this bottom left corner by doing that through this functions right here we are dynamically setting the correct position no matter what the sprite actually ends up being it is going to take the room height and the X&Y offset which is set right here inside of the sprite editor window if I change it you can see here that then it would display differently but I keep mine up middle center all the time that way it makes it exactly where we need to now the last thing I want to do right here is say else so if it already exists then we want to destroy it now in game maker studio 1 you can't do this obj inventory GUI you'll need to use another with statement and then call it instance destroyed on itself but in game maker studio 2 you can pass in objects to destroy themselves which is super useful ok that takes care of bringing up our inventory and destroying it now we want to actually focus on displaying something of our inventory so we're gonna add a draw event on-screen now we're going to use the variables that we've set up and the information that we have to draw the names right now of the items that we have so the first thing we want to do is draw itself if we don't draw a self than that it will not show up at all we're gonna draw set color equal to my color that way you can change that very easily now before we draw the names we need to draw the headers or the column labels so we're gonna use draw text and I have spiraled the values specifically for my sprite here so if you change it again this will need to be changed and this took a lot of tinkering around so if you can't find it at the first shot don't be discouraged keep playing around with it so we're gonna say beatbox left plus text boarder B box top plus exporter and this is going to say image now B box left and top are actually the bounding boxes of the sprite that you are currently calling it in so it returns the x value of the left and the Y value of the top now it's going to display right up here every single time even if we change the size of this sprite very useful to use these built-in variables that way if you change the sprite or the size it will still function properly so I'm going to copy this and paste it twice we need to change the X values because we need to change where they're being drawn to 125 and 225 we need to change this to name and amount and that will draw the image name and amount so let me make sure we've got everything working properly I'm gonna run it press I there's our column labels and I can destroy it okay that's working fine now I'm gonna create two more things here I wanna say item left start equals B box left plus 120 and item top start equals B box top plus 48 and that's just because we are going to be using these quite a bit inside of our drawing of the inventory and I was going to make them easier to access now let's draw our inventory we're gonna say for I equals 0 I is less than inventory and at plus plus I and we are going to draw text and it's going to be drawn at item left start item top start plus in parenthesis I times 32 that way as increases the Y position of the items that we're drawing are changing and going down further on the screen and we want to draw the value of DS grid get my items and this is going to be 0 which is the name and I which is the specific item that we are on to parenthesis and then we are good to go now right now you cannot run into an item and have it add added to the inventory while it's running we'll get there eventually but that's kind of like just a nice feature to have but if we bring up the inventory again because this has created every single time you make it it is now there if we come over here and pick up these two items we now have a sword a red berry and an undefined item which is awesome so that gives us those things to be able to add to our inventory showing that our add item is working and now we can display those things where we want them which is just awesome and now we need to display everything else so let's go ahead and start working on that right away now what we're gonna do in here is add in a secondary for loop that is going to go through and gather all the information about each item that we have selected so we're going to say for J equals 0 and J is less than the player inventory width which is the global variable that we set up and it's going to increase by 1 each time now the way you can envision this is that we need to take this one and actually add it right there the way to envision this is that we need to go through the every single index of the variable of the inventory that we have and if you remember the 2d array looks like this so we've got name over here and then we have a mount and so on and so forth so we need to have two for loops because we need to come down to the first item then we need to go this way and we need to go all the way through here and then when we're done we jump up one and go all the way through again displaying all of the information getting all the information that we out of it and to do that we use two for loops now to draw it correctly we need to put in some if statements so we're actually going to say if J is equal to zero then we are going to draw this the name exactly where we wanted to because we need to draw things like this the sprite image and the name in specific columns we need to take control of that and the way we do that is by checking to see which value J has and if it's a specific value that we want we draw it and where we want it to go so the next one is if J is equal to 1 that's the amount so then we're going to draw text and this will be item left start plus 140 item top start plus again I times 32 and then we need to get the the amount which is done through D s grid get and this is going to be my items 1 because that is where the amount is I which is the first for loop we're doing which is taking care of the y-axis the items in our list and then we have our amounts that we are drawing which is perfect then we want to draw these sprites and that's going to be if J is equal to 3 then we are going to draw sprite and the sprite we want to draw is the first thing we need to give it so we're going to say D s grid get my items and the X&Y position is going to be J because we're the exposition is J here in this double for loop and then we have I being the actual y-coordinate that we want and that will get the sprite and now we want the first image of it which is the first sub image and the X&Y position for here needs to be B box left plus 40 item top start plus I times 32 now we need to do one more addition here plus 16 and that's because our sprite is actually 32 by 32 we need to put that directly in the middle of where we are looking at and adding the 16 will do that now if I run this our sprite in our amount should also show up for the items that we have in our inventory so let's pick these up and voila we have our images and our amount so with that now we have our items being displayed firmware inventory properly so what we want to do is actually come back into our obj inventory and I'm going to just throw in some items into our inventory to fill it up to make sure that it is displaying properly and that we have a full inventory so that when we start doing scrolling in the next part we are going to have that ready to go so I'm actually just gonna copy that from mine but I will pause for a second now and allow you to kind of create your own thing so this is everything that I have right here I'm just calling the add item script and filling it in with all of the sprites that I have all of the items right here so you can pause this and then you can do this yourself if you want or you can download this project and copy it or do really whatever you want I took a long time to actually come up with the names and got the sprites right so that is all there now the things that might break really quick are right here are functions that we have not created yet so we'll take those out and then we should be okay now let's run this and check because now that we filled it up our initial if statement should show that we are only going to create that many items even though we have like 15 16 items at our inventory so that works perfect now what we want to do next is actually be able to show and select different items in our inventory to do that we're going to come back to obj inventory GUI and we are going to come down here and we're going to create a rectangle around the selected item and then we are going to be able to move that rectangle and we're going to show that we are actually looking at a specific item when we're doing that so what we're going to do is use the function draw rectangle and we need to provide for values of the x and y-coordinates and it's going to draw a rectangle around that and then we decide if it is an outline or not so the values that I am going to use I have worked around and figured out exactly what I need for this inventory display so it's gonna be B box left plus text order item top start plus item selected times 32 and item select is what we're going to use to change our selection B box right - text border and then item top start plus item selected times 32 then we're going to add 32 to this because we need to start it at one down because that we're adding the plus 32 because that border is basically you know we don't want it to start over the names here we needed to start where it needs to begin I'll show you that in just a second go right true and then if we press run and I pick up an item the border is gonna be around the first item selected okay there we have it right there so that plus 32 gets us in the correct spot for exactly where we need that y coordinate to be now we can't move it yet so that's what we're going to do next we're gonna come up here we're gonna add an event and I'm actually gonna use mouse wheel down and mouse wheel up you can use any keyword event you want here or any event that you want and what we're actually gonna do is create two scripts that go up and down accordingly so those scripts are going to be scroll down and scroll up and then you can just call these scripts whenever you want to go up or go down inside of your inventory which makes it very simple so inside of down what we want to do is say item selected which is where we are choosing and we're actually scrolling through our items it's going to equal clamp which is a function that takes a variable and this time we're gonna put item select it in here and tells it to either it can go this high or this low and it won't let it go outside of those values so this is a really handy function because if you don't want a value to go beyond something you can keep it clamped with this function and we need this value to be clamped because we are going to be moving between items and if we were to ever go outside of the grid and try to say select item 16 when there are only 15 it is going to throw an error and the game will crash so we're gonna clamp this value and the way I use it is right here so I'm going to try to increase it and then assign that increase to my variable but I'm gonna say that it can't go below zero and then it can't go above this grid height of my items and it's gonna be minus 1 now my items is only in obj inventory GUI which is where we are going to be calling the script from so that's totally fine now if you were to change where you're calling it from you might have an issue with my items so we're gonna go to scroll up and do basically the exact same thing but in a reverse manner so I'm gonna say item selected equals clamp - - item selected zero and Di's grid height my items - 1 and then we are going to be able to move up and down our inventory once we put in these functions so we're gonna say a mouse wheel down we're going to scroll down my mouse wheel up we're going to scroll up and so you can see that we can move this up and we can move it down right now we can go beyond the inventory but we can't get an error because of that clamp that we've set up so that's a really good start now what I want to do before we get into scrolling is to show you how to access the description of all of these items and actually display that so right here underneath draw rectangle once we get to the end of it very long one we're going to draw a sprite in the sprite we're going to draw is just like a description box and then we're going to get the description of the item and then we're going to draw that inside of that box so what we're gonna do is say draw sprite draw sprite SP our item box zero sub image we're going to draw this of the BB box right of ours where we are right now we're gonna get the X offset of the sprite item box and then we're going to set it over room height - sprite get Y offset SP our item box so now we're gonna draw that right there and then what we want to do when we are drawing that we want to draw the text of our item that we have selected but if we don't have an item selected we need to draw the is empty message so we need to put that in right here so instead of just always drawing the description we need to have an if statement that says if is empty draw text draw text txt extended text just means that we can say it exceeds our width limit make it into multiple lines which is very handy this is going to be BB box right plus fifty room height - sprite get Y offset our sprite item box so again that's a very useful function to be able to get and we need to then subtract that by 100 to bring it into the right spot and the text that we want to put in there is empty message the separation is 32 and the width is actually the sprite get width and this is the width of the sprite item box that way it can't go beyond the item box and then we need to subtract the text boarder that we have that way it stays within the border of the inventory that were drawing stays inside the textbox that we're drawing so if it is not empty what we want to do is basically draw the exact same thing so copy this paste it right there we're going to change the empty message to DS grid get and the ID is going to be my items the exposition we know is two because that is the description and the y is the item selected close that and then that's what it's going to draw now we want to change this first value to plus 15 just because it's going to be a little bit different and when we draw the is empty message we know what that's going to be so we can change its spot now if I press I you can see here that I am drawing this text box and we are drawing the descriptions of everything inside of here so we can go all the way down this doesn't move but you can see that we are changing what we are looking at and if we come into obj inventory and I comment this whole line out we can check the is empty message and make sure that it is working as well so we have no items but this still gets drawn and that is just a designer thing I want it there if you don't then you could probably just put that inside of the if is empty then don't draw this otherwise draw it so I have it there but you don't have to and now we're going to uncomment this so we can start working on scrollable inventory we're going to jump into the object inventory GUI and inside of here we're actually going to be using a variable that we've already made called scrolled amount right here and we are going to be putting that inside of our draw event in certain locations so the places that it needs to go are at the places where we are getting information from our grid which is our DS grid get we're going to put a plus scrolled amount wherever that is happening so they're on the second line and on the third our scroll amount value is going to make it so that the items that are being displayed are in line with how far down we've gone through our inventory and far up once we come back up now our rectangle that we are drawing needs to be changed just a little bit inside of these items selected ones what we need to do is actually put their parentheses around them and then we are going to subtract scroll them out here we need to subtract it because we want our rectangle to always be on the bottom of our inventory instead of going below so if we subtract how much we've scrolled down it'll always be on the bottom instead of disappearing it's minus scroll amount now we've done that but we haven't actually changed our scrolled amount at all so what we need to do is open up our scroll functions if you middle click on a script that you've created inside of your window here it will actually open it up right over here which is kind of cool so on our scroll down what we need to do now is update our scroll amount based on certain values because you don't just update it anytime it needs to be specifically when you are going below what is there and what is displayed so to do that we're going to do an if statement we're gonna say if item selected it's greater than or equal to inventory and act and if this is true we're going to plus plus scroll the mount and plus plus inventory on screen now what we need to check I keep doing that the last thing down here we need to check is a special case if we're attempting to go beyond the grid size we need to put if scroll the mounts because this is going to be added to I so if scroll them out plus inventory on screen is greater than es grid height of my items this time we're not going to subtract one because we want it to only be greater than it we're going to decrement our scrolled amount and that way we can't go beyond our grid and end up with an error now what we also need to do is take this variable inventory on screen and actually do something with it right now we haven't done anything with it it is just a value that we have so what we are going to do is actually inside of our draw event right underneath here we are going to say inventory on screen is equal to I this way we can know exactly what I is all the time and we can be checking where we are in making sure that we're not going beyond where we should be now on our scroll up we're going to do basically the same thing but in Reverse so here all we need to check is if item selected if the item we've chosen is less than scroll amount I cannot type we're gonna decrement our scroll amount and with that I'm actually going to build this and we should see an inventory system that we can go down and we can scroll through we can go all the way to the bottom we can go up and when we come up the it starts scrolling at the very top and that is how I liked it and how I thought it should look that's a pure design decision if you want you can change the if statements on the scrolling up to begin scrolling up at a different point if you want but this is just the way I did it so this is our full inventory and now it is scrollable you can view everything which is awesome so this is this is huge just actually took me a very long time so I hope you guys appreciate this and that you can use it in your games so with that we now have a scrollable inventory but we can't use it we can't do anything with this yet so what we're gonna do is actually make it now usable so we're going to create a obj button and this button is going to use this SPR button sprite and this sprite actually has two sub images so we're going to use those so that when we hover over it it changes just for a little bit of a nice effect so inside of here what we're gonna do is add a create event and we're gonna set image speed equal to zero since it has more than one sub image and we're gonna give it a variable that we are going to define when we create our sprite button this is going to be something that we create and then we give it information now the reason that this is in actual objects instead of just a sprite like our sprite item box that we drew on screen is that we want to be able to click on it now if we want to click on something that isn't an object it's far more difficult because we have to be precise on where our mouse is at and tracking your mouse location based on a sprite you're drawing from code is possible it's just a lot of work and it's a lot more difficult to get precise so if we create an item we can do much easier much simpler things such as a mouse event like mouse enter where we say image index equal one and a mouse event where it's mouse leave then we say image index equals zero that way when we go on to it we can tell that we are hovering over it and it just makes it a lot better ok a lot easier so draw we're gonna add event and inside of here all we're gonna do is just draw our self and draw the text that this object has been given and it's going to be drawn at X minus 20 and Y minus 10 to be right in the middle it's gonna be my text now the text that we're gonna give it is going to be use and either discard or trash or remove whatever kind of adjective you want to use to get rid of an item you would give that to it and then what we're gonna do is a mouse left pressed and when it is pressed we're going to call a function that is trash item which we haven't made yet but we're going to set it up so that it is ready to go so I'm gonna say if my text is equal to use and this part is important because this button is going to be used for both using and removing so we need to have a check in here that says when we press on it do something based on certain criteria and that criteria is my text so if it's used what we're gonna do is actually use the script that the object that we have currently selected has so we're gonna say if actual we're gonna say script executes D s grid get I'm gonna say a player inventory and four is where our description is where our script is being stored at is the very last thing in our inventory so for and then item selected and remember that is a global variable from our obj inventory GUI so we can access that and that is on the item that we want and then when we hola one more so then when we use our script execute that just says use the script that is inside of there and we can store a script very easily which is awesome it but you need to use this script execute function now thinking about this when we use an item what we want to do is to use it but then we want to get rid of that item because it has been used so right after this we actually want to call trash item which hasn't been made so let's go ahead and create that script and we'll come through and we'll fill that in in just a minute but that way it is right here so we know it's being used okay and then we're gonna say else if my text is equal to trash we're gonna just call trash item not Tash item that way it just gets rid of the item completely alright so with that we need to go into obj inventory GUI before we make that script actually official and doing something we're gonna go to the create event because now we need to actually make those buttons and put them on screen so that they can be used but to do that I actually want to put them inside an alarm the reason for this is that I want to access certain variables about my obj inventory GUI that aren't actually set yet and mainly that is the X&Y location of our obj inventory GUI you may be thinking that it's already set because it appears in place but if you remember right here when we create it we actually make it at 0 0 and yes we change it but it doesn't actually update the X&Y coordinates until the next frame so it's going to come in here it's going to create it and it's going to set it but it's not going to move it so if we try to create our buttons based on where our sprite where our object is that's going to be incorrect this is something that I found was very strange I was trying to use be box left and it was coming up with negative 150 even though I had said it in the correct spot and that was because it hadn't yet initialized and set the x and y coordinates so if we set alarm 0 to 1 it will then work because it has had time to update those events hopefully that makes sense so inside of our alarm we're actually going to create a couple of buttons so use button is going to be instance create depth again this is difference between one game would contribute 1 & 2 is instance create depth so you just need to use regular instance create and I'm gonna say be box right + 58 and again these are values that I have played around with and it took me a while to figure out but they work very well for what I'm doing with this specific sprite room height - sprite get Y offset SPR item box because we want it to be exactly where the item box is being located then we're going to increase that by 100 and we're going to say depth -1 because we want it to be on top of it and obj where do we call that obj button okay now that will make it and it's too large to fit on screen and then what we want to do is assign my text to it so use button dot my text equals use now we're going to do the same thing with trash button instance great depth it's gonna be pretty close but it's gonna be beat B box right + 198 then it's going to be room height - sprite to get Y offset SP our item box + 100 and the same thing for depth -1 + obj button and then we're gonna set its text trash button dot my text equals trash so that will create the two buttons will actually run it right now and make sure that we haven't made any mistakes press I our inventory shows up and here they are and when I bring my mouse over them it changes color it looks really nice you can tell that you're about to do something with it now if I click on it it's going to come up with an error because we haven't actually defined that script yet so that's the next thing we're gonna do here so let's open up that script and jump into it and just like when we added an item there are a couple of cases we need to consider case 1 the first thing is if there is only one item in the inventory if this is the case we need to do something special because otherwise it's going to create an error because the way we're going to handle getting rid of an item is by setting it to zero and then moving all of the other items down one and if we try and do that when there's only one item that will not work in case two is actually everything else now the way we're going to be deleting is fairly complicated and it's going to require a little bit of logical processing power but there is an actual much simpler way of doing it but I opted to not do that way because it's actually very confusing to the player when they are watching you delete an item they're very quick and easy way of deleting an item would be to first check if it's the only item still need that but then delete that item pull the very last item and put it in its spot and then resize the grid by one if you do that it's quick and easy and actually fairly simple to code but it looks really weird because you might be deleting a book and replacing it with a yellow gem and when the player does that it won't it won't make sense to them so I opted to do a little more coding so that it makes more sense logically and visually for the player again as the designer you can do whatever you so desire but I'm gonna do it the more complicated way so you can understand and follow along with that if you so desire so the first case what we're going to say is if DS grid height of player inventory is equal to one so if there is just one item in there and if we say if DS grid get player inventory one and this is the amount it's greater than one and this is important because this is something that we're going to check the way we are deleting an item is one at a time again a design decision but I'm gonna say if we have five of something and we say trash we actually are only trashing one of that item if you take out this in this line of code that we're gonna type right here it will delete all of those items and that may be what you want but that isn't what I wanted to do so we're gonna say if there is more than one of that item that we are trying to get rid of we are going to set player inventory slot one zero because it's the very first item and we're gonna set it to D s grid get so we're gonna get that amount and we're gonna subtract one from it which is what we're doing right here so we're just going to decrease the amount by one if it is greater than one now if it's not what we're gonna do is for I equals zero I is less than player inventory width plus plus I DS grid set player inventory I which is where it is zero zero now this I is actually along the x-axis whereas normally it's been along the y-axis and we are setting it to a value of zero because if it's the only item we don't want to destroy our our inventory now you could and again it's a design decision and there are so many design decisions when it comes to the inventory I'm making them one way in trying to explain why and how I'm coding them but again those are completely up to you as the programmer you have total freedom as to how these things will work I am NOT going to destroy my inventory I'm gonna leave it intact and just set it equal to 0 's across the board and we've set up over here and other inventory systems that if it is 0 it displays an empty message so everything kind of works hand in hand like this now let's move on to the second case this one's a little more complicated so we're gonna say else and that's because this is if right here and this is else so else and again we're gonna do the same thing basically right here that we did except that it's going to be on the item selected so we're gonna say if des grid get player inventory one item selected it's greater than one so if they have more than one of the item that they have selected to get rid of we're gonna say vs grid set player inventory one of the item selected DS great get why your inventory one item selected minus one so you've seen that we're doing the exact same thing now if that's not the case inside of here I'm gonna say else and then this is where it gets a little more complicated so I'm gonna create two variables here I'm gonna call one current row and we just have to equal two items selected plus one and I'm gonna create another one called row to remove equal item selected now I'm gonna use a for loop and what we're gonna use these two rows for is going through and setting the current row or setting the row to remove we're going to set that to zeros and then the row right above it we're going to grab all of that information and shift it down one and we're going to do this all the way until we reach the end that way it looks like everything just shifts up or down depending on how you phrase it and the things don't get out of order they stay in the exact same order they were in so if they were organized by name they will still be organized by a name after you delete this so we're going to say for I equals row to remove I is less than D s grid height of player inventory and this is going to be minus one because we don't want to go beyond it this time we're gonna say increase by one and inside of this for loop is where the magic is going to happen we're going to use a new function called es set grid region and this allows us to set an entire row to one thing or another so what we're actually gonna do is copy one row to the other one which is why we need to know both the current row and the row we want to copy so we're gonna set player inventory and it's going to be player inventory again because you can copy it from another DS grid if you so desire but we're not going to it's going to be from the same DS grid to the same DS grid so player inventory - player inventory and the first X is going to be 0 the first Y is going to be current row and then if the second X is going to be 5 so from 0 to 5 all the way from left to right we're going to grab all of the information about the item and we're going to stick to our current row and then we are going to put it on the x position of 0 and the y position of I and what that is going to do is take the row that is right above it and then it's going to copy it into the row below it effectively deleting the item that was there which is fine because we don't want that item there anymore now we need to increase our current row every time we run this and then we will eventually get to the very end and they will all be set and then we'll have one row at the very end that has two items in it and then we want to do DS grid resize player inventory five DS grid height player inventory minus one so we are going to resize the grid by one deleting the very last item which is actually a copy of the very last item and when we delete an item we need to make sure that we are no longer trying to select that item that was there we're going to move our scroll the Mount and our item selected down one so that it is now on what it should be instead of what it was there otherwise we'll get an error trying to read something that isn't there especially if you're on the very last item it will cause an error if you don't have this so we're gonna say if scroll the mount is greater than zero - - scroll the mount if item selected is greater than zero - - item selected now before we could actually use this script there are two things that we need to take care of the first one is an obj inventory when we get rid of our obj inventory GUI we also need to destroy the buttons that we've created so we're gonna say repeat twice instance destroy obj button again this is difference between game registered a 1 & 2 if you're using 1 use a with statement right here like up here and then we need to come into the GUI and we're gonna add a step event and we're going to do a couple of useful things right here so in here we need to make it so that when we pick up items and when we are removing items certain things will happen in a certain way so we're gonna say if DS grid get my items 0 + 0 if this doesn't equal 0 we are going to say is empty is equal to false this will allow us to actually pick up items while our inventories open inventory end at equals DS grid height my items because we know that it was empty just a second ago but it's not anymore and we're gonna say if DS grid height my items is greater than or equal to we're going to use this the floor they're gonna get that size of our sprite again so we probably should have made this variable but in hindsight we didn't we're gonna subtract text border times 3 divide that by 32 and then if that's the case we're going to say inventory and at equals the floor same thing here right height minus text border times 3 divided by 32 this will allow us to dynamically update our inventory even while it's open otherwise it only it only takes on the create event so that's not as useful now we also need to have this right here if this grid get my items 0 0 is equal to 0 which means that it is actually empty whereas it is empty equals true and inventory end at equals 0 with those two things right there now we can actually add inventory to our I add items to our inventory while it's running and now we should be able to use our script just the way we wanted to so I'm gonna press trash and it is going to delete all of these items come down here and it gets rid of everything got a lot of gold coins let's get rid of them delete the last one we have no items I'm gonna pick that up it shows up in our inventory right away I can use this red berry and then I can trash that and I can close our inventory and that allows us for a fully working inventory system now there's just a few things left that I want to show you that are useful and make your inventory a little better and a little more usable in game so the first one is going to be a scroll bar and we're actually going to add that down here at the bottom of our draw event and we're just going to draw a sprite and that's about it and we're gonna just tell it to draw in the correct spot as we are using it it's not actually too difficult so we're just gonna say if these grid height of my items is greater than use this again basically the size of the sprite we're using right now really sure that made this a variable we're going to draw a sprite SP our scroll bar 0 for sub image now we're going to draw this only when we have more items than the size of our sprite so it'll disappear as soon as we can no longer scroll so it's a visual indicator to your player that you have more items in your inventory the X spot is BiBi box right and then the y is what's tricky so we need to bring it in by 20 we're gonna put it at the top we're gonna plus item selected times and this is going to be where we do some math to make sure that it Scrolls the the width or the height of our sprite no matter how many items there are in our inventory so if we had a hundred items we would want it to scroll just a tiny little bit every single time but if we had only two items beyond our inventory slot we wanted to scroll the entire height in those two Scrolls so we're going to multiply this by sprite height minus text border and we're going to divide that by DS grid height of my items and when we do that and we run it our scroll bar up here and it will allow us to scroll and look awesome like that and then as soon as we no longer need it it disappears perfect so that's one very useful thing another very useful thing is to be able to order your inventory by different means so we are going to create another object over here and this is going to be obj we'll call it obj order and we are going to give it a sprite of clickable but we're not actually going to want this to appear I was using this sprite for for debugging purposes to get it in the right spot so I'll make it visible for now just to show you where it's actually going to cover so it's going to cover up the column name of item and amount and with that we're going to be able to click on those two things and then it will order it by that thing that we are clicking on so we're going to pass in my what we want it to be ordered by and we're going to set up a return value that is also undefined right now and when we mouse left pressed we are just going to call a script but we're going to call a script in a way that allows us to order it by ascending and descending if we don't if we keep on clicking it'll change so we're gonna say if return value is equal to true we're going to give return value the value of sort inventory it is a function that we are going to create in just a second to the script we have to make we're gonna pass in player inventory my ordered by and it's going to be true the first time we use it and then after that so if this is true it's going to do that otherwise it's going to do this exact same thing but it's going to pass in false and then we're going to create a script and we're gonna call this sort inventory and this script is actually fairly simple let me show you what it is by copying and pasting the comments so that you can see that and then we're gonna say grid to sort people's argument 0 sort by equal argument 1 and order equals argument 2 now when we do this all we have to do is use a built in function that says DF grid sort and then you choose which column to sort by and it will sort them for you so we're gonna say grid sort sort by and order now the order is the true or false that is going to change because we are gonna say return the opposite of what it was sent now when we use this function as a design decision I'm gonna say we go to the very top of our inventory that way when you order it you are at the top whether by name or amount or whatever but again that's my design decision if you don't want that take out this code right there so this function is very useful and now all we have to do is go into the GUI go into the alarm event because that's where we want to create them because we want to do it based off of the sprite information and we are going to say down here named click equals instance create depth again difference between game maker studio one and two hopefully you've picked that up by now sprite get X offset let me bring this over of sprite index B box top plus 30 depth -1 and and what is that obj what do we name it order okay and we're going to say name click mine ordered by equals 0 because we're this is for naming this is for ordering it by the name which is in the x-axis of 0 and this is going to be amount click pretty much the same thing just a little bit over so it's going to be B box right minus 50 B blocks top plus 30 depth minus 1 obj inventory clickable sorry that's what I had before obj order and then amount click dot my order by equals 1 and then we're going to come up to obj inventory and before we forget we're going to destroy those two when we get rid of our inventory as well instance destroyed obj order and so when we run it they will appear right over those names and now we can order them by name order them by amount and we can keep clicking on that and it will change it as we go along and our red berries right here you can see that it adds to it and if we're now when you pick things up they're not sorted automatically so something you could do if you wanted to a design decision is call sort by name or sort by the last sorted value every time you pick up a new item that way it's exactly where you expect it to be but that's totally up to you and how you want your inventory to function so that's it that is an entire inventory system for you now I showed this off in the introduction but if you didn't see it this is really cool the way we've coded this is that our sprite can be Reese depending on you know the height that you want and it will still work exactly the way you wanted to because we have used sprite index we've used the B box left and top we have used the sprite built in variables so that no matter where we place things no matter how tall this is it's going to fit properly because we've used all those built-in variables and variables that we have made ourselves so let's mark this as no longer visible and call that a day so that is an inventory system for you I hope that you have enjoyed it it has been a pleasure teaching you and showing this off to you this is something that I'll be using in my game so I thought I would share it with all of you if you've enjoyed it please like subscribe and share it around I put a lot of work into this and I would love for more people to see it if you have questions or comments or you'd like to support me check out my patreon I would love to hear from you and work with you if that's something that you would like to do but that's all so as always have fun making great games and I will talk to you later if you find the content on my channel useful and you like it consider supporting me on patreon all of the people on the screen are doing so and they are awesome and they get rewards and you can join them so thank you for your time and have a wonderful day [Music]

Channel: Let's Learn This Together

Views: 28,810

Keywords: Game Making, Making Games, Game Maker, Game Maker Studio, Beyond Us Games, Game Maker Tutorial, Game, Maker, Studio, Tutorial, Training, Learn Game Maker Studio, Learn Game Maker, Learn Game Making, Inventory Tutorial, Inventory, GMS 1, gms 2, Gamemaker Studio Inventory Tutorial, How to, make an inventory, code inventory, inventory system, gamemaker 2, gamemaker studio 2 tutorial, game maker projects, inventory system gamemaker studio 2, gamemaker studio 2 inventory, game dev

Id: ajoQnV--PhA

Length: 86min 59sec (5219 seconds)

Published: Fri Sep 08 2017