2D Motion
by Randy Trulson
President Neuron Entertainment, Inc.

In this section movement of objects in two dimensional space will be covered in relation to video games. Before reading this section be sure that you have a good grasp on vectors, position, velocity, and acceleration of objects along a straight line.†

When it comes to video games, there are not many that I can think of that do not support some type of 2D or 3D animation. Because of this I believe a strong emphasis should be placed on 2D and 3D motion since this is one of the main elements making up a good game. Even if you donít plan on doing any 2D games, you will need a strong foundation in 2D physics before understanding 3D physics. If you plan on writing a 3D game, keep in mind that the 3D elements are projected onto a 2D format, your screen.

Basically the monitor is a 2D plane that you are trying to get objects to move around on. Most of the time these objects are pixels, sprites, or a derivative. From a mathematical standpoint, a computer monitor is actually just a big grid like you used in math class when you used to make graphs of equations on a piece of paper. This 2D grid that you were suppose to be doing your Algebra graphs on is called the Cartesian plane. A variation of the Cartesian plane is used when your computer graphs pixels to the screen.†

Cartesian plane vs. the computer

The Cartesian plane is basically a flat plane with its dimensions described in x and y coordinates similar to the grid on the Battle Ship game. The x coordinate describes the position of an object horizontal to the plane while the y describes the position of an object vertical to the plane. The Cartesian plane and a computer monitor differ in two ways.†

  1. The Cartesian planeís center is called the origin and has the coordinate values (0,0). Any x coordinate to the right of the origin is represented as a positive number and to the left as a negative. On a computer the origin is the upper left pixel of the screen, so there is nothing above or to the left of the origin on the monitor.†
  2. On the Cartesian plane, any y coordinate above the origin is positive and any coordinate below the origin is negative. On a computer anything below the origin is positive, and anything above it is negative.† Therefore on a computer the y coordinate increases from the top of the monitor to the bottom.

The first one is not a problem since we can just ignore the other three quadrants of the graph, but the second one must be delt with on a continuious basis. Because the monitors y-axis is inverted compared to the y-axis normally used, all we have to do is remember to invert the y coordinate befor using it. The differences between the Cartesian plane and the monitor can be seen in figure 3.0.

Figure 3.0†

Objects, and vectors as attributes

When you create objects for a video game, you normally want some way of keeping track of the various attributes of the object such as position, velocity, direction, acceleration, and things of that nature. In physics vectors are used to describe these attributes. In video games as in physics, vectors can also be used to describe the attributes of objects relative to the objectís world in which it was created. We will be using some of the various aspects of vectors to keep track of our objects in a game type environment below.†

Sometimes when vectors are used there components are described in i, j and k increments. Just for clarification, these components align with the 3D space equivalents of x, y, and z. Care should also be taken to make certain if a vector is relative to the origin of the world coordinate system, the screen coordinate system or the object it is describing. For example an acceleration vector to a rock is relative to the origin of the rock. The rockís position is then relative to the origin of the world the rock exists in. Figure 3.1.

Figure 3.1 †

Position, velocity, and acceleration

Position, velocity and acceleration are the three attributes that you will need to deal with in order to get an object to act as if the object exists in the real world. We will deal with these attributes first in 2D space, then 3D. †


In a video game when it comes time to determine the next position of an object such as a sprite some information about that sprite is usually stored away giving the direction of travel for that sprite. In a simplistic game the number of the frame of the sprite that is being moved may hold this information. In more realistic games a velocity vector may be used.†

Example using frames

Lets say you have a space ship and eight frames that show the space ship going in its eight different directions (very limited ship). You might start off by having the first frame, frame zero, show the ship traveling towards the right. Then to get the other seven possabilities you would show the ship rotated fourty-five degrees each frame in a counter-clockwise direction to cover all eight directions. An example of this can be seen in figure 3.2†

Figure 3.2

The shipís direction can be controlled by the arrow keys, mouse or joystick. When a player presses the left arrow key you know he/she wants to rotate the ship to the left so you increment the frame number that you are displaying causing the next sprite frame to show that the ship has turned fourty-five degrees counter-clockwise. When the frame number seven is reached the algorithm just roles over and starts at frame zero again. If the player presses the right arrow, they want to rotate the opposite direction, so just traverse the frames backwards.†

In this instance the frame itself holds the information needed to make the sprite move. If you remember a little Trigonometry and vectors, you can determine the next position where the sprite should be drawn when it moves. Now lets say that when the up arrow is pressed that the ship is moved forward in the direction it was headed, in our case one of the eight. To make things simple for now we will assume that our ship has two settings, stop and go with nothing in between. This will give our ship a constant velocity, say five pixels per frame. This means that if the user presses the up arrow, the ship will travel the equivalent of five pixels forward. Therefore the ship will have a velocity vector of length five when it is moving. †

Now if our ship is headed towards the upper right corner of the screen when the up arrow is pressed, we canít just move to the right five and up five, right? Wrong, this would be too far. If you remember pythagoreanís theorem it states that the hypotenuse of a right angle triangle is longer than either the opposite or adjacent sides.† Pythagoreanís theorem is a follows.

This means that given a right angle triangle with a x coordinate width of 5, and a y coordinate height of 5, gives a hypotenuse of 7.07. This means that our ship traveled 2.07 pixels further than it should have in that same length of time. This will distort the travel characteristics of the game because when the ship travels straight right, left, up, or down it will travel exactly 5 pixels while any other direction would give the ship an advantage of 2.07 pixels. So you donít want to do that. What you do want to do is break the shipís velocity vector up into its x, and y components then use those to determine the next position. The x and y components of the velocity vector found with the following.

For the x component use:

For the y component use:

Now by using the components of the vector we can find the next x and y coordinate for the ship. Remember that the shipís velocity is 5 pixels per frame. So to get the length that needs to be traveled in x direction just determine the vectors x component, and add that to the shipís current x coordinate. Then do the same with the y. †

So if the velocity is 5 and the coordinates of our ship are 110 on the x and 43 on the y and the ship is facing the upper right corner of the screen of a fourty-five degree angle. What is the next coordinate of the ship if the acceleration key, the up arrow, has been pressed? The answer is as follows.†

Representing the magnitude of the velocity on a fourty-five degree angle.

So the x displacement is .

And the y displacement is .

†Then if you round you will get 3 in the x direction and 3 in the y direction, (remember computers round integers down). So the new coordinate is 113 on the x and 40 on the y, (remember that the y has to be inverted because of the monitor, so the 3 became Ė3). It would be up to you as the programmer to make sure that the new coordinates were valid and do error handling accordingly.

Note: Sometimes it is desired to have the computer round up using a normal rounding algorithm instead of the floor function. To do this, simply take the float number and add 0.5 to it before it gets cast to an integer type. This will trick the computer into rounding up if it is over 0.5 and down if it is below. For example say you need to round the 3.53 up. If you just cast it the way that it is, it will become a 3 as an integer. If you add 0.5 first you get 4.03 then cast it to an integer giving 4.


Now that we have a handle on how to move the ship with the correct amount of displacement for each frame, how do we make the ship change in speed?

3d Motion coming in the next update, stay tuned!

On to the next section..

Discuss this article in the forums

Date this article was posted to GameDev.net: 8/6/1999
(Note that this date does not necessarily correspond to the date the article was written)

See Also:
Physics Tutorials

© 1999-2011 Gamedev.net. All rights reserved. Terms of Use Privacy Policy
Comments? Questions? Feedback? Click here!