C# Monogame RPG Made Easy Tutorial 12 - SpriteSheet Effect (Animation) Video Lecture | Monogame Tutorial: Design your own Game - Game Development

caught up babe um I guess I could add in
the spreadsheet effects now yeah makes
sense so let's add that in right now so
we're going to make a new sprite we're
gonna make a nice effect I'm gonna call
it spreadsheet effect and we're gonna in
here from the image effect class and so
one say using Microsoft XNA framework
and I don't think I need anything else
we'll see if any anything else after so
say public override little content on
little content and we have our update
okay so in our update what we're going
to do is we're going to check to see if
our players active but before we even do
that before we even do that we're gonna
do something before we even forget about
it so up here at the top of our code
we're going to say public write cheat
effect and I believe at the bottom of
our load content nope yeah so yeah in
our little contrivances set effect
spreadsheet effect ref spreadsheet
so we've gotten that set up so now let's
go back to our spreadsheet effect and
we're going to add in a few variables so
we'll just say public in frame counter
and we'll say public int switch frame
and we'll have a public vector to
current frame and that'll be it for now
or actually what we could do it will say
vector to amount of frames okay
so we'll make a we'll make a constructor
and by default we'll just set the amount
of frames to three by four I believe
that's it yeah so Steve by four and
whatever sprites you're using just set
it to how many frames as so it's one two
three frames an x-coordinate one two
three four frames and the y-coordinate
so that's how we have it set up so let's
get back to our coats we'll say new
vector to be by four that's how we're
doing and for the current frame we'll
set it to now let's look at this right
now
so in our image the standing frame is
frame number 1 in the x coordinate right
and we want it to be standing by default
we don't want it to be in the walking
animation so by default we'll say the
current frame was set to 1 zero stop the
current frame and let's say the switch
frame is set to 100 and frame counter
will be set to zero and we can change it
the changing the XML file and at any
time we actually need to change it
so now you've gotten that down pat we're
going to say that if image is active
then we're going to say frame counter
plus equals
um in game time last game time
total milliseconds and then we're going
to say F frame counter is greater than
or equal to our switch frame then we're
going to set frame counter equals to
zero and we're going to want to upgrade
our current frame and we're going to say
current frame plus plus and I'm gonna
explain to you why design there's a
second and we're going to say if current
frame times the frame width now we don't
have the frame width or the frame height
so I'm going to do is we're going to
just make some some properties right now
and we're going to say public int frame
width and we're going to say get and you
know what get returned imaged actually
we got it we we're going to do it like
this just in case we're going to say
that if image texture are not equals to
null then we're going to say return the
images with image texture dot width
divided by amount of frames X else we're
just going to return zero and so that
should work
oh but amount of frames needs to be
casted to an int type and so we're going
to do that same for our frame height so
we're going to say if image texture not
equals to null then we're going to
return image
got textured height / amount of frames
why and then when we return - so um
what's is basically saying right now is
if our image of our textures not into a
novel going to return the width divided
by how many frames we have so if we look
at our image right now it seems that the
width and height and the properties it
does not
so let's look it up right in here so C++
project I'm going to see sharp projects
so if we look at our players dimensions
we look at the properties so it's 96 by
128 so the full width is 96 so if we
look if we look at our if we open up a
calculator right now and we say 96 /
amount of frames X which is 3 so 19
fixed 6 divided by 3 is equal to 32 so
in the x coordinate the width of each
individual sprite is 32 pixels and 128
divided by 4 is you guessed it 32
so each image is 32 by 32 pixels and it
depends on whichever sprites you using
it might not be the same as mine but
just giving you that example so it's
going to return our frames with and each
individual frames height so that's what
we're going to be doing so we're going
to say if current frame x x frames width
is greater than or equal to image
texture dealt with then we're going to
say current frame X is equal to zero and
then outside of this what we're going to
do is let us say that else if image is
not active then we're going to just set
it back to the default frame so we're
just going to say current frame equal to
new vector 2 1 whoa current frame X
sorry is equal to 1 and don't worry I'm
going to split all this into a second
we're going to say image source rect
equal to new rectangle and we're going
to say current frame x times frame width
and we'll say current frame dot y times
frame height and we'll say frame with
frame height okay so let me spin it
exactly oh sorry we got to tap these two
aunts cuz rectangles only take int um so
let me spin faster what's going on so if
our image is set to active which means
we have our our sprite effect activated
we're going to increase our frame
counter now what the frame counter is
going to do is going to count up to a
certain value whichever value our
switched frame is set to so set to 100
by default so it's going to count the
total milliseconds and wait wait it's
going to wait till we reached our switch
frame value once you reach that value it
means okay now it's time to switch to
the next frame so we're going to set
frame counter back to zero and we're
going to increase the frame the
x-coordinate of the frame by one now why
do we increase the X of like the frame
of the x coordinate it might be
different with your spreadsheet if you
look at this spreadsheet right here um
say I'm walking I'm pressing down or
whatever to walk right what's happening
is that it's going to take this image
crop it out then it's going to move to
this image it's going to move to this
image then back to this image this image
to this one so the current frame and the
x coordinate is 0 then it's going to
move to the current frame the x
coordinate to 1 then the current frame
the x coordinate is going to be set to 2
it's going to revert back to 0 1 2 0 1 2
so on and so forth so the x coordinate
represents the cycling through each
frame the y coordinate basically
specifies the direction that you're
facing so we do this then we save the
current frame tons frame which is
greater than or equal to the width then
we resort back to 0 so that's doing
exactly what I said before so the frame
with arm if for example so it's
go through this is frame number zero so
it's going to say zero zero times 32 is
equal to zero so we don't have to worry
about that and then it's going to be 1 1
times 32 we don't have to worry about
dot it's equal to 32 2 times 32 is equal
to 64 so you don't have to worry about
that then it's going to increase it by 1
there's nothing here so what's going to
happen it's going to say 3 times 32
that's equal to 96 and that's equal to
the width of the whole image so it's
going to say okay we have nothing else
to draw reverted back to zero that's
exactly what's going on there and we
just say else we just set it to frame
number one so no matter which direction
we're facing we're going to get like
that standing that's done in motion if
we're not doing anything and so we're
going to say source rect we're going to
say current frame times frame width and
current frame wide out for time frame
height and the frame within the frame
height so it's going to say and say say
say the frame is number frame number one
so it's going to say 1 times the frame
width so um that's you can say start
drying at 32 pixels and the current
frame rot why right now set to 0 so
start driving from here define and draw
from the width is going to be the frame
width so it's going to be 32 pixels wide
32 pixels down it's going to crop our
dire image I'm just going to draw that
image so that's exactly how it's going
to work at but you want this to be
outside of any of the if statements
because whether it's active or whether
it's not active we still want to crop
out the image so that's all we've got to
do for that's all we really got to do
for this so what we're going to do is in
our player dot XML file now we're going
to say player XML okay we're going to
say image defects and we're going to say
sprite sheet effect
and let's see if this works for us
hopefully it works unless we did
something unbelievably stupid so I did
do something unbelievably stupid
I don't it's not recognizing the
spritesheet effect so um let me just
check out what I did and I'll show you
how to fix okay I think I figured out
the error which I did another thing
really stupid um I didn't make a call to
image dot update so um
stop running this um so yeah but may
have caused image are updates and let's
run this so I don't know if it's
actually going to work but so yeah you
got this image right here so it's not
really animating right now so if we want
it to animate then um this is what we're
gonna have to do so and we want to
change directions based on the direction
that we've actually specified so what
we're going to do is we're going to say
that let's say image oh sorry
image dot is active is set to choose
we're going to set the is active to to
true by default right and what we're
going to do is we're going to say that
if velocity dot X equal to zero and
velocity Y dot blots ey set to zero that
means we're not moving at all they wanna
set is active to false so it's going to
be set to true by default and then if
anything if you decide to not to move or
anything we're going to set it to false
after so if we run this right now and go
through cycle up through all the screens
when you move it's going to go through
the animation now might be kind of laggy
finding on how you like it so you can
modify it to your needs but we're still
not changing directions and to easy way
to change directions with this so we'll
just add in some curly braces and we'll
just say if they're pressing down we'll
say image that spreadsheet of that
current frame got why is set to zero and
the reason how I came up with this value
is pretty simple so um this is the first
frame which is down all these are down
right so on the current frame and the
y-coordinate is frame zero and for the
left plane facing left the current frame
the y-coordinate is 1 so the player
freezing right the y-coordinate is set
to 2 and 4 facing up the y-coordinate is
3 so our to do is just change it
accordingly so when we press up we just
said that the current frame set to 3 for
that so you have to say mmm spreadsheet
effect current frame y equals to 3 and
same thing when we press right here and
if your spreadsheet is different then
feel free to change it to accommodate
for your sprite sheet right um so if
they press right it's set to 2 and if
they press left it's going to be set to
1
and run this program and standing down
oh okay so that's kind of weird
okay so okay so Dee let's see
oh I said coming from not X supposed to
be you got why
as you can see you got your little
animation now it might be kind of it's
choppy on mine just because I'm running
temptation now but it shouldn't be
choppy for you if you find the walking
animation a bit too slow then modify the
switch frame so if you wanted to switch
frames faster the lower switch value the
better and if you want to make the
animation slower then just increase the
switch frame and then it would take
longer to animate if it is like you for
your choppy's and let me know and then I
will try and modify it for the next
tutorial
but it shouldn't be chopping for you
just because I'm running a video editing
software that's why so anyways that's it
for this tutorial
I hope you enjoyed it in the next
tutorial we're going to be talking about
mapping and having our tile classes and
all that stuff and then after we're done
the mapping then little B actually will
probably have to just fix up a few
things and we'll get into actually
making our tom editor so I hope you
enjoyed this thanks for watching don't
forget to comment subscribe and bye for
now