Episode 4 - Animating a sprite.

Now I have a basic understanding on how to animate a sprite, click "Read More" to see more on how I did it.






First I would like to give credit to xnafusion.com as this is where I found the tutorial on how to animate this sprite. I found it very easy to understand and they have even included the source code so you can follow along.



Step 1:

To animate the sprite we are using a "spritesheet" (see below). This is a series of images that make up the frames of the animation, then we simply tell the program to draw a rectangle aroung certain points of the sheet at different time intervals and redraw the old one with the new one.





You can use any image software you like to draw the images, I suggest GIMP or Photoshop as it allows you to have a transparent background. Also Flash can be a handy tool to put the individual frames into and play through the animation to get an idea of what it will look like.



Step 2:

Now we declare the sprite sheet (or sheets in this case) as a "Texture2D" same as previously.

As you will notice we have also added a bunch of other variables to handle our animation, I think it's quite self explanatory , however if you need more of an explanation, please do not hesitate to contact me.





Step 3:

Next we load our sprite sheet's the same as before, I have named mine "running.png" and "running_back.png" keeping in mine when you load them you keep the file extension off.

note: I'm sure there is a way to have all of your animations on the one sheet, but at the time of writing, I don't know how to do it.





Step 4:

In our update function we add our logic to handle the animation, below is the code (for a better explanation, there is a great tutorial at xnafusion.com).

One thing to notice here is a the "if" statement. What we are doing here is checking to see if the controller is being pushed left or right so we know whether to play the animation, otherwise at this stage is simplsy stays idle in the last frame played. Obviously this will be refined for the game however for the time being it has served the purpose of teaching me the basics of playing an animation.





I have used the variable xspeed here to be set to the value of the controller position * 4 , which is (I believe) the speed in which our character is moving across the screen.

Also I have added the "Window.Title" which allows us to display our variables to the title bar, this (I think) will come in handy later on for error checking and what not.

Step 5:

Now we draw the sprite to the screen, The "if" statements here check to see which dorection the character is running therefore choosing which sprite sheet to use.





... and that should be it!



If you run it now you should be able to run forwards or backwards on the screen, it's not perfect by far but it's a start.
Download Source

So there it is, any questions, quiries, doubtfull points??

Remember anyquestions let me know, and I'll do my best to help.

Untill next time...... "Lets make a video game"