SDL Tutorial Series - Part 2 - Getting Started

In this tutorial, we will describe where to download the SDL libraries and how to set it up using Microsoft® Visual C++ 2008 Express Edition. If you are using Windows and have not yet installed Visual C++ 2008 Express Edition, it can be downloaded for free from here.

The first step to getting started using the SDL is to download the libraries. These libraries are required to building applications that use the SDL. The libraries can be downloaded from At the bottom of the page, you should see this section.

SDL Libraries

Note: Since we are using Visual C++ 2008 Express Edition, download the Visual C++ 2005 Service Pack 1 zip file.

After you have downloaded the libraries, extract the contents to wherever you want on your computer. Just remember where because it will be very important.

Now we will set up Visual C++ Express Edition to use these libraries in our future SDL projects. Open up Visual C++ and click on Tools and then Options. It should look like this:

SDL tut 1

Expand the 'Projects and Solutions' category and select 'VC++ Directories'. Under the 'Show directories for:' drop down box, select 'Include files'.

SDL tut 2

Now, select the 'New Line' button (Highlighted with the red circle) and then the button with 3 dots (Highlighted with the green circle). This will let you browse the files on your computer. Select the 'include' folder in the SDL folder you extracted previously. It should be something like: SDL-1.2.14\include

Now, under the 'Show directories for:' drop down box, select 'Library files'. Do the same action you did in the previous step. Select the 'New Line' button and then the button with 3 dots to browse for the lib folder. Select the 'lib' folder in the same SDL folder that contained the 'include' folder. It should be SDL-1.2.14\lib.

Only one item remains in order for you to be using the SDL in your applications, the SDL.dll file. You can copy this .dll file to the folder containing the source code of your application (it will look like: application name\debug\sdl.dll). You can also copy the file to your Windows\System32 folder (or Windows\SysWOW64 if you are running a 64-bit version of Windows). The problem with this is that there are different versions of the SDL and if you have a conflicting version of the SDL.dll file in the Windows folder, version conflicts could arise. You will need to distribute a copy of the SDL.dll file with your applications anyways for it to run so I recommend not copying it to the Windows folder.

You are now ready to start using the SDL in your applications. Part 2 of this tutorial will begin to explain the basics of the SDL and how you can use it in your game applications.

Back to SDL Tutorial Index

Back to Main Page

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

Quick Collision Check

This is one of the most useful tricks I have encountered for collision detection. I will be working in 2 dimensions in this example but it is easily extended to 3 dimensions. If you are programming a game, you will more than likely at some point need to implement some collision detection code. The simplest way to check if two objects are colliding with each other is to wrap them in what is called a bounding circle (or sphere if working in 3 dimensions). Every circle has a center point and a radius. To see if two circles overlap (collide) with each other you take their center points and subtract them from each other. We will call this value the distance squared. Next we take the radius for each circle, square it, and add them together. If the distance squared is less than the sum of the two squared radii, then you know they are penetrating. How sweet is that?

Here is a picture to make it more clear:

2 circles

The red lines represent the length of the radius of the circle. The blue line represents the distance between the two center points of the circle. From this picture, you can clearly see that the two circles do not overlap and do not penetrate one another.

Here is some pseudo code:
bool checkBoundingCircles(Circle circle1, Circle circle2)
     float totalRadius = circle1.radius + circle2.radius;
     vector2D distanceSquared = (circle1.position - circle2.position).lengthSquared();
     if ((totalRadius * totalRadius) >= distanceSquared )
          return true;
     return false;
Back to Main Page