Game Maker Studio: Inventory with Mouse Control Video Lecture | Game Maker Tutorial: Build Games from Scratch - Game Development

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