C# Monogame RPG Made Easy Tutorial 6 - Image Effects Video Lecture | Monogame Tutorial: Design your own Game - Game Development

oh don't babe what's up everybody and
welcome to your sixth I believe RPG
tutorial into toriel we're going to be
learning about the image effect class
now in the last tutorial I know was
really long I don't know if you guys
will like longer tutorials but instead
of splitting it into two different parts
and releasing each part one day at a
time I decided to just upload it as one
long video for you guys so I don't know
if you guys prefer me to split the
videos into two parts or two shorter
parts or if you guys prefer longer
videos I don't know
please give me your feedback your
feedback is very important and if you
give me your feedback I'll be able to
modify the video is based on how you
like it so if you guys like it shorter I
can cut it up into two parts no problem
if you guys like it longer then just let
me know so to start off this tutorial we
are going to making an image effect
class and this class is going to be used
to add effects to images so whether
we're doing fade effects zoom effects a
spreadsheet offence which is like
cropping out different things and doing
animations then we can so if you guys
have ever watched my platformer tutorial
series it's just like the animation
class and all that stuff but with
different effects it's kinda it's kind
of a bit different so we're going to do
is we're going to make an image and
we're just going to make our constructor
so we're going to have three methods I
don't know if you can guess these three
methods but let's see if you guess it so
first and foremost is they have to be
virtual so we got our low content
and our load content is gonna take a
reference to an image instance and what
we're going to do is we're going to say
this image is equal to image so secondly
second web we have a little content we
most likely have a unload content so you
guys probably guess that if you guys
guess that your crack congratulations
you get a cookie turn for most oh you
have an update and you probably guess
that because we included the XNA
framework so voila we've got three
virtual methods and that's it so this
image effect class is gonna be the base
class for every other image effect so
now that we're done with that what we're
gonna do is we're going to create a
dictionary and it's going to take a
string and an image effect and we're
going to call this an effect list and
we're also going to be taking a string
and we're going to call it effects so uh
what we need to do now is we're going to
make three methods to public methods and
one private so the private method is
going to be called set effect it's going
to be a generic method and we're going
to take a reference to a tee object the
other two are going to be public void
it's gonna be activate effect
and we're going to take a string run
effect and last but not least we're
going to have a deactivate effect and I
print this lower case and this is going
to take in a string as well so now that
we've gotten that done let's get stirred
with these set effects so if the effect
is equal to no then we want to set a
value to it
so we're going to use what is called the
activator we're going to create an
instance of the type of T and voila
so if our set effect is say a fade
effect then our effect is going to be
equal to a new instance of the fade
effect class simple enough so what we're
going to do in here is we're gonna say
else we're going to say effect as image
effect is active uh sorry
oh no we don't even have an is active um
will say effect will save our object
equals this and we'll say the effect as
image effect download content and we'll
pass in the object
okay now last but not least you gotta
add this to our effect list and we'll
add it by first and foremost we're going
to get the effect get type two string
and we're going to remove add the
namespace from it so YouTube RPG or
whatever your namespace is
so get your namespace put a period after
it and we're going to be removing that
from the string or we'll just put
replace so we're going to place it with
nothing and that our value is going to
be our effect but we can't just do it
like that let's say effect as image
event so voila
that should work so the reason why we're
going to we're doing image as image
effect as you'll see while we're going
to do this in a moment
so probably later on in this tutorial so
now I've gotten that set what we want to
quickly do is oh we only have an effect
yet but what we're gonna do is what
we're gonna do is we're gonna why'd you
say that twice anyways so we're gonna
get our effects stored in our XML file
and the effects that we store we're
gonna have to we're gonna create new
instances of it so this is how we're
gonna go about it so one thing that I
think that I forgot quickly is we should
have a we should have a is active
and by default we will set it inside is
active equal to false so our and here
we'll just say effect effect as image
effect got is active equal to true so
what we're going to do now in our in our
activate effect we're going to say that
if effect list our dot contains if it
contains the key effect then what we're
going to do is we're going to say our
effect lists our effect is active equal
so true effect list keep that low
content and we're going to have to
reference an object will save our obj to
go to this and will reference this
object simple enough
so now deactivate what do you think is
going to happen so we're going to check
to see if it contains a key effect
effect lists effect is active is equals
false and we're going to make a call to
effect list
unload content simple enough so all
we've got our set effect activate effect
and deactivate effect done so the rest
of the tutorials really not going to
make sense unless we actually make an
actual effect happen so we're going to
do is we're going to create a fade
effect
and in this fate of thread class we're
going to derive from we're going to in
here it from the image effect class so
we have the word headings from the image
effect but sorry
so in handing from here so we're gonna
have to override our three methods so we
override with these methods and we're
gonna have a few messes of our own so
we're gonna have a public float fade
speed and we're gonna have a public pool
increase so by default we're gonna set
increase equal to false or actually I'll
add this to the constructor just in case
we change it in our XML file so fade
effect fade speed is going to be equal
to um let's say 100 increase is going to
be equal to false so or maybe should be
equal to one okay so what we're going to
do now is in our update we're going to
say that if image dot and I probably
should have named it something different
what we're going to do is just go to
image effect I'm going to name it to a
lower case image okay so I'm going to
save image dot ah image
hmm oh sorry that's why it's not working
oh sorry so this should be a protected
variable so so it can be transferred
across so we'll say image dot I'm gonna
have to close and open it again for
intelligence to work I hate when this
happens
so image dot is is active oh we only
have an exact if things or image we
should set that just quickly just add
that in here public pool is active so
we're going to say that if the image is
active then we're going to do our fading
and stuff so if not increase then we're
going to say uh image dot alpha I
subtract equals fade speed times float
game time lapse game time total seconds
else image that alpha plus equals fade
speed times float
game time elapsed time total seconds so
we're going to say that if every star
alpha is are less than 0.05 then we're
going to set increase equal to true and
we're just going to reset it equal to
zero and we're going to say else if
image alpha is greater than 1.0
sorry then increase is going to be set
to false image that alpha is going to be
set to 1.0 and let me check how much
time I have okay so we have some time so
uh this is just going to handle our
fading for us and we're going to say
else we're just gonna set our alpha back
to regular 1.0 so this is gonna allow
fading in and out for us and should be
pretty straightforward so if the kind of
companies you just look at the code it
is not really hard to understand that
content so now that we've gotten that
done what we're going to do is we're
going to go to our image class and we're
going to make a we're going to make a
public fade effect and fade effect
instance now remember that our fade
effect inherits from the image effect
class but we still have our own custom
variables and let's say that we want to
modify the variables in our XML file or
we just want to modify it outside of it
how are we going to be able to do that
we're not going to be able to modify
them because uh in our list if we look
at our feckless our effect list is a
list of image effects are emergent
doesn't contain a fade speed it doesn't
contain an increase variable so if we
wanted to modify them we're not able to
modify them we can't modify them so this
is a key for what is going to be going
on here what we um if we wanted to
modify them by using our effect list
what we'd have to do is we'd have to
make a new variable called fade effect
it says our fade affected our make a new
variable call fade effect sorry ah cast
it to our frec list and we'll take our
freight effect from here
then we'd have to modify it say like F D
dots whatever dot increase equals true
and then we'd have to say FD R we have
to say a feckless certain my voice is
cracked a fat list of a defect is equal
to a image effect F D so we have to go
to all that in order to modify that one
variable now what if we could just do
this what if we can just call the
instance what if we could just call this
fade effect instance and then when we
modify whatever in here we modify that
fade effect instance it will modify it
for our effect list as well that's
essentially what we wanted to do we want
to modify it so that's why and our set
effect we take a reference to it
so whatever we make a modification to
this it's going to modify our if our
variable in our feckless as well and
that's exactly what we want so let's see
how to go into work
so in our load content our first and
foremost we have to uh we have to make a
call to set a fat is of type they affect
and we're going to pass in our feed
effect variable in there simple enough
so we are getting an error right here it
gave me one second check this out oh
that's why sorry we have to put a
reference so what this is what's going
to happen is we haven't set any value
for our fade effect so what's going to
go in here it's going to say effects
equals to null is going to make an
effect equal to a new fade effect
instance it's going to add that to our
dictionary and voila so whenever we make
a change to this since it is a ref
of it then whatever we make a change to
this feed effect it's going to change
our instance within our effect list so
that's why we've made a public so now
that we've gotten that set what we're
going to do is we're going to loop
through our e look through our facts and
what we want to do is sorry first we
want to say a few facts not equals
string.empty
and because we're going to do that sorry
we just got to go right here put effects
right there
so if effects on equals string.empty
then what we're going to do is we're
going to make a string we'll call it
split and we're going to split it based
on a colon so we're going to loop
through each one so item in splits and
we're going to say activate effect we're
going to activate our item
so um I'm not sure what's going on here
effects dot o to be capital sorry
so that and what we're gonna also wait
actually that's all we have to do for
this so we can get rid of this oh gosh
okay so we've gotten that set so what
we're going to do is in our update
function we're going to make a for each
we're going to make a var affect and
effect list and we're going to say
effect value dot update okay and yeah so
it's going to update it for unload
content if we unload the image that we
want to unload the effect so we'll do a
for each var effect and affectless
effect value dot unload content so not
last not least we're gonna actually try
and test this out in action so we're
going to do quickly is we're going to go
to our splash screen XML and what we're
going to do is we're gonna in our image
we're going to add our effects so we're
going to add in a fade effect so simple
enough so uh dot that should activate
our fade effect and we should have fade
effect on our images like so so let's
test this out to see this actually works
I feel like I'm missing a step
I'm not really entirely sure uh but
let's see or should be equals
I honestly feel like I'm missing an
effect let's see if this works so this
is object not set to a an instance of an
object so let's see okay so this is my
bad
I just realized right now uh what we
need to do is in here is say effect list
you go into your dictionary that was
easy
so hopefully that's the only error we
get okay so zoomed in like me out of
before but it is not fading and the
reason wait it should be fading so give
me one second to see why it's not okay
so the problem is that uh do we with
this we have two problems first and
foremost are the image is active is not
true and so it's not going to update and
right here we only want to call the
update function value we're going to say
if effect value is active right we only
want to activate effective it's active
it's not active we don't want to
activate it and right here instead of
calling unload content we can just call
deactivate effect yeah so that'll make
life easier you can get rid of this
and we put in key okay so now that we've
know we know what the problem is we all
have to do just go to the splash screen
Adhan is active set it to true get rid
of this and let's run this hopefully it
should fade in and out so as you can see
it's fading in and out so we've gotten
our fade effect set up and and yeah so
if you guys want to see when it's not
zoomed in remove the scale let's run
this and you can see fitting it out and
to show you something quickly so our
freight speed is kind of fast or
whatever so let's say you want to slow
it down or see didn't want the default
speed fade speed sorry so it do is go to
splash screen we can just make a call to
image fade effect dot fade speed and we
can put it like 0.5 and that will modify
it correctly because remember we made a
reference to it so as you can see it's
fading in and out much slower we can
also modify it within the XML file just
to show you uh so we'll put fade speed
and we'll put a fate Oh should be fade
effect sorry
fade effect
fade speed and we can put 0.5 and let me
just remove this from the splash screen
dot CS so she'll move this and you can
see we should get the same effect so as
you can see zooming in and out much
slower
so anyways down is a first tutorial I
hope you really enjoyed this I hope it
wasn't too long for you thanks watching
don't forget to comment subscribe and
bye for now