C# Monogame RPG Made Easy Tutorial 9 - Menus Video Lecture | Monogame Tutorial: Design your own Game - Game Development

come on babe so what's up everybody and
welcome to your next mano game RPG
tutorial I know this tutorial to forever
come out and I promised the last Friday
but some unexpected stuff came up and I
truly never had any time I'm extremely
sorry but here goes
so in this tutorial we're going to be
learning we're going to be creating a
menu now the code is pretty basic but it
may spend two tutorials just because I
just want to explain everything as
in-depth as possible but yeah let's get
started so what we're going to do is
we're going to create a title screen and
we're going to create three more classes
so we're going to have a menu manager
class I'm going to have a menu class and
last but not least we're going to have a
menu item class so we have our four new
classes we'll make them all public and
with public and public so in this in
this menu item class which once you have
three public variables we're going to
have a link type I'm a link ID and last
but not least we have an image
and that's that's it for the image for
many of them class we don't need do
anything else die is basically it's an
easy class um we'll just close this down
we don't need it right now so for the
title screen class we'll have our game
screen in there and we'll override our
methods okay so we got to override our
four main method so load content unload
content update and last but not least we
need the drop
okay so we've gotten all these three
things done and we're going to leave
that for now so we're going to do now is
we're going to make a public string
called axis will also make another
string called
effects or we're going to be using the
XML serialization
and so we're going to use XML ignore if
I can type so we have XML or ignore and
let's see if I type this properly not
shows going on within right now you know
what we Excel open it back up just stop
that oh that's why I was wondering
what's going on XML serialization we're
going to put XML ignore I mean XML
element sorry gonna put item and we're
going to create a public list of menu
items and we'll call them items
okay so simple enough so we're going to
have a low content unload content
update and truck oh man it's like 7:00
a.m. and I haven't slept yet
so I can't really type right now okay
so we've gotten that stuff included so
gotta include the framework and the
graphics okay so we've gotten this stuff
set up so now new content I'm going to
be adding in is the event system so
we're going to put an event handler and
we're going to say on our menu change
and what we're going to do is we're
going to have eat a item number grab a
string ID so what we're going to do is
we're going to make a property called ID
and the get is gonna return the ID and
for these sets the set is going to set
ID equal to the value but what we're
also going to add on menu change arm
plus no sorry arm is equal to new event
handler this no but did I do that wrong
yeah I think I did yeah I did do wrong
oh let's see non suicide okay so just
put this no not where I suppose put the
new event handler yet on so sorry for
that arm I will close this off so for
those of you who haven't used events or
or anything basically um an event
handler is like it's like I said it is a
delicate and I'll basically once you
trigger the event you can do certain
things when I read trigger event so
basically ah - as the that's not an
in-depth description of it and you can
really find an easy
description of it on the on the internet
if you search on google it's a pretty
simple a pretty simple topic and you
should be able to grasp it pretty easily
so basically what's going to happen is
that when we uh when we set up a value
for our ID we're going to be calling
this event call on menu change and when
we call it then it's going to do all the
list of things that we say we want to do
call all the methods and stuff that we
wanted to do all all the methods that we
actually want to call sorry uh so we'll
leave that there for now so what we're
going to do is we're going to create a
constructor and in here whoops ID to
string empty and we will set item number
equal to zero
we'll set effects equal to string empty
and we'll set the default access equal
to Y now we're also going to want to add
in one more private method and we'll
call it aligned menu items and it does
exactly what it states we want to align
menu eyeline our menu item so you want
it to be kind of centralized so uh we'll
we'll kind of leave that there for now
because I kind of want to focus on the
event handler concept for those of you
guys who don't understand it
so what we have to do is put our menu
class go to the top we'll just take this
set of retyping in and well a load
content
which is going to take a string and
we'll say menu paths have unload content
update and we have drawn
okay so we have never standard four
methods we have all that setup okay so
what we want to do is we want to
actually create a constructor and in
here we are going to a pair we're going
to create an instance of menu and we're
going to say menu equals new menu menu
dots um on menu change plus equals click
tab twice so once you click tab twice
this is going to generate it's going to
generate this for you and we're going to
set what's going to happen once we are
once we do on menu so when we actually
change the menu item uh so so let me
just kind of walk you through this just
quickly so what's going to have what
we've done in the menu class you've
created an event handler what the event
handler does is that it lets us know
once we actually set a value for ID it's
going to call this event when a ecology
of um in our menu manager we've set that
we've added that we've added this method
to our event so it's just like a
delegate so we've added this to the
event so every single time that we are
sorry every single time that we change a
menu item or something we call on menu
change everything that's added to our
menu change is going to do that so what
we want to do now is that when they
change the ID of the menu we actually
want to change the menu itself
so what we're going to do just create a
XML Manager instance and what we're
going to do is we're going to say menu
downloads will unload the current menu
and then we'll say my name is equal to X
my managers that load the menu ID look
at that new ID will call menu download
content and they'll be it
so what we can do later on which we're
not going to be doing this tutorial is
we can add a transition effect right so
after we unload the content or something
you're not transitioning whatever output
transition just as a reminder to myself
okay so now that we've gotten that set
up uh we can go to our load content so
this one's gonna be simple we're just
gonna say that if our menu path not
equals to string empty then we're going
to set the menus ID equal to the menu
path all we all we need to put in there
and for right here we'll just call menu
download content menu dots update and
last but not least menu dot draw okay so
we've gotten that set up so now it's
time for the the more exciting part
actually getting the menu and stuff set
up
so let's by doing the D load content
okay so what we're going to do is we're
going to make a string and array of
strings and we're going to call it split
and let's say effects split and we're
going to split them by a colon so we're
going to do is use the for each of menu
items and items
and we're going to make a call to item
image download content now before I
forget right here and say I am Z goes to
new menu item okay so we're going to
load the content so now we're going to
make another for each in here which is
of strength and we're going to loop
through the split and we're going to say
item dot image dot activate effect put
an S in there and then we'll make a call
to align menu item so what so what is
going on here is that we said um what
we're going to do is in our menu we're
going to set a universe Universal
effects for each of our menu items so if
we want to add a fade effect a zoom
effect shatter effect whatever effect
you want to put in it will be like that
for every single menu item so be
universal so what we want to do is in
our XML file which I'll bring up here
because I already made it and sort of
previous product project so I'll just
get rid of this right now
DISA find relevant twist right now uh so
what I've done is that we set a
universal fade effect in here so instead
of having to put one in each menu item
we just specify fade effect up there and
then it will apply that fade effect each
one of our menu items and that's exactly
what we want to happen so um so that's
essentially what this is doing right
here
so now we actually want to align our
menu item so some are going to go about
it so we're going to make add vector to
call dimensions and we're going to set
it to vector to zero and we're going to
loop through each item
and we're going to say dimensions plus
equals new vector2 dimensions I mean
sorry item dot image source red dot with
and then we'll say item dot image source
right that height so we're just going to
add the total width in the total height
of every single one of our menu items um
so now what we're going to want to do is
we're going to want to figure out the
starting position and so on and so forth
so what we're going to do is we're just
going to we're going to say dimensions
is equal to new vector2 and we'll say
screen managers our instance dimensions
dot X subtract dimensions X divided by
two and we're going to do this again
screen manager is our instance our
dimensions dot y subtract dimensions dot
Y divided by two so what this
essentially is doing is that it's going
to figure out what we need to blur you
need to start drawing in order to Center
eyes our text but now we don't know for
uh this is we don't know if we're in the
x axis or the y axis right we have to
specify how we're going to send tries
everything just how we're going to do it
so we're going to loop through each one
again menu item item in items and we're
going to say if axis is equal to X then
what we're going to do is we're going to
say item dot image dot position is equal
to new vector2
dimensions X and we'll put a screen
manager got instance our dimensions dot
y subtract item dot image source rect
dot height divided by two so it's the
same thing that I did up here is just
going to Center eyes it uh it's going to
Center eyes our image based on the
y-axis if our axis is X right so we want
to balance it out so the image is
aligned it's going to be Center eyes and
what we want to do here is we're going
to say else if axis is equal to Y then
we're going to say item dot image up
position equal to new vector2
and we're going to switch it around so
we're going to say screen manager
instance dimensions are Y subtract item
dot image outsource rect dot ah with
this should be X sorry dot width divided
by two and we're going to put dimensions
y
now one thing make sure that you have
the brackets in the right place right
because we need to do this for bed mass
or Bend s or PEMDAS whatever you call it
we need to have the brackets in the
right place if you don't you're going to
have a messed up alignment so um that's
how we got to do so one last thing we
got to do is just take this right here
copy this paste this right there voila
so that's going to line our menu items
or it should align our menu items
correctly so we're going to do is in our
unload content
we are going to say item got image
download content we are going to do the
same thing for update but we've got to
do some stuff first we're going to say
that if the axis is equal to X then we
do something else if axis is equal to Y
we do something else so you might be
asking me what is this thing that we
have to do ah we have to actually take
in some keyboard input so we're going to
save implementor instance key pressed
and we want to go up here add in the
input and say keys so if they press the
right arrow here whatever key you want
to use then I'm going to say item number
plus equals 1 or plus plus else else err
sorry
and put instance key pressed keys left
then item number minus minus and we can
just copy this right here paste this top
right here and when they press down it
goes up and when they press up so on and
so forth okay and we're going to do
we're going to save item number less
than 0
item number equals 0 else if item number
is greater than items counts minus 1
item number is equal to item count minus
1 so now what we can do is we're going
to make a for loop not a for each a
regular for loop it's going to loop
through the amount of items that we have
and we're going to say that if I is
equal to item number then we're going to
say items I dot image
that is actives equally true else is
active is equal to false then I'm going
to make a call to update so this should
be pretty straightforward to you not
much I got a release plane if you're on
that menu item then it's going to
activate it
and we're just going to be active you're
not on it then the menu item is not
going to be active if it's active it's
going to activate all the effects and
stuff like the fade effects and or the
zoom effects all that's the good stuff
and if not then it's just going to stay
the way it is so last but not least
we've got to put a for each menu item
item in items item dot dot image draw
okay so that is set up so what we want
to do is go to a splash screen now and
change this to title screen and we've
got our title screen setup so now what
we're going to do is we're going to make
a menu manager instance and make a
constructor we'll make a new instance of
menu add manager will say menu manager
load content and the directory from -
load slash menu slash title menu that
XML and then I'm going to say menu
manager download content menu manager to
update
and last but not least many energy drop
so that if wallah so let's see this
actually works we did a lot so you may
get some errors so we press this OH
and it worked so it will transition to
the title screen we press down and then
we can scroll you can scroll up and down
and when we are on a item a menu item it
fades in and fades out because we only
added the fade effect to it if you want
to add in different effects to it it's
really up to you but we haven't really
added any effects besides the fade
effect I believe so yeah so that's a
first tutorial I hope you enjoyed it
thanks for watching don't forget to
comment rate subscribe and bye for now