Simple 3D Animation
Xna4.png

Introduction

In a 3D game, one of the big things we want to do is be able to have our game objects move around, which is called animation. This is a simple tutorial that discusses the basics of 3D animation in your XNA game. For this tutorial, we will start with where we left off in the introductory tutorial on using 3D models. It might be a good idea to get the code from the end of that tutorial to use as a starting point for this one. In this short tutorial we will take a look at how animation is done in XNA, in its simplest form. There are other more advanced techniques that we will discuss in future tutorials.

Simple 3D Animation

In the real world, we think about moving objects as a continuous process that is gradually happening across a span of time. In video games, like in movies and cartoons, animation does not occur continuously, but rather in discrete time intervals. By default, an XNA game will be redrawn 30 times a second. You can actually configure this to be different in XNA, but that is a different topic for another tutorial. This is actually a good thing, because otherwise, you would need to know Calculus in order to make a game! Instead, 30 times a second, we will be given an opportunity to update the state of our game, including the positions of our objects, and then we can draw the models in the current position each time. By doing this, an object will be able to move around in our game world.

Create a Place to Store the Position

The first thing we will want to do is to create something to store the position of our model in our 3D world. We will use a Vector3 object. Remember that a vector is simply a list of numbers. In this case, there are three numbers, which represent the x-, y-, and z-coordinates of the position of our object. So let's add the following line of code as an instance variable to our game class:

private Vector3 position;

Initialize the Position

Next, let's initialize the position. Depending on what your game does, and how you've got it set up, you can initialize the position anywhere, but for now, let's go to the LoadContent() method and put this line of code, to start our object's position at the origin:

position= new Vector3(0, 0, 0);

Update the Position Each Frame

The next thing we will need to do is to update the position. In your game, the Update() method is called 30 times a second by default. You can actually set it up so that the Update() method and the Draw() method are not called the same number of times per second, so it is important that you keep updating code in the Update() method and drawing code in the Draw() method. Updating this position is pretty simple. Add the following line of code somewhere in the Update() method:

position += new Vector3(0, 0.01f, 0);

This will move the object 0.01 units in the y direction every update.

The last thing we will need to do is update the world matrix that we've been using for drawing. Do this by adding the following line of code in your Update() method, just after you change the position:

world = Matrix.CreateTranslation(position);

You should now be able to run your game again, and see the object move across the screen, like in the screenshot below.

screenshot-1.png

A More Advanced Animation

Before we finish this tutorial, I thought it would be worth doing a slightly more complicated animation. For this animation, we are going to have our object spin around while it moves. To do this, we will need to keep track of an angle of rotation, so go back to your instance variables and add the following line:

private float angle;

We can initialize the angle to 0 radians in the LoadContent() method like we did with the position variable:

angle = 0;

Next, we will need to update the angle, just like we did with the position, so go back to your Update() method and add the following line of code at some point before you create the new world matrix:

angle += 0.03f;

Finally, we need to make our world matrix incorporate both the angle and the position into it, so change the line that says:

world = Matrix.CreateTranslation(position);

to say:

world = Matrix.CreateRotationY(angle) * Matrix.CreateTranslation(position);

You should now be able to run the game again, and you should see the object spinning as it moves along.

screenshot-2.png

Download the completed project

What's Next?

We've covered the basics of animation in 3D. For many games, this is all that you'll need. However, for some games you may want to try out a more sophisticated technique, two of which are discussed in future tutorials.

You might also like to check out some more advanced drawing stuff that can be done with 3D models, which is discussed in the tutorial on the BasicEffect class.


Troubleshooting.png Having problems with this tutorial? Try the troubleshooting page!