Introduction to C++ with Game Development: Part 2, Project Template

As you noticed in the first article, setting up a project in Visual Studio can be quite a task. And we didn't (nearly) touch all the settings that you can adjust for a project either. To make your life a bit easier, we will use a project template from now on. This template is simply a directory that contains all the files that you need, with all the settings tuned just right for the kind of programs that we create at IGAD. The template also contains a bit of code, so that you don't have to type it yourself. This code aims to take away the 'platform specific' stuff from you; i.e., it opens a window, lets you draw to it, and updates it for you. Sounds simple, but really it isn't: Windows can be quite a nightmare to deal with properly, and since that's just not the core of game development, we felt it's best to take care of that once and for all. The result is the template.

Getting the stuff you need

Get the template package from here.

Extract this package to c:\my_projects\template. Then, open the project by double-clicking the .sln file in the directory.

You should see the project in the 'Solution Explorer now:

solution explorer

Hit the '+' next to 'Template' to see the files in the project: game.cpp and .h, template.cpp and .h, and surface.cpp and .h.

Finally, hit F5 to start the application. This should get you a nice window (as promised), with the famous words 'hello world' in it. To emphasize the magnitude of this accomplishment, there is a horizontal line under these words.

The code that you should be interested in right now is in game.cpp. Here are its contents:

// Template, major revision 3
// IGAD/NHTV - Jacco Bikker - 2006-2009

#include "string.h"
#include "surface.h"

#include "stdlib.h"
#include "template.h"
#include "game.h"

using namespace Tmpl8;

void Game::Init()
	// put your initialization code here; will be executed once

void Game::Tick( float a_DT )
	// render a single frame here
	m_Surface->Clear( 0 );
	m_Surface->Print( "hello world", 2, 2, 0xffffff );
	m_Surface->Line( 2, 9, 66, 9, 0xffffff );

This code will be the starting point for all assignments that you carry out for the year-1 IGAD courses.

Nuts and bolts

  • Even though this is just a small program, there's a lot to say about it. Most (all, actually) of it will be explained in this tutorial series, but for now, let's limit ourselves to some observations:
  • The '#include' lines at the beginning of the program basically paste some source code from another file in the current file. So, the 'real' game.cpp is quite a bit larger.
  • Whenever something needs to be drawn, a line starts with 'm_Surface->'. The things we can make 'm_Surface' do are specified in 'surface.h', starting at line 70 ('class Surface').
  • There are some things that happen just once: We specify those in the 'void Game::Init()' function.
  •  This particular program basically does nothing in the init function.
  • Other things are done for each frame: These are listed in void Game::Tick( float a_DT ).
  • Lines that start with '//' are merely comments. The program still works if you remove or alter them.

There's quite a bit more, and even more when you explore the other source files, such as template.cpp. Feel free to do so; if you mess anything up, just download the clean template again.


Let's try some random things with this program:

  1. Change the '0' on line 20 to some other number. Make it a big number.
  2. Change the '0xffffff' on line 21 to 0xff0000. Then, change it to 0x00ff00, and finally to 0x0000ff. What happens?
  3. Change the '2,2' on the same line to '100, 20'. Also change it to '640, 20'. Change 'Clear' into 'clear' (lower case). Is there a problem?
  4. Append line 22 to line 21 (don't remove the semi-colon at the end of line 21). Is there a problem?
  5. Move the three lines in the Tick function to the Init function (they do the same thing for each frame anyway, right?).

That last change brought up an interesting issue. Even though you would expect that filling the screen once would do the job, severe flickering is what you get. The reason for this is that there are actually two screens. One screen is the screen that you see; the second screen is the one that you draw to. Somewhere between two runs of the Tick function, these screens are swapped. So, if you fill only one of them, you get to see that one 50% of the time – and the other one the other 50% of the time.

Another important concept is the screen coordinate system. Every pixel on the screen has a position: the horizontal position is called 'X', the vertical position is called 'Y'. By default, the template opens a 640 by 480 pixel window, so if you draw something at X = 620, it doesn't fit, and wraps to the left side of the screen (one pixel lower though!).

And finally, there are numbers: 0xffffff (or capitals: 0xFFFFFF) is a number too. In fact, 0x0000FF equals 255. We will discuss this in more detail at a later time.


Take a single sheet of A4, and draw an 8x8 grid on it. Label the vertical lines: 0, 80, 160, 240, 320, 400, 480, 560, 640. Label the horizontal lines: 0, 60, 120, 180, 240, 300, 360, 420, 480. Now draw 'IGAD' on this sheet, using straight lines only. Use as few lines as you can; you'll be translating each line to a line in your program, so don't make it too difficult for yourself.

Now, for each line:

  • Determine the X and Y coordinate of the start of the line (X1, Y1).
  • Determine the X and Y coordinate of the end of the line (X2, Y2).
  • Add a line to the Tick function:
        m_Surface->Line( X1, Y1, X2, Y2, 0xffffff );

And finally:

  • Make the 'I' red; the 'G' green; the 'A' blue, and the 'D' yellow.

Complete this assignment, and then you may continue with the next part. Ask for help on the forums if you get stuck!

Next Article

In the next article, we will go over the concept of variables in C++ by drawing things at different positions. Stay tuned!


Commenting will be coming soon. In the meantime, feel free to create a discussion topic on the forums.