C# Xna Made Easy Tutorial 14 - Sprite Animation [Part 2] Video Lecture | C# Game Development: Game Making made Easy (English)

hello everybody and welcome to your
second part of sprite and a mission says
get right into the cone so last time we
were learning about using the game time
class in order to manipulate frames per
second so that the frame counter will
increase at a steady rate and I won't
increase super fast or super slow
depending on the processing speed so
what is a frame counter gonna do the
frame counter objective is just to count
to a certain number and I want to reach
is that certain number then we will
actually change the frame so one thing
that I want you guys to add right now
which I forgot to add is all for the
vector to up here at the top I want you
to add I'm a variable called current
frame sorry now we want to create some
properties for these and we're gonna do
current frame and we're gonna do get in
set properties so we're gonna be getting
sorry oh I can't type today sorry I'm
gonna be getting the current frame and
we're gonna have sets getter and setter
properties and we're gonna be needing
the we might be needing the position I
might I might see if I'll go different
method but if not only the position and
that is it for now
so let us before we when we got when we
created our program we had we created
friend counter and switch frame so the
value of switch frame is a limit that
we're gonna is going to indicate to us
when we switch the frame so what we're
gonna do we're gonna put a frame counter
is greater or equal to switch frame that
is gonna indicate to us that we actually
indeed need to switch the frame and
don't worry in our initialize method
we're going to
the value for a switch frame so if
friend cometh greater or equal to switch
frame then we want to reset frame
counter back to zero
again I'm - we've pretty straight
forward and then what we want to do is
that we wanna transition to the
different frames so we're doing we're
gonna do of current frame dot X plus
equals frame width and um as you notice
that we don't have a frame with yet we
don't have a frame with property so you
might think I'm working a little bit
backwards here but I'm trying to get to
the actual core of the program first so
we're gonna end up making properties
called frame width and frame Heights and
they're just gonna be read-only since we
won't set the frames height so we're
gonna get the frame how we're gonna get
the frame width is that we're gonna get
the actual images with divided by the
amount of frames X now since vector
properties are like floats and doubles
we have to cast it to an integer same
reason why we had to do we have to cast
to an integer over here because this
returns a float or a double so that's
basically how we're gonna get the frame
width and we're gonna get the frame
height the same way just switching that
from height and getting the amount of
frames dot y now our what is the frame
within the frame height like I specified
in the first tutorial the frame width
and the frame height is the width and
height of the individual images not the
full spreadsheet itself just the
individual images so each individual
image is 32 by 48 so if you go back to
our code the image width is 128 and the
amount of frames should be set to 4
because there's 4 frames so 128 divided
by 4 is equal to 32 same for the frame
height the frame the image height is 1 9
two pixels and the amount of frames
should be four frames since there's four
images one two three four
so 192 divided by four to go to 48 so
the frame kite ship returned 48 and the
frame width to ship returned 32 so we
want to cycle through the animations so
first the current frame um X in the
current frame y should be set to zero or
whichever direction is facing the
current frame Y will be set to whichever
direction they're facing or whatever so
um but the current frame X by default
reset to zero so then what is saying is
that current frame X plus equals frame
width so the current frame X will move
32 pixels to the right and then it
should draw this image right here then
I'll move another 32 pixels draw this
next image moving another 32 pixels draw
this image then it will reset back to
the first animation and cycle through it
until you stop pressing that direction
so how we how we gonna do this how are
you gonna actually crop out the certain
image that you want to draw well we have
to create a rectangle and this is going
to be called source rent so the source
rectangle is basically gonna crop out
the images the current image that we
actually need to draw so don't worry
about the source rest right now so we're
basically saying that the current frame
dot X plus equals to plus equals frame
width so now we have to say that if
current frame X is greater than or equal
to the width of the image then we reset
current frame X back to 0 again so it's
basically saying that if the current
frame X is at this edge there's nothing
for it to draw so we have to reset it to
zero again and then it will draw this
image back again so we'll cycle through
these images sorry from being repetitive
but I'm just trying to make it as simple
as possible so that's all that happens
when frame counter is greater than or
equal to switch frame so now we need to
use our source rect in order to
actually crop out the image and how we
do this we put source rect equals some
new rectangle now you guys should
generally already know what rectangles
do they draw a certain section of the
picture so we're only going to be
cropping out certain sections so this
should this is simple enough we just put
current frame X current frame why I mean
cast it to end because rectangles are
required integer parameters not doubles
or floats then we put frame height and
we should cast it so cast frame height
well sorry I casted the wrong thing
frame height a frame width and frame
height are already integers sorry was
once I cast the current frame so we cast
the current frame to integers and that
should be it for our source rect so what
does what is this gonna do so pretend
that we're pressing the down key okay
we're pressing the down arrow key sorry
so that means I'm the the default the
current frame X is equal to zero and
current frame Y is equal to zero okay so
what this is gonna do is that it's gonna
say start cropping from pixel zero in
the x coordinate and pixel 0 on the y
coordinate and in this x2 and y2 we end
drawing from the frame width from 32
pixels towards the right and 32 pixels
down so what is this gonna do it's gonna
say start drawing from this corner move
32 pixels to the right then move 30 of
move 48 pixels down sorry so move 48
pixels down and then crop out that
rectangle and store it in source rent so
basically that current image is stored
inside source rent so if we go to our
draw um method and type in spray Paget
draw what we're gonna do is we're gonna
draw our image and our image um first of
all you could see that sprite batch has
the overloads so we're not gonna be
using the first one or the second one
we're gonna be using the fourth one so
it takes four parameters the texture
position the source rectangle which
means cropping out and the color which
is going to be color dot white so we're
going to type in position source rect
color dot weight so the draw command is
pretty simple now one thing I should add
and this is should be a very important
thing that you should add is another
boolean variable called active and we're
gonna set this to false by default or we
should probably do that in our
initialize method so we're gonna set our
active equals of false so what is active
gonna act as active is gonna say that if
the player is active then we actually
want to actually draw the frame or
increase the frame counter if active is
equal to if active if there's net if
there's no active variable or something
signifying it then even when you're not
moving the frame counter is still gonna
be added to so you only want to do is
put if active then we increase the frame
counter else then we reset frame counter
equal to zero and then everything
remains the same so oh in our player
class we're gonna end up changing the
active based on it for actually pressing
a button in there for naught and in
order to do that since this is a private
variable we'll have to make a property
so public pool and we'll name this
active and we'll get active so return
active and we'll set active so active
equals to value so let me check how much
time I have right now okay so basically
I'll just to read one we like rerun what
we've done in this tutorial so we've
created
some properties right here the frame
with and frame height is the width and
height of the individual images we get
that by getting the total images with
divided by the amount of actual frames
or the amount of images we have so since
this image is 128 pixels wide and we
have four images then we do 128 divided
by four and in the in turn we get that
each image is 32 pixels wide just a
little math for you to do there you
could in fact the reason why we do it
this way is because if you have
different images in the game and you
want to incorporate the different images
or image widths and Heights then all
right you can't just say that the frame
width is 32 pixels or a friend - 48
pixels for every single image or your
game won't be flexible or your game
engine or whatever so in order to
accommodate four different sprite sheet
widths and Heights then we do it this
way for maximum flexibility and um later
tutorials I'm going to be showing you
how to actually load these values to
text files and stuff so then it's easier
instead of manually inputting the values
like that all the time so what we did in
the update we say that if active his
true so if the players indeed moving
that we increase the frame counter the
players not moving we set the frame
counter to zero if the frame camera has
reached the frame limit to the point to
switch the frame then we switched off
current frame we set frame zero to zero
frame counter to zero and if the current
frame is too big or it can't draw any
frames anymore it resets back to the
first frame image then for the source
rect we actually crop out the image we
wanna draw and then the draw method then
we actually draw our image our cropped
our image towards the screen so that is
it for this tutorial hope you enjoyed it
thanks watching and bye