C# Monogame RPG Made Easy Tutorial 10 - Menu Transitioning and Linking Video Lecture | Monogame Tutorial: Design your own Game - Game Development

so what's up everybody and welcome to
your next mano game tutorial and this
tutorial we are going to be adding some
more stuff to our menu class so what
we're gonna be doing is just linking
menu items and and doing some menu
effects so it's gonna be pretty simple
maybe 10-15 minutes I'm not really sure
how long it's gonna take but I'll be
guys enjoy this so in the last tutorial
I said that we put a transition if we're
transitioning from different menus to so
on and so forth
we already have built in stuff where we
can transition from screen to screen but
we don't have any transitions from menu
to menu and what I mean by that is this
whenever we transition our screen what
it does is that it puts a black image
over the screen I don't know it gives us
a fade effect over the whole screen but
if we're going from one menu to another
menu we don't necessarily want to fade
out the whole screen we just want to
fade out the menu itself and fade back
in the brand new menu so if there's
anything else going along the screen
then it won't affect anything else on
the screen it will just affect the menu
itself so let's see how we're gonna do
this we're gonna make a boolean call is
transitioning and we're gonna make a
void called transition
it's gonna take the game time and like
so so we're gonna do in the update
method is we're going to say if input
manager instant key pressed and they
press the Enter key now uh or any key
you want just enter spacebar or whatever
then you do something so I just got to
include the input someone simply press
the Enter key or we can put a bunch of
different keys and not is transitioning
so it's transitioning is false then what
we're gonna do is we're going to say it
transitioning equals to true and the
method that we're going to be using the
transition for many the menus gonna be
vastly similar to the way we do with the
screens so now we never I never
explained what let me open up menu item
so we created a link type in a link ID
and I never explained what their purpose
was the link type is gonna tell us if
our menu our menu item is linked to a
screen or first link to another menu and
the ID is gonna tell us the idea of what
is linked to so for example if the link
type was at the screen and my link ID
said to splash screen or wherever if I
could enter on that screen if I could
enter on that item then what's gonna
happen is it's going to fade out to the
splash screen but if the length type of
say menu and my link ID is that I know
the XML file to another menu then it's
gonna display the new menu and we're
gonna see both of them in action in this
tutorial so we're gonna do is we're
gonna go back to our menu manager class
and we're gonna say that if menu dot
items menu dot item number now we don't
we don't have anything to reference item
number so we want to do is go to the
menu class and we want to just make a
property
cause I remember have a get accessor
return ID number so simple enough so
we're gonna say item number image no
actually not image at the link type is
set to screen then we'll do something if
it's not we'll do something else now mo
a majority of the time for nevermind we
would sleep with that uh so if it set
the screen then we'll say screen manager
dot instance dots change screens and the
screen name will be menu items menu down
item number link ID now I'm not sure if
you can see that but it is the exact
same thing as I have up here but instead
of using link type I put link ID and I
just put enter in here just let you see
for a quick moment and I'll put it back
up okay so once if it is screen type
that's all that's happening so you know
what we'll take out it's transitioning
right here so I'm going to have an else
put it's transitioning in there and uh
we're going to have to start the menu
transition so we want to do is we want
to go to the menu class we want to make
a public void call the transition and
we're gonna take a float and an alpha
value and we're gonna be doing three
things in here so we're going to use a
for each statement
and we're gonna say item dot image dot
is active equal to true item dot image
dot alpha is equal to the Alpha here if
alpha is equal to 1 we're gonna set
increase or would save 0 but set to 0
then we're going to set item dot image
dot fade effect I'll increase equal to
true else we're gonna set it to false
and that's basically it for the
transition so you're gonna see the
reason why I had this in a moment but
it's gonna be kind of tough to explain
it without actually have anything to
show for it so we're gonna say menu dot
transition and the Alpha value where now
I'm gonna set it to 1 so what I'm gonna
explain to you what I'm doing just not
so what's happening is that when we fade
out the menu we wanna set all the menu
items alpha value to 1 so they're fully
visible and all we want to do is that
fade them on at the same time and then
fade in back a new menu so what we've
done here so we said many transition e
and we said them alpha to 1 so that is
gonna set all the images alpha to 1
we're gonna set is active to true and
then based on this we're gonna set
increase default so it's gonna decrease
then we're gonna call the update method
and it's gonna fade out and then when
the fades out we're gonna transition
menus then we're gonna fade right back
in so let's go back right here so we
call issue and we say if transition is
true and then we call transition in
there um sorry in here we'll say if it's
transitioning then we're gonna do a
bunch of stuff so we're gonna say
but a loop to the items the count and
what we want to do is we want to check
if if it's fully faded out and if it's
fully fitted out then we're going to
we're gonna change menu items and so on
and so forth so what we're gonna do now
is we're going to say that if we're
gonna say we want to get the first and
last we're gonna say the menu item will
save course we'll say alpha we'll say
float first is equaled to item or yeah
I'll just do this right here menu it's
equal to menu dot items 0 dot M H dot
alpha and we're gonna have a second one
it's gonna be equal to menu items dot
menu items count -1 dot alpha a dot
image dot alpha
hope you guys can see that um so this is
gonna give us the first item in our menu
and so gonna give us some last one this
would be last it's gonna give us a first
to last and what we want to do is we're
gonna say uh or we probably gonna want
to have to do we're probably gonna want
to do it here sorry
put right back in there but first we're
gonna make a call to menu items I
that image that update so we're gonna
update it and then we're gonna get the
first and last values so we're gonna say
if first is equal to zero and last is
equal to zero then that's what we
actually want to transition from one
screen to the other screen so how we
gonna go about that well it's a simple
thing that we have to do so we just have
to change the menus IDs we're just gonna
say menu ID is going to be equal to menu
items menu item number dot link ID
that's that's it
then we want to say else if first is
equal to one point zero F and last is
equal to one point zero F it's
transitioning equals to false so what is
going on here so what's gonna happen I
don't want to miss anything but what's
gonna happen is this so if you click
enter it's gonna say it's a screen link
type or is it a menu link type if it is
a menu link type who's gonna say it's
transitioning to true oh that's the
thing I forgot sorry so we got to add in
two more things first we got to say menu
dot on menu change plus equals and have
the same thing that we have up here she
had to have that there and we have to
say menu dot transition but this time
we're gonna set it to zero and when it's
playing all this in this moment okay
so let's go through everything where we
have our menu whatever we click enter a
menu item right so say the menu item is
it's a menu type we say it's
transitioning to true and we're gonna
set the transition to one right we're
gonna call my new transition and we're
gonna pass the value 1 and the
parameters which means it's gonna set
all the value of all the menu items is
gonna set the default output to 1 so
what's gonna happen is first of all we
got to put our transition method in here
and right here we're gonna say if not is
transitioning so we're gonna have our
transition method in here so what's
gonna happen it's gonna go to transition
now let's go up to transition since is
transitioning is equal to true it's
going to execute this so what's gonna
happen is when we call our image our
update since we had the fade effect set
to it it's going to fade out and until
it reaches zero so once we reach zero
once both of them the first and last
values are zero we're gonna make a call
to menu ID now whenever we make a change
the menu ID folks this method right here
so that's gonna change the menu item now
now that we have a brand new menu we
have to we set the value for it right
because this is a brand new menu class
on menu change hasn't been set and then
since this is a new menu as well the
menu items that we had before they don't
have the same alpha value so we have to
do is just reset them all to an alpha
value of zero then this is gonna
continue until it reaches here and we're
gonna say it's transitioning to false
now one thing that we one thing that we
need to do is this is gonna work right
now because all we have applied to is a
fade effect and that's fine but the
problem is what if we don't have any
effect set to our menu items or say we
have a zoom effect and a fade effect and
so on and so forth it's gonna do all
that for our menu items when in reality
all we want to do is we just want our
menu to fade out that's all we wanted to
do so we're gonna be adding in
functionality so it just fades out and
it doesn't do all the other effects but
before we do that we just want to test
this out just to see if it is working
correctly so what I've done is yeah what
I've done is that I have a title menu
right here we have our same title my
name for before and what we're gonna be
doing is we're gonna say link type menu
and we're gonna be adding a link ID
and we're gonna say load menus testimony
dot XML so we're gonna create a brand
new ads or just copy the title menu
paste in here
rename it to test menu open it up and
I'm just gonna say that once we click at
the top menu item in here it's gonna
bring us right back to the title menu so
go back and forth so just to show the
obvious change I'll just put bla fun
coding made easy and I'll put my
birthday whatever so um yeah that's all
I'm gonna do so now if we run this
program hopefully it works so click
enter we have our menu like so so now
let's click enter on the first one it's
gonna fade out and fade back in the new
menu so everything works fine click that
again it goes back to the first menu so
that is all fine and dandy but now let
us um let us try something else so let's
go back I'm gonna go to my test menu and
I'm gonna remove the effects I'm gonna
remove the fade effect let me run this
so I'm gonna click this gonna fade out
and not sure what oh yeah I didn't fade
back in sorry because we don't have the
fade effect enabled right the it's not
gonna work because we don't have the
fade effect enabled and we need to have
the fade effect enabled for the effect
to actually work so how are we gonna how
we gonna do this or well there's a
number of ways we can go about this but
this is a simple way we can go about it
so let me just stop debugging this
so this is how we're gonna go about it
might not be the most effective way but
simple way to get things done so what
we're going to do is we're going to go
to the image class and inside this class
we're going to say we're gonna make I'm
going to method so we'll say store and
deactivate um maybe that's not a great
variable name but or whatever I'd say
story effects and I'll say restore
effects okay so what we're gonna do now
is we're gonna say we're going to loop
through each one of our menu I mean our
each or one of our effects so we'll say
var affect and effect list and we're
gonna say that if if effect list no if
you effect dot give value dot is active
so if it's active is equal to true then
we're gonna store that in our in our
string called effects so before even
start that we're gonna just set effects
equal to string dot MD
okay so we're just gonna say effects
plus equals and we'll put we'll put the
effect we'll put the value and we will
add in the colons and starts : and what
that's gonna do because and what we
gotta do last but not least I'm going to
say effects dot remove and we'll just
remove the last index so we'll say
effects dot count or that length
subtract one so now we'll just remove
the last : so what we're what we're
basically doing here is that we're gonna
store all the effects that we've set for
the class
we wanna store that in the effect string
and then we're going to be adding a fade
effect and then we're gonna be wish'd
after we're done
zooming in and zooming out and all that
stuff we're gonna restore the effects
what they were before so what we'll do
yeah so we can just do that so we'll
just do for each bar or the job which
means a for each of our effect in effect
list
we'll say that if you affect or will
just make all the deactivate effect
simple enough so we're just going to
loop through those those and deactivate
the effect and then what we'll do is we
will use our effects that are stored in
here and I will restore them
so we'll do is we're just gonna say
string split equals effects on split and
we'll split it by the colon and I'm
gonna do for each that will loop through
each one of them so we'll say string s
and split and we're gonna call the
activate effect and we'll put X so
that's what's gonna do is we're gonna be
able to store our effects and we're
gonna be restoring our effects so this
is what we're gonna place them so when
we say once we'd like to enter something
we're gonna say menu dot store effects
not sure why that's not working unless
we didn't make it public or did I make
it in wrong class I have a two projects
open way maybe I made in the wrong
project
oh man I'm an idiot it's in my image
class I forgot it's like six 14 in the
morning sorry um so I have my store
effect and my restore effect so we have
to do I probably should have done this
but you know what I just do for each
menu item in items and menu items and
we'll just make a call to item dot store
item dot image store effects and we
don't even need these right here oh yeah
so we're just gonna store the effects
and what we're gonna do is we're gonna
say item dot image dot activate effect
and we're gonna do just actually the
fade effect so we just want the fade
effect to activate it and that's the
only effect that we want and all our
effects that we previously had on it
they're gonna be stored in it like so so
we're gonna have that set up and once
everything is done once you've done all
the transitioning and everything and we
said it's transitioning equal to false
then when I make a call we're gonna do
just a for each statement menu item item
and menu items
and we'll say item dot image dot restore
effects so let's see if this works I
have a feeling it's not gonna work I'm
feeling like I did something wrong but
first of all before we do this let's
just go to our test menu and okay so
let's remove this fade effect right here
just remove that stop running it run it
again so let's see if it's still fades
already no we don't have that in there
so we click that fit to a new screen
okay so it's not fading to the brand new
screen
okay so we're having having a problem so
let's see something well it's basically
saying that there's nothing there's
nothing in effects right so there's
nothing to remove so I'm just gonna say
if effects not equal string.empty right
let's try running this again
so it's there's not the effect but it's
not really loading the new menu item so
we got to see exactly what's going on
and I think I think I know exactly
what's going on so once we load our new
menu we have to let it we have to store
the effects and stuff inside that new
menu so we don't really need to do it in
here we don't really need a store oh we
don't really need to store the effects
in there we needed in store the effects
in our actual new menu I just give me a
sec to plug in my charger so what we
have to do is where do I put this code
so instead of storing the effect and
storing the effects here what we have to
do is you know what I'll just copy this
and we'll paste it right here so we can
still have it here right but storing the
effects has no relevance to us because
it's gonna be removed anyways all we
really want to do is I yeah actually we
will still have store in there so remove
every other effect so remove the other
effect will have what activate or fade
effect it will do everything correctly
then when we set our new menu we are
going to store all the effects and
activate the fade effect so it can fade
in so let's try this one more time see
if it work hopefully it works as time
fades out fades back in click enter and
voila so it loads the next one and as
you can see there's no animation code in
this there's no effect we didn't add any
effect to it but it still does the fade
effect because we specified for it to do
that um but as you can see when we go
back to the new game screen it's still
not doing the fade effect like it's
supposed to be doing so let's check that
out to see exactly what's going on so
the problem is when I'm pretty sure
actually let's check this up
okay so switch to the image class and
I've done something really retarded so
that's exactly what's not working I know
exactly why it's not what I'm storing
the effects I'm storing the value rather
than the key
I should be storing the key because
that's how we access everything so now
that I've gotten that said let's see if
this works so it's working we press it
fades out we shouldn't see any effect
here fit back in we should see a fade
effect and voila
the effect works again so that's how we
transition from many to menu and just to
quickly show you if I was to change this
to a screen let's say title menu and
let's just change the screen and I'll
change the splash screen if I run this
when I press new game it should go back
to the splash screen and voila we got
this black screen so all you can do that
to transition between screens or between
different menus so that's a first
tutorial sorry it was so long I promise
not to make it this long in the future
but thanks for watching hope you enjoyed
it and don't forget to comment rate and
subscribe and bye for now
you