Game Maker Studio: Inventory with Mouse Control

alright guys welcome back so for those of you who don't follow the the updates on my my patreon account you may not be aware that last week I was at the Animax Festival at Teesside University where I gave a workshop on gaming studio it was totally awesome I'll be writing a blog post or something about that very soon but importantly that's why there was no new tutorial video last week what that was last week however as I managed to get a new article written for game maker tutorials calm on the very basics of gaming studio and also from this point onwards I'll be striving to do a new article tutorial alongside video tutorial on every week from this point onwards so hopefully look forward to a lot more written content if that's more your sort of thing alongside the regular weekly video content that I do here so with that out of the way this week's tutorial is going to be on expanding the inventory tutorial that I did a little while ago um just been a minor way so previously I set it up so we have you might remember these boxes here I've added as like what max is a bit bigger and we can like add items add items to the inventory of just by using a couple of scripts and we can remove iron through new inventories and those scripts and I showed you how to generally interact with this and like how we're storing items and so on and so forth to give you the freedom to build whatever system you had in mind for your inventory just to give kind of an example of how you might expand the system and do like create a system that like manipulating or even interfacing with this inventory words hot I'm going to set it up so that you can use the mouse to like highlight annoy and click I and drag it to it like a different slaw or something like that okay so that's what we're going to be doing today so to start us off the code is mostly the same as it was at the end of the previous inventory tutorial it should be mostly mostly exactly the same ol and I changed it so instead of P adding like a debug burn P which just adds a 9 to our inventory instead of writing say mine add one at random just so we can have like a little a nice mix of I and slap although I managed to add eight blue potions that are oh that's pretty well the odds of that are well that's pretty cool so yeah that's really the only major change and increase the max number of items in the inventory um some it's been kind of a while since I took this and I change a few things when I was like preparing stuff for this tutorial so there may be few tiny specific changes in the code here are they're like gone about but it all mostly works in the same way so hopefully if you're following along step by step the main thing is obviously of course it pay attention to the logic that I'm using and make sure you understand that and of course the code will be available for download in the description of the video so as you might remember previously we had the scripts the scripts are useful phones facing with our inventory I want to check to see if we have a specific I own a script to remove an item from the inventory and a script to add an eye into the inventory the two scripts that we have item the script item drop in script I and pickup which add or remove items from the inventory they look for the first instance of the specific item and then remove it from the inventory or the item pickup looks for the first empty slot and adds an eye into that slot where as how we want to interface with this inventory is a bit more specific so we're going to create a couple of new scripts that will allow us to use the inventory in a specific slot based manner so to add a night into a specific slot or remove an item from a specific slot which is actually you know easier the NA then the scripts we have set up to just remove the first one because we don't have to we're just dealing with a very specific slot I'm going to go ahead and right-click and say insert script I'm just going to make this first one I'm gonna make this SCR item pickup underscore slot so it's just the same name as the other one book with slot on the end so that we know that um so that we know we're dealing with a specific slot so let's start out by just writing what we want the script to actually do in like a comment so I'm just going to write a comment and write SCR underscore item pickup underscore slot and we want to pick the slot specific slot that we're checking and what item were going to add to it so it's the height and we're going to add to it and the slot those are the two things we're going to pass along into this script so argument 0 is going to be the specific item that we're going to put in that slot and argument 1 is going to be the slot that we're going to put the item into so and if you remember how our previous inventory system works you don't go back and watch that tutorial again you might and so you can understand what variables I'm using here cuz I'm just following on from the previous code is if global dot boring argument 1 so the name of the slot that we're using we're checking the array where we store all our inventory items equals minus 1 so if that slot that we've we've given the command is empty at the moment because we don't want to add we're basically just gonna have this command fail if the slot that we're trying to add the item to is full and then like you you can return an error or whatever we're going to return a 1 if it works in return and 0 if it doesn't then you can do whatever you want to with those results so okay so we're checking to see if that slot is currently empty if it is empty then we can just go ahead and add the item argument 0 to that slot so we just say global dot inventory argument 1 equals argument 0 there it is we've added that iron plus 1 and therefore it's worked so we say return 1 and if we didn't get to there that means it didn't work because that means the the slot wasn't empty so we can succeed return 0 and then you can use those 1 we'll use that 1 or 0 with the variable linked if you use a variable to to check the result of the script then you can see whether or not you've successfully successfully added the item or you failed to add the iron because it was full and then you could show message to the player or do whatever you want to in that circumstance here we're just going to kind of or if like we're not able to add into the slot so that's adding an item to a specific slot now we want one more script so I'm going to create another script SCR on the score I and drop slot so again just the same as I can drop it instead of dropping the first instance of the specific item we're just going to drop an item from a specific slot so we're going to say if first of all check that slot that we're gonna well I should say what the kid by the command is going to be a CR Tain's got item drop and score slot and then the only argument we need for this one is the slot but we're going to empty so I'm just going to say if global dot inventory argument 0 or just slot does not equal -1 which means that there's something in it right so if there's something in the slot that we're trying to empty then enter the swap global dot inventory argument 0 equals minus 1 return 1 I mean I don't know into what circumstances you want to say like oh we did manage to empty this lot it was already empty but in case you want that information we can still return but numbers as appropriate and do the check and that's that so those are the two the two scripts that we need for setting this up and now what we're going to do next is we're going to create two itens hooks two new objects even we're going to create an object called obj and it's got in button when they were created basically a button for every one of those all squares that you saw on the screen we're not gonna make a new object for each one we're going to make one object and that object is going to clone itself over all the spaces and it's going to detect whether or not it's clicked on and if it is it will interact with the inventory in some way it will be an invisible button so when the create invisible buttons for every item of the inventory and then we're going to create an object that follows the mouse around that will show what item we're currently carry in the mouth so we can click on one of these invisible buttons to move in a move an item from a particular iron slot into our mouths object and then that male subject can put that item into another slot now before we make those two new objects I'm going to set it up in the main inventory object to actually create them dynamically um we obviously need to establish them Lee in fact let's establish what they offer so I'm going to go into objects and hit create object obj underscore in the those are going to be our invisible buttons that we keep under uh the boxes of the inventory and we'll will make them highlight when you're hovering over them but otherwise they're just gonna sit there and just be invisible buttons that you can right-click on with the mouse and allow us to move items from one slot to another no sprite needed and the depth is going to be minus 1000 and the 1001 just so it's deeper than just so that it can actually show up when we want to do the highlight we can show up in front of the other stuff okay so that's that one and we need to make another object which is obj underscore mouse item that's going to be the object of follows our mouse around and it's going to show when we're carrying an item in in our mouse and so the won't lounge show up above everything else I'm going to so now I want to be - 1000 - size ones are the lowest depth okay so that's those two they don't do anything yet so let's go into the inventory engagements entry set it up so they can get me because we don't need to place them in the room we're going to make them dynamically from the inventory object itself so in here when we're setting up our inventory for the first time and we're saying up this based on the number of iron slots we have I'm also going to go ahead and create inventory buttons for every slot so I'm gonna say button I which is you know the slot that we're working on at the moment when we're setting up the inventory in the first place equals instance create um 0 0 obj underscore and the reason I'm doing this and saying up as an array is so that I can refer to all the buttons later on when I want to draw the inventory so I could move them all about a one by one based on which slot the button represents and then take that button again and set one of its variables I'm going to set slot to equal I so the button itself the the instance that we've just created knows which slot of the inventory it represents because it now has a variable to track that that's all we need to do that one and then for the mouse object we need to first of all establish a new global variables on this a global bar a mouse button and that um that variable is just going to track whatever item is being carried around by the mouse at any given time so can be -1 for nothing can be 0 for I think the sword one of the potions on set both obviously to begin with it's going to nothing so there's at most time equal minus 1 and then we just need to create a single one of this object that's just going to follow the mouse running as instance to create 0 0 and really Manor obj underscore mouse item like that and then the only other thing I'm going to do is I'm going to go into the drawer event and down here where we're working out where to draw our own draw our sprites and draw our inventory items is we can actually get rid of this line now actually draws each item because we're going to use the the infants themselves to draw the specific item on each slot so we don't need this anymore button i dot x equals on x button I got y equals AI Y so that we're taking the button for a specific slot the slot being I taking if X on my corner since then it's the same x and y-coordinates as we're drawing but borders around that DUI so I replace these buttons in the same spot that were placing the the borders and those bones are going to be responsible for drawing the the ions themselves into those borders which is why we need the depth to be further poured in the inventory okay so now those are all the changes we actually needed to make to the inventory object I mean if we run the game now I'm good to do those invisible buttons are all there and in fact the the object that's following around the mouse well it isn't following the mouse yet but that object exists and it's in the top left corner of the screen being invisible if I add P I sorry if I press P I am still adding items to the inventory by I'll press P key event but they're not showing up anymore because I'm not drawing into the screen anymore we can use the inventory buttons to do that but the array is still storing those items that our functionality is still working but we got rid of the line that draws the thing so that's everything we need to do in the inventory object now I'm going to go into our obj underscore in button and I'm gonna set the create event first of all oh no I'm not we don't we don't need to create event for this one I'm going to add the drawer event even and I think the drawer event is all we actually need for this object um the drive and actually because because the drawer event happens every frame you can kind of use it um to do similar things that you do with the stack event because it kind of works in the same way it's an event that's triggered every single frame but you can also do drawing stuff it just has a slightly different time in that frame than the step event does namely towards the very end when everything is rendered so in the drawer event for our inventory button I'm going to say far item equals global dot inventory slot so we know the slot variable was a variable that was passed to this item when it got created so that it knows what slot the button represents and I'm going to get the item that is currently in that slot and store it in a temporary variable the next one variable we need is click bar click equals mouse underscore check and just go button on the scope pressed and B so click is just going to tell us one or not the left mouse button has been pressed yet so I'm going to check to see whether or not we've just clicked on this square really um or rather I'm going to check to see if we're hovering the mouse over the square and if we're hovering the mouse over the square I can highlight it white by drawing like a white rectangle over the top of whether the little border sprite would currently be and then if we're all run over it then we can check if we're clicking as well and if we're clicking as well we can start to do stop with the actual inventory slot like I say draw I know now say sorry skipping ahead if abs Mouse ex-muslims got X minus X is less than 16 and mouse score Y minus y less than 16 so again I'm just checking the difference checking the difference here between the court the mouse Gordon the x-coordinate of the mouse and the x-coordinate of this very button the the difference between those and if they're by checking the absolute so it you know even if it's like a negative it returns positive by checking the difference between these two variables and seeing if it's less than 16 means it where 16 pixels within 16 pixels of the absolute x corner of this object and the same goes for this say well if we're within 16 pixels vertically and within 16 pixels horizontally we just using ABS and checking the difference between two variables and seeing if it's less than a certain figure it's a very simple way of checking whether or not you're within X number of pixels of something so this will tell us whether or not the mouse is currently hovering over the inventory button if it is I'm going to go ahead and say draw set color to see white and then merge through a rectangle over the top of them so rectangle we need four coordinates so X minus 16 because this is a 32 by 32 a lot quicker no draw so I'm going to do it like 16 from the center in each direction Y minus 16x plus 16 y plus 16 and it's not an outline so zero yeah and that should work by and large objects so let's see if that works first of all yes so now if we hover over each one of these slots you can see it's drawing like a little white rectangle so we can highlight each slot the inventory now it's pretty cool slow uh we're going to say if on the brackets click so if we're actually clicking on the inventory now first of all we're going to check to see whether or not there was an item in the slot after we clicked on it so I say yeah I mean it's not equal minus one so if it was an I in here in which case remove the SCR on the score I am drop on the score slot slot luckily our the variable item this temporary variable isn't going to update right away and it's only going to update at the start of this event so we still have stored in this variable the item that we just got rid of so we don't need to worry about the fact that we've just emptied this slot that's so that means we can say if Mouse item is not equal minus one so if we have an item on our Mouse which I know we haven't set up yet but we'll get for that SCR underscore height and pick up slot mouse item slot so we can add our current Mouse item to the slot and again that adds it to slot which is changing global dot inventory but that hasn't changed this variable yet and because we still have that variable we can now just say mouse I am equals item and of course if I am is minus one then it just it's going to send to be blank um and if there was an item in the slot then it puts that item in our hand so it would swap the items around if there was one and would just give us no I and left if it wasn't one in there in the first place so it all kind of works out that's everything we need to do there in terms of actually interacting with the inventory now we just need to get the items themselves actually show up on the button so I'm going to say if item it's not equal minus one draw I'm just right SPR underscore items item X Y really really simple just going to draw that sprite if we need to from SP underscore items as a sprite the stores alright internet item gives us the frame the appropriate frame the item that we need to draw an XY is just our coordinates so really simple as that so that should work in terms of interacting with the inventory and we can test that now by running it and you should see that okay so if we add some Einstein the toy pressing P I click on the blue potion here it disappears and if I click over here it reappears so we can move one item from one slot to another now I click on that sword and I click on this potion it replaces the potion with the sword and now I have the potion my hand and I can place the potion into another slot the only problem now is of course we don't have we don't know what is in our mouths at any point in time because we haven't set the mouth sight and object up to follow up follow up mess around and show us what I own is being moved from what spot to another right so that's all that we have left to do but the system fundamentally works and our interaction is there so now I'm just going to go into mouse item obj underscore now sign and for this one I'm just going to again just add the drawer event I think it's pretty much the only one we need for this drag in execute piece of code and we'll save our item equals Mouse item so we go a temporary variable to just tell us what I am we're using every frame so we're not constantly looking up this global variable okay item does not equal minus one x equals Mouse X because we don't need to bother doing all the stuff with one eye if you're carrying an eye on y equals Mouse Y and draw stride SPR I'm Scott Hines on Titan X Y simple as that okay then we can run that now you should see that if I had a big items click one we it now follows the mouse around just Mouse items being set appropriately and if my sighting has a value in it then - item is going to follow the mouse around and draw the draw the sprite in the correct place and see we can move items around the inventory now no more overlap one on the swap items with one another super simple okay so there's just really a just a kind of a really quick five tutorial on how to set up just because they could there's any number of different things you could do with this inventory system with this lights old way of just storing items and array like this and just finding new interesting ways to display and move them around and interface with them and this is just one example of how you might start to do that yeah so I hope that was useful to you guys um as I said more article based content coming soon along with new videos and I'll catch you guys next week thanks for watching guys I'll catch you

Channel: Shaun Spalding

Views: 56,150

Keywords: Game Maker (Video Game Engine), Game Development, Indie Games, Indie, Games, Tutorial, Information, Learning, Tutorial Series, Game Maker Studio, Steam, iOS, Android, HTML5, Windows, Making Games, How to make games, Basics

Id: AmTSaHqt5Xw

Length: 24min 6sec (1446 seconds)

Published: Fri Feb 20 2015