C# Monogame RPG Made Easy Tutorial 7 - Screen Transitions Video Lecture | Monogame Tutorial: Design your own Game - Game Development

cut up baby what's up everybody and
welcome to next mono game RPG tutorial
and the tutorial we're going to be
adding the fade effect to our screen so
we can transition from one screen to the
other I am sorry if I sound exhausted
I'm really dead and I'm sorry for my
common mistakes in this tutorial I am
very exhausted I am very dead right now
but I've decided to really try my best
to win this tutorial for you guys
because I wasn't able to make a tutorial
yesterday I wasn't able to post a tour
yesterday so I tried to make one today
for you guys so anyways let us get
started so what we're going to do is
we're going to be in the screen manager
class and we want to do is have a void
function called a public void called
change screens um or whatever and we're
gonna take in that name parameter
and we're going to have a private void
function called transition and then this
method we're going to be adding in
certain methods and stuff to help us
with transitioning now I want you to add
a new screen a new game screen and you
can call whatever you want
I call the new screen to make it easier
for me and what we're going to do in
here it's a new screens equal to
activator equal to sorry game screen
activator create instance type dot get
tight and take your namespace whatever
it is dot plus screening I hope you guys
can see that so what this is gonna do is
it's gonna create a brand new instance
of whatever our screen is so if we type
in splash screen in here it's going to
create a brand new instance of splash
screen and cast it to a game screen type
if we put title screen or whatever it's
going to put that in there
now I did like a title screen I'm going
to be deleting it a dhaba for next
tutorial so anyways off we go back
towards our screen manager class ah we
so we've created a brand new screen and
there's some other stuff that we've got
to do so first and foremost so we're
going to do is we're going to create a
texture 2d or actually will make a image
and what we're going to do quickly is in
here and when we create our instance
instead of doing like so what we're
going to do is we're going to create an
XML Manager of type screen manager and
we're going to say instance is equal to
XML dot load and we're going to load
screen manager dot XML so in the XML
file we're going to load an image from
our XML file now I'm going to go to my
content section and inside my console
section I'm going to make a folder
called screen manager and what we're
going to want to do now is we're going
to want to go to paint or something like
that over my new document set it the
pixels to one by one want to zoom in and
just color it black shrink a black one
by one pixel save it as a fade image
whatever you want to save it as scroll
down so I'm just going to call it fade
image or something like that so save
that and what we're going to do is we're
going to go back to our project we're
going to add an existing item and our
frayed image is loaded so now I've
gotten that done what we want to do is
create a new XML file - called screen
manager
and inside this XML file we gotta put
our namespace or whatever is called in
here and then we're gonna have our image
and our path our path is going to be
screen manager slash fade image simple
enough so we have our image we have a
path to our image voila
and what does black damages the purposes
black image is going to serve is that
we're going to oh there's something that
I've got to do as well sorry so we're
going to set the scale to the screens
width for the oh sorry for the X it's
gonna be the screens with and for the Y
it's going to be the screens height so
what this is essentially gonna do is
that when it's gonna cover the whole
screen when the image is fully showing
right when alpha is 1 that means is the
black image is gonna be covering the
screen which means it's going to look
like it's fully fitted out and then
we're slowly gonna fit it back in by
slowly decreasing the Alpha until it
reaches zero once reaches zero that
means the image is no longer showing and
therefore it looks like it's fitted in
now I don't know if that was a good
explanation but if you want a better one
you can watch my X in a series I believe
out a video on there about fading images
and I also have one in my platformer
series so ought to continue with this so
we're going to we have our event rate
this is going to load our stuff from our
schema into XML file I'm going to load
our image properties and so on and so
forth so what we're going to do now is
in our change greens we're going to say
image is active is equal to true let's
say image dot fade effects that increase
is equal to false image effect image dot
fade effect dot alpha
or increase should be equal to true
sorry and image dot alpha should be set
to zero okay so uh what is this going to
do is gonna first of all it's not gonna
show anything on the screen we're going
to fade it in we're gonna increase the
alpha value which is in turn going to
show the black image over the screen so
it's going to learn it gets fade it out
and then it's gonna fade back in and
you'll see all this in just a moment and
we're going to make a brand new variable
called I'll make a public through XML
ignore and be color using this with the
make a call system dot XML got
serialization I'm going to say XML
ignore public wool is transitioning and
we're going to have a get and a private
set now since we're using XML
serialization in this class now we have
to put XML ignore here XML ignore here
also the XML ignore here and if you want
to load your dimensions from the text
files from the XML file then you can do
so by making this a public set but if
you don't then put exponent over there
so yeah we have a is transitioning
variable so we're going to say is
transitioning is equal to true so in our
transition method we're going to say if
is transitioning is equal to true then
we're going to call to image update
so we're going to update the image
element so we're going to say that if
image dot alpha is greater than or equal
to 1.0 F or we can say equal to then
we're going to do all our screen
transitioning stuff and our transition
method should taking a game-time
parameter so we're going to say that if
it's set to 1 then what I'm going to do
is we're going to transition all those
stuff so what's going to happen is it's
going to fade out once it fades out we
want to do is change screens right we're
going to change from one screen to
another screen and then we're going to
fade everything back in so when the
image is fully showing that's one it is
everything that's fully faded out and
when everything is fully fitted out
that's when we're going to actually
change screen so this how we're going to
do it so let me say current screen is
equal now current screen unload content
let's say current screen is equal to new
screen and we'll say XML game screen
manager type is equal to current screen
dot type
and we're going to say current screen is
equal to uh-oh
sorry why'd I do that so we're going to
say current screen is equal to XML game
screen manager download and we're going
to load the current screen dot R we're
going to load the current screens path
so we um we haven't set this up I
thought I already did but we didn't set
this up also we want to do is go to our
game screen and in here we just want to
have a public string call XML path and
in here we'll say XML path is equal to
type dot a to string dot replace our
namespace so put our name space in
quotations YouTube RPG whatever your
name space is and replace that with
nothing so that is going to get our and
we're going to say Plus dot XML so what
that's going to do is that is going to
extract our screens name so it's going
to be like a splash screen dot XML or
whatever it is
title screen XML or whatever it's going
to give us that path now all our screens
are going to be in the low folder right
so we're just going to say load Plus
that and we're going to add XML to the
file extension now not all our classes
require XML files so what we want to do
is we want to go right here and we want
to say that if uh we want to check if
the file exists so what we have to do is
we have to include using system and put
output and scroll down we're going to
say if file dot exists and we'll put in
the path of skirt current screen our XML
path so if this path exists or this file
exists then we're going to set it equal
to a new XML path otherwise we'll just
keep it the way it is then we're going
to make a call to XML
I mean current screen download content
and that's it now after this we're going
to say else if image dot alpha is equal
to 0 point 0 F then we're done we're
done chaining experience and stuff so
what we're going to do is we're going to
say image is active equals to false is
transitioning equal to false and that is
it for transition so how we're going to
implement it we're just gonna put
transition in there ah and we're going
to put our game time now in our what we
want to do is did we create this class
yet no we haven't
so we don't have to worry about this
right now uh but normally when were
transitioning screens we're not going to
want to take in gameplay input so once
we create our implemented class we're
going to prevent it that all right we're
going to make it that our current screen
can still update it can update all this
game elements but we won't be able to
take a new input but that'll be for a
later tutorial so right here what we're
going to do is we're going to say that
if is transitioning then we're going to
put a call to image draw simple enough
so what's going to happen is uh let's go
to our screen render our splash screen
sorry and we're going to say that if
sorry we should include the input class
the input name is very sorry so I'm just
going to save keyboard dot get state
that is key down keys enter and screen
manager dot instance is transitioning is
equal to false then we're going to make
a called screen manager dot instance
change screens and we're just going to
go back to the splash screen now since
we're doing it well since we're loading
the screen the way we're doing it you
have to type in the class name the same
way that it is typed out here same case
sensitivity and everything so you have
to remember that so once our what we're
going to do is we're going to click the
enter key it should fade out and fade
back in and show the exact same class
again so I'm going to walk you through
everything that's going to happen so our
splash screen is going to be loaded when
we click enter we're going to make a
call to change screens once you make a
call to change screens we're going to
end up at our screen monitor class our
new screen is going to be set to a new
instance right so since we set that were
switching to a splash screen it's going
to make our new screen and it's going to
create an instance of splash screen and
cast it to a game screen type and store
in here we're going to set our image to
active and what our image is is this
little 1x1 pixel which is going to we
set the scale to our screen width and
screen height so it's going to be the
size is going to fill the whole screen
right so what's going to happen is that
we're going to say is active equal to
true we're going to set the ink
cristobal to true and we're going to set
the out for this 0 so that image is not
being shown at all on the screen and
then we're going to set is transitioning
equal to true so one is transitioning is
true we're going to set image dot update
now since image are now we didn't we
didn't actually add in a fade effect
sorry so we're going to have to do is go
rescue entered xml wanna say effects
and we're going to put fade effects so
since we have a fade effect what's going
to happen it's when we make a call to
image I'll update it since increase is
equal to true what it's going to do is
slowly increase alpha now what's going
to happen is when we call image our
update alpha is going to be like zero
point something or whatever right so
it's going to keep on increasing until
it reaches one point zero it's not going
to call any of these because remember
it's not going to first one we call
image dot update it's going to increase
from zero point zero so it's going to
increase until it which is one point
zero we're going to unload the current
screen set it to the new screen set the
types a so on and so forth if an XML
file exists then we're going to load in
that instance of the current screen then
we're going to call load content then
what's going to happen is it's going to
set increase defaults it's going to
slowly decrease until it reaches zero
what is that images active sorry images
active defaults is transitioning equal
to false and then we're going to be
downwards transitioning screens so if
all goes according to plan this should
work correctly so let's run this program
right now so this value cannot be null
so let's see what exactly is going on so
if we look right here value cannot be
known so the type is no so yeah I want
to do is go to a screen manager and I
will say oh but I was pretty sure the
type was equal to oh what we need to do
is go to an XML manager and in our XML
manager we're going to have a
constructor and in our constructor we're
going to say type
is equal to type of tea so if we don't
set anything for type it's going to be
the type of whatever our generic class
is set to so we're going to run this
again so as you can see we remove the
filter effect ferment or and so on and
so forth so let me click enter what
should happen is that it should fade out
and fade back in so we've clicked it and
it says object is not it's instances or
whatever not set the instance of object
so let's see what's going on okay so our
problem is which I thought to do I'm
sorry for this is I go to our little
content what we want to do is call image
load content because we have a bunch
stuff in there that needs to be down
we'll set certain things let's call it
image on load content and that should be
it so let's run this one more time
hopefully it worked this time click
enter so fades out and fades back in so
as you can see a fade out fade back into
our brand-new screen so that's
essentially how the transition is going
to work so we would have fade out from
one screen to another screen I don't
have a pretty cool effect
so we'll get to see a more an action in
the following the tutorials to come so I
hope you enjoyed this tutorial I hope it
wasn't confusing to you I know I'm
really tired too I didn't really get to
explain everything as in-depth as I
could but I if you have any questions
don't prefer to ask in the comment below
comment section below I will be sure to
answer any questions that you have so
that's it so that's it for this tutorial
thanks for watching hope you enjoyed
this and bye for now
you