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

hello everybody and welcome to the last
part of learning sprite animation to
wash my last tutorial basically in the
animation class we learn how to actually
create the animations and crop out the
animations and draw those animations to
the screen so let's work on actually the
initialized method which is the last we
need to work on so what we're going to
be storing is the position we're going
to be needing the amount of frames I'll
just nameless frames and oh we can will
actually specify the switch frame right
here so we're going to sets which frame
equal to 60 and we're going to put that
disposition is equal to position and the
amount of frames is equal to frames so
we're just making our copy of it so then
we can then and turn draw it to the
screen so now let's go straight to our
player class so what we're going to be
doing is making our instance of the
animation class and I'm going to put the
name is player animation and create the
animation class right there so put in
player initialize we're going to do
player animation sorry doc initialize so
we're going to store the players
position and we're going to store the
arm the amount of frames so we're simply
going to do this by doing a new vector2
and this the frames are four by four now
this is the best way to do the frames
but i'm just going to be doing this way
to accommodate for the tutorial just to
get you guys in just the tutorial so we
have we've initialized so for a low
content we we load our player image but
we have to intern get our image equalled
into the player in the two animation
class so we can we as many ways we could
do this we could either make a load
content method or we can create another
property arm called our image or
animation image and will present set
property because that's all we need to
do and we'll put image is equal to value
sorry so if we go back to player sorry I
need to settings back so if we go back
to player right here after we load our
player image we just have to do player
animation dots animation image equals
two player image so we've stored the
player image into our animation class or
in our animation instant and sorry if
you guys aren't familiar with classes
but C sharp is an object-oriented
language so if you need to actually no
classes to program in C sharp so let's
look at our update right now and one
thing I forgot to tell you is that we
have to arm use one more thing and that
is the input and normally you would have
an input state class or input manager or
something to handle the input but for
this tutorial for this tutorial sake you
want to do it so for the update we're
just going to do player animation dot
update and then we're going to do player
animation dot draw now we're just going
to set active to true
just to show you guys how it's gonna
work so we need to go to game one CS and
we're going to delete all the studs from
the last tutorial so we're going to
create a new instance of our player
class so we've created our instance we
want to initialize player so player dot
initialize so you've initialize that we
want to load our actual content so we're
going to do player dot load content and
then put in the variable content in
there so the same content variable we
use to actually load our content before
but just passing the parameters since
you were making a copy event to use this
functionality so if we add delete all
the stuff here we do player update and
we pass in game time same game time
value is here and for the sprite bastard
draw make sure you have spray batch
beginning spray pass right end so we're
going to put player draw and if
everything goes as planned it should
animate so let's see what we get
so if you look on the screen your
players should be animating it should be
scrolling through the different frames
so it doesn't really look smooth and
stuff yet it looks like it's moving at
an uncontrollable rate so let us go back
to our code to see if we could actually
fix that so if we set our switch frame
to a higher value let's set our switch
friend to 100 let's see if our image
will move at a slower rate so see the
higher the number you give for a switch
frame then the slower the animation
moves this is because it has to count
that much higher in order to switch the
frame so as to wait that much longer
before it switches frames so the fast
you wanted the lower the number you put
force which frame and so you want it the
higher you profesor in so say you want
to make are a walking animation and a
running animation you could just put a
higher value for switch frame if you
wanted to show a walking animation and
if you wanted to look as though it's
running then you said a lower value
force which frames so it looks as though
the legs are moving at a faster rate so
now that we've got our animation down
now we have to actually handle input so
we've learned about keyboard input
already but we're going to be learning
how to do this to manipulate to psycho
to each of the frames so if we go to our
player what we're going to do is that
we're going to set at the top player
animation active equals false okay and
there actually were going to set this to
true sorry so what we're going to do
right here is that we're going to put
what we want to do is that we actually
want to make another vector to called
arm current frame as well and this is
just a temp so a temporary so we can say
10
frame I guess so this is just temporary
that's a temporary evaluate now so just
to when we initialize it we can just set
it to vector 20 so if we look at our
update right here we want to do if we
want to actually work for the keys first
and i forgot to actually make our key
states so keyboard state wanna put key
state so we're going to put at the top
keyboard key state is equal to keyboard
get state so we can actually get
keyboard input so we say that if key
state dot is key down keys dot down then
we want to actually move the player down
now how do we move the player down but
we have to set the current frame equal
we have to set the current frame equal
to a certain value so the moves down now
uh there's multiple ways that we could
go about this we could do if we go back
to our animation we've said that we
start from the current frame ex and
current frame why well we could do this
if we would like to we could do x frame
height right there and then what this
will do is that if we instead of setting
the current frame y and stuff to the
initial value because it could get
confusing you could be like if I'm
drawing left yeah I know 0 plus 48 is
equal to 48 and if i want to draw the
right animation they're not to figure
out what's 48 plus 48 and that's equal
to 96 so if i want to draw the right
animation i started drawing for value 96
now it's 96 plus 48 and i can get a bit
confusing if you if you really don't
want to do math in your head so what we
can do is that we could say that this
frame the down animation 20 left
animations is one right animations is
too
and up animations is three so it's sort
of like an array 0 1 so 0 1 2 3 so and
because we're going to do that we're
going to figure out what we should start
drawing from so if current frame y is
equal to 0 what's 0 x 48 that is equal
to 0 so what knows that current frame
why should start should be at the pixel
zero so say we're pressing the left
button it's um if a president left
button then current frame why should be
equal to one so then if we do one x 48
dot equals do 48 so know how to start
driving from there and if we're pressing
the right then current frame why should
be equal to two was to x 48 that's 96
and then we'll start drawing the right
animation so that is a better way to go
about it