SDL Tutorial Index

SDL Logo

This tutorial series will teach you how to use the Simple Directmedia Layer in your video games. It assumes you have some knowledge of the C++ programming language. It does not use advanced features of C++, but you should at least know what a pointer is before getting started.

Part 1 - What is the SDL?

This tutorial will explain to you what the SDL is and why it is useful for video game production.

Part 2 - Setting up the SDL libraries

In this tutorial, you will set up the SDL in the Microsoft Visual C++ 2008 Express Integrated Developer Environment (IDE). This will allow you to build SDL applications and is essential to the series.

Part 3 - Your First Application

This tutorial will help you build your first SDL application. The SDL functions used in the program are explained at the end of the tutorial.

Part 4 - How to Load and Display Images

This tutorial will show you how you can load and display .bmp image files in your SDL window.

Part 5 - Dealing with Time

This tutorial explains how to use SDL_GetTicks() to control the motion of objects on the screen.

Part 6 - Displaying Text with SDL_ttf

This tutorial introduces the SDL_ttf library; an extension to the core SDL library. It demonstrates how to display text on screen by loading a font and rendering a text string to an SDL surface.

Part 7 - Simple Keyboard Input using the SDL

This tutorial will show you how easy it is to get keyboard input using the SDL library.

Part 8 - Simple Keyboard Input using the SDL Continued

This tutorial will show you a different way to get keyboard input using the SDL. It covers the event-driven approach to getting keyboard input.

Back to Main Page

Vectors - Part Two

In part one of this tutorial I explained what a vector is and described some of their basic operations. This tutorial will delve deeper into vectors and explain the more useful operations that vectors can be used for. First, lets see how we can find the length of a vector.
If you are not familiar with the Pythagorean theorem, please read this article. It is important that you are familiar with this theorem because finding the length of a vector is based on it.

Vector Length

This picture shows a 2-dimensional vector with red lines overlaid to show the x and y displacement. From this picture you should be able to infer how the length is obtained. You square the x and y term of the vector and then take the square root of their sum. In pseudo code it would look like this:

sqrt( x*x + y*y)

Or, in three dimensions:

sqrt (x*x + y*y + z*z)

The length of the vector is sometimes called the norm. If we have a vector A, you will often see the norm of vector A notated as ||A|| or just |A|.

There is a special class of vectors that will be VERY important to us. These are called unit length vectors and any vector that is unit length is said to be normalized. In order for a vector to qualify as unit length it must have a length of exactly 1. We can normalize any vector by first finding its length and dividing each component of the vector by the length (norm). In three dimensions it would look like this:

length = sqrt(x*x + y*y + z*z)

x = x / length
y = y / length
z = z / length

If the vector were only 2-dimensional you would take out the z component.

We will now discuss the most important and widely used operation on vectors in all of game programming - the dot product. Given two vectors A and B, we define the dot product of A and B as ||A||||B||cos theta. Theta is simply the angle between the two vectors. The dot product will return a scalar value between 1 and -1. We obtain the dot product by simply multiplying the two vectors' components. So, if we have vectors A and B that are 2-dimensional vectors, we find the dot product like so:

A.x*B.x + A.y*B.y

If the dot product of A and B is greater than zero, then we know the angle is less than 90 degrees. If the dot product is equal to zero then we know the two vectors are perpendicular or orthogonal to one another. If the scalar value returned is less than zero, we know the angle is greater than 90 degrees. If you need the actual angle between the two vectors, take the inverse cosine of the scalar value returned by the dot product.

We will now move on to the perpendicular product and the cross product; two similarly related concepts. For a vector A in 2-dimensions, there are two vectors that are exactly perpendicular to that vector. This picture will help demonstrate.

Perpendicular Product

The green vector is vector A. We say that the blue vector is the left hand normal of vector A and the red vector is the right hand normal of vector A. If we were to take the dot product of vector A and the left hand normal or the right hand normal, it would be exactly 0. For any 2-dimensional vector, to find the left hand normal switch the x and y components and negate the x component. In pseudo code it would look like this:

left_normal.x = vector.y
left_normal.y = -vector.x

The right hand normal is similar:

right_normal.x = -vector.y
right_normal.y = vector.x

The cross product is similar to the perpendicular product but it is used in 3-dimensions. Given three points: A, B, C, we can construct 2 vectors from these points. We will name the vectors V1 and V2. The following diagram will help in my explanation.

Cross Product

Vector V1 in constructed by taking the point B and subtracting it from A. Vector V2 is constructed the same way except by taking the point C and subtracting it from A. Similar to the perpendicular product, we can get two different normals that will be orthogonal to the plane constructed from the original 3 points. It is common to face the normal out of the plane. We calculate the normal vector like so:

normal.x = (V1.y * V2.z) - (V2.y * V1.z)
normal.y = (V1.z * V2.x) - (V2.z * V1.x)
normal.z = (V1.x * V2.y) - (V2.x * V1.y)

The normal vector is represented in the picture by the blue vector which is facing out. The cross product is usually written as normal = V1 x V2.

We now move onto our last topic which is vector projection. Have a look at this picture:

Vector Projection

Lets say the red vector is vector A and the green vector is vector B. We define the projection of A onto B as:

Projection = Dot(A, B) / (||B|| * ||B||) * B

The projection vector will be parallel to vector B. Notice the projection drops a
perpendicular onto B from A. If vector B is normalized we can reduce the projection vector calculation to:

Projection = Dot(A, B) * B

This is the end of this tutorial. If you have read over both tutorials you should have a good understanding of vectors and be able to start applying them to your game projects.

Back to Vectors - part 1

Back to Main Page

Vectors - Part One

Vectors are a very important part of any game. They are used primarily in graphics, collision detection, physics engines and ai. A vector can be represented graphically as follows:


Vectors have two properties that make them very useful; specifically, magnitude (length) and direction. You will see moving forward how these two properties of vectors make them invaluable in game programming.

We will represent 2-dimensional vectors as an [x,y] value pair and 3-dimensional vectors as an [x,y,z] value pair.

What can we do with vectors you ask? Well, for starters we can add them together. Given two vectors A and B, we can add them together to get a vector C. The following picture illustrates this concept.

Vector Addition

The green line represents vector A, the red line represents vector B, and the black line represents vector C. It is important to notice in this picture that the order in which we add the two vectors does not matter (A + B = B + A). This is called the commutative property.

Vectors can also be subtracted from one another:

Vector Subtraction

The green line represents vector A and the red line represents vector B and the black line represents the new vector C. Here we have B - A. It is important to notice that the vector is drawn from the tip of A to the tip of B. If we were to subtract vector B from A, vector C would face the opposite direction. We can then state that vector subtraction is non-commutative.

Vector Subtraction

A vector can be multiplied with a scalar value. For instance, say we have a 2-dimensional vector A = [3, 5] and we multiply it with the scalar value 2. Vector A is now twice as long and A = [6, 10]. If we wanted to reverse the direction of the vector we could multiply it with the scalar value -1. Two vectors can be multiplied together but I will save this for part two.

These are the most important basic properties of vectors. In the next tutorial I will explain the dot product, the cross product, vector length, and vector projection.

Continue to Vectors - part 2

Back to Main Page