• Part I – Getting Started
• Part II – Drawing a Quad

Rendering a Quad with OpenGL and SDL

Ok, so if we are going to program a video game then we need to draw something with OpenGL.

That being said, last time we left off with a basic framework for creating a game with SDL. If you haven’t read it then you should check out part 1 here because we’ll be building off of that. This time around the goal is simply to get something rendering on the screen with OpenGL. So with that in mind here is the road map for what I wanted to accomplish:

• Render a single quad
• Render a textured quad

As you can see I am going to keep it simple for now. I’ll throw in the ability to swap textures at runtime as well just to keep it interesting.

The game so far will look a little something like this:

Drawing a Square With SDL

First on the list is to render a single quad. But, before you do anything make sure you add the OpenGL libraries to your project. You can accomplish that by going into the linker section of the project settings and adding opengl32.lib and glu32.lib to the additional dependencies section, just as we did for the SDL libraries in Part I.

I am just going to start out showing you the new main function and then we will go through it step by step. So here ya go!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

int main( int argc, char **argv)
{
        // graphics properties
	const int width = 640;        // width of the game window 
	const int height = 480;       // height of the game window
	const float fov = 45.0f;      // field of view (degrees)
	const float nearClip = 1.0f;  // near clip plane (don't set to zero)
	const float farClip = 100.0f; // far clip plane
 
	// initialize SDL
	if( SDL_Init( SDL_INIT_VIDEO ) == -1 )
	{
              fprintf(stderr, "Failed to initialize SDL. [%s]\n", SDL_GetError());
              exit(1);
	}
 
	// set desired OpenGL attributes prior to selecting a video mode
	SDL_GL_SetAttribute( SDL_GL_DEPTH_SIZE, 16 );  // use 16 bits for depth buffer
	SDL_GL_SetAttribute( SDL_GL_DOUBLEBUFFER, 1 ); // enable double buffering
 
	// create an OpenGL surface/window
	SDL_Surface *screen = SDL_SetVideoMode(width, height, 32, SDL_OPENGL);
        if( screen == NULL )
        {
              fprintf(stderr, "Failed to set video mode. [%s]\n", SDL_GetError());
              exit(1);
        }
 
	// initialize OpenGL
	if( SetupOpenGL( width, height, fov, nearClip, farClip) == -1 )
	{
		fprintf( stderr, "Failed to setup OpenGL.\n" );
		exit(1);
	}
 
	// main game loop
	bool done = false;
 
	while( !done )
	{
		RenderScene();
 
		if( ProcessInput() )
			done = true;
	}
 
	SDL_Quit();
 
	return 0;
}

The variable declarations on lines 4-8 just control the graphical properties of the application. They’re pretty self-explanatory. You can change the width or height and so on.

Next up you’ll see that the code to initialize the video mode (lines 17-27) has been changed. SDL gives us certain attributes that can modify the behavior of OpenGL, but these changes only take place after a call to SDL_SetVideoMode. In this case we’re telling SDL that we would like OpenGL to use a 16-bit depth buffer and to use double buffering when rendering (actively draws to an off screen surface, not the screen). Note that technically we should check the value of these attributes after the SDL_SetVideoMode call to ensure that they were set successfully. You could (and technically should) do this with the correct calls to SDL_GL_GetAttribute. You’ll also notice that the flags parameter for SDL_SetVideoMode now uses SDL_OPENGL instead of SDL_SWSURFACE since we are specifying that we want to use OpenGL for drawing.

Following the setting of the video mode I make a call to SetupOpenGL which is going to configure OpenGL for the application. I’ll detail this function shortly. The last major change to the code is the addition of RenderScene in the main loop. This is the function that will actually draw the game on the screen. Everthing should seem pretty straight forward.

Configuring OpenGL

So now I am going to show you SetupOpenGL. The entire purpose of this function is simply to setup things with respect to OpenGL that we won’t be changing again or that need a known initial state. It’s pretty simple stuff.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

int SetupOpenGL( int width, int height, float fov, float nearClip, float farClip )
{
	glClearColor( 0.0f, 0.0f, 0.0f, 0.0f );
 
	float ar = (GLfloat)width / height; // display aspect ratio
 
	// setup projection matrix
	glMatrixMode(GL_PROJECTION);						
	glLoadIdentity();						
	gluPerspective(fov, ar, nearClip, farClip);
 
	// setup model view matrix
	glMatrixMode(GL_MODELVIEW);			
	glLoadIdentity();
 
	// setup depth buffer
	glClearDepth(1.0f);						
	glEnable(GL_DEPTH_TEST);						
	glDepthFunc(GL_LEQUAL);	
 
	// misc. GL settings
	glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
	glShadeModel(GL_SMOOTH);
 
	glViewport( 0, 0, width, height );
 
	return 0;
}

Here I do some basic setup work:

• Setup the projection matrix with gluPerspective
• Set the view matrix to identity
• Setup the depth buffer
• Setup some various GL settings such as the shade model
• And finally setup the viewport

If that looks like gably gook to you then you should check out the the OpenGL Red Book. The 3D transformation pipeline, matrix math, etc is a vast subject and beyond the scope of this post.

Render Scene

Next let’s look at the render scene function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

void RenderScene( void )
{
	// render everything for the current frame
 
	glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
	glMatrixMode( GL_MODELVIEW );
	glLoadIdentity();
 
	// move off center so the quad is visible
	glTranslatef(-1.0f, 0.0f, -5.0f);
 
	// draw quad as red
	glColor3f( 1.0f, 0.0, 0.0 );
 
	// render the quad
	glBegin(GL_QUADS);						
		glVertex3f(-1.0f, 1.0f, 0.0f);				
		glVertex3f( 1.0f, 1.0f, 0.0f);				
		glVertex3f( 1.0f,-1.0f, 0.0f);				
		glVertex3f(-1.0f,-1.0f, 0.0f);			
	glEnd();
 
	// update display
	SDL_GL_SwapBuffers();
}

So this function will be called every frame to draw the entire screen or “scene”. In this example, it’s simply drawing a red quad on the screen. What’s happening should be clear. First the framebuffer is cleared to get rid of the last scene. Then the identity matrix is loaded into the view matrix so that we are in the center of our world. After that the “camera” is positioned slightly to the left and back a little so the quad is nice and visible. Also, remember OpenGL uses a right handed system so to move the camera back we move along the negative z-axis. Moving on, the active color is then set to red and the quad is drawn vertex by vertex inside the glBegin/glEnd calls. Note that we are not culling back faces so we don’t worry about vertex winding order. Finally a call to SDL_GL_SwapBuffers is made so that the output can be seen. You should see a nice pretty red square.

ProcessInput

The ProcessInput function is responsible for reacting to input events like key presses. Basically it’s the same code from the last example moved into its own little function. It returns true to indicate that the user has indicated he would like to exit the game. Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

bool ProcessInput( void )
{
	// runs the input processing loop
	// returns true if any input has requested the application to exit
 
	SDL_Event evt;
	bool exitFlag = false;
 
	// check for events generated from SDL
	while( SDL_PollEvent( &evt ) )
	{
		switch( evt.type )
		{
		case SDL_QUIT:
			exitFlag = true;
			break;
 
		case SDL_KEYUP:
			if( evt.key.keysym.sym == SDLK_ESCAPE )
				exitFlag = true;
			break;
 
		default:
			break;
		}
	}
 
	return exitFlag;
}

Complete Code Listing

Ok, that was great fun. Now, behold the entire code listing!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

#include <windows.h>
 
#include <gl\gl.h>
#include <gl\glu.h>
 
#include <sdl.h>
#include <sdl_opengl.h>
 
// function prototypes
int SetupOpenGL( int width, int height, float fov, float nearClip, float farClip );
void RenderScene( void );
bool ProcessInput( void );
 
int main( int argc, char **argv)
{
	// graphics properties
	const int width = 640;        // width of the game window 
	const int height = 480;       // height of the game window
	const float fov = 45.0f;      // field of view (degrees)
	const float nearClip = 1.0f;  // near clip plane (don't set to zero)
	const float farClip = 100.0f; // far clip plane
 
	// initialize SDL
	if( SDL_Init( SDL_INIT_VIDEO ) == -1 )
	{
		fprintf(stderr, "Failed to initialize SDL. [%s]\n", SDL_GetError());
		exit(1);
	}
 
	// set desired OpenGL attributes prior to selecting a video mode
	SDL_GL_SetAttribute( SDL_GL_DEPTH_SIZE, 16 );  // use 16 bits for depth buffer
	SDL_GL_SetAttribute( SDL_GL_DOUBLEBUFFER, 1 ); // enable double buffering
 
	// create an OpenGL surface/window
	SDL_Surface *screen = SDL_SetVideoMode(width, height, 32, SDL_OPENGL);
        if( screen == NULL )
        {
		fprintf(stderr, "Failed to set video mode. [%s]\n", SDL_GetError());
		exit(1);
        }
 
	// initialize OpenGL
	if( SetupOpenGL( width, height, fov, nearClip, farClip) == -1 )
	{
		fprintf( stderr, "Failed to setup OpenGL.\n" );
		exit(1);
	}
 
	// main game loop
	bool done = false;
 
	while( !done )
	{
		RenderScene();
 
		if( ProcessInput() )
			done = true;
	}
 
	SDL_Quit();
 
	return 0;
}
 
int SetupOpenGL( int width, int height, float fov, float nearClip, float farClip )
{
	glClearColor( 0.0f, 0.0f, 0.0f, 0.0f );
 
	float ar = (GLfloat)width / height; // display aspect ratio
 
	// setup projection matrix
	glMatrixMode(GL_PROJECTION);						
	glLoadIdentity();						
	gluPerspective(fov, ar, nearClip, farClip);
 
	// setup model view matrix
	glMatrixMode(GL_MODELVIEW);			
	glLoadIdentity();
 
	// setup depth buffer
	glClearDepth(1.0f);						
	glEnable(GL_DEPTH_TEST);						
	glDepthFunc(GL_LEQUAL);	
 
	// misc. GL settings
	glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
	glShadeModel(GL_SMOOTH);
 
	glViewport( 0, 0, width, height );
 
	return 0;
}
 
void RenderScene( void )
{
	// render everything for the current frame
 
	glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
	glMatrixMode( GL_MODELVIEW );
	glLoadIdentity();
 
	// move off center so the quad is visible
	glTranslatef(-1.0f, 0.0f, -5.0f);
 
	// draw quad as red
	glColor3f( 1.0f, 0.0, 0.0 );
 
	// render the quad
	glBegin(GL_QUADS);						
		glVertex3f(-1.0f, 1.0f, 0.0f);				
		glVertex3f( 1.0f, 1.0f, 0.0f);				
		glVertex3f( 1.0f,-1.0f, 0.0f);				
		glVertex3f(-1.0f,-1.0f, 0.0f);			
	glEnd();
 
	// update display
	SDL_GL_SwapBuffers();
}
 
bool ProcessInput( void )
{
	// runs the input processing loop
	// returns true if any input has requested the application to exit
 
	SDL_Event evt;
	bool exitFlag = false;
 
	// check for events generated from SDL
	while( SDL_PollEvent( &evt ) )
	{
		switch( evt.type )
		{
		case SDL_QUIT:
			exitFlag = true;
			break;
 
		case SDL_KEYUP:
			if( evt.key.keysym.sym == SDLK_ESCAPE )
				exitFlag = true;
			break;
 
		default:
			break;
		}
	}
 
	return exitFlag;
}

Wrap Up

Well, now we can at least draw something on the screen. I wanted to do textures on this post but it is already getting pretty lengthy. So, next time we will texture map the quad and work another step closer to having some kind of game programmed.

Have fun!

• Part II – Drawing a Quad

Getting Started

I think I’ve spent too many late nights playing multiplayer Modern Warfare 2 and now I feel the need to build a small game of some kind. Game programming is fun, and although I’ve never done it professionally, I have dabbled with it as a hobby for many years. I’ll be documenting my progress here over time via a number of different postings. Maybe some of you will find it useful as a reference or small SDL tutorial or game programming tutorial. That being said, time to get to work!

I have no idea what type of game to build yet so the first thing to do is just get the basic framework setup. I’ll be using C++ for this game project. I thought about using C# and XNA but I need to dust off my C++. For the graphics system I decided to use OpenGL. This is mostly because I am familiar with it and didn’t want the extra overhead of boilerplate setup stuff associated with DirectX. I just want to get something going quickly. For the rest of the stuff needed (audio, input, etc) I am going to use SDL. SDL is a great tool to get things up and running fast and it easily interfaces with OpenGL. I am also thinking about putting in some UI stuff using CEGUI (Crazy Eddie’s GUI System).

SDL Setup Prerequisites

Before we get started you’ll want to make sure you have the SDL development libraries (I am using version 1.2.14). You can find them on the SDL website: http://www.libsdl.org. The ones I used specifically are:

• Runtime – http://www.libsdl.org/release/SDL-1.2.14-win32.zip
• Library (Visual Studio 2008) – http://www.libsdl.org/release/SDL-devel-1.2.14-VC8.zip

Creating the Project

Ok enough talk, let’s get started. You’ll need to create a new project and correctly configure it to use the SDL library. Fire up Visual Studio and create a new C/C++ console project. In the project wizard, uncheck the “Using Precompiled Header” option and check the “empty project” option. Now, add a new file and call it main.cpp.

In the Solution Explorer, right click your project and select properties. Open the C/C++ settings and select the general property page. Under the item “additional include directories” enter the path to the SDL SDK header files (i.e. C:\YourSDLDir\SDL-1.2.14\include).

Now, drop down to the Code Generation page and under “Runtime Library” select “Multi-threaded DLL”. If you try to link with the debug build of the runtime you’ll see a nice error message like this one:

warning LNK4098: defaultlib ‘msvcrt.lib’ conflicts with use of other libs; use /NODEFAULTLIB:library

This is because the SDL runtime is not a debug build. I couldn’t find a debug build on the SDL website so I guess if you want one you have to build it from source.

That takes care of the C/C++ settings so now let’s do the linker settings. Under the linker settings select the general page. Under additional library directories enter the path to the lib directory for your SDL SDK (i.e. C:\YourSDLDIR\SDL-1.2.14\lib). On the input page 2 files need to be listed as additional dependencies.

• SDL.lib
• SDLmain.lib

Also, make sure you grab SDL.dll from the SDK and put it in your debug folder along side the executable you build.

And that’s it! Go ahead and compile your application to make sure you set everything up correctly.

Basic SDL Usage

Next we will fill out main.cpp to get a basic SDL skeleton application running. Start out by including the SDL header file.

#include <sdl.h>

Now add the main function:

int main( int argc, char **argv)
{
     return 0;
}

Now, an interesting thing to note here is that’s not really your normal main function. It’s not even the main entry point into your application. SDL redefines main using a #define to SDL_main. This also means that you cannot change the function signature as you normally could for a main function. SDL_main just does some basic housekeeping/setup stuff on behalf of SDL.

SDL Initialization

Next up we need to initialize the SDL system. This is accomplished via SDL_Init. Go ahead and add the following to your main function.

if( SDL_Init( SDL_INIT_VIDEO ) == -1 )
{
   fprintf(stderr, "Failed to initialize SDL. [%s]\n", SDL_GetError());
   exit(1);
}

This will initialize SDL and the video subsystem. If it fails, it will print an error message to the standard error stream. Since we have a console app, this information will be printed directly to the console. Note the usage of SDL_GetError. This is a great tool to help determine why an SDL function call failed. It simply returns a pointer to a null-terminated string containing a description of the last failure.

The next thing to do is setup a video mode. This will give us a window and a drawing surface so we can actually render game content to the screen. Add the following code after the SDL_Init block.

SDL_Surface *screen = SDL_SetVideoMode(640, 480, 32, SDL_SWSURFACE);
if( screen == NULL )
{
   fprintf(stderr, "Failed to set video mode. [%s]\n", SDL_GetError());
   exit(1);
}

This will get us a window and a surface to draw on that’s 640×480 with 32 bits per pixel. The video surface will be created in system memory as opposed to say video memory thanks to the SDL_SWSURFACE flag. That’s ok for now. Also note that you could create the application in fullscreen mode by specifying SDL_FULLSCREEN for the last parameter.

Now we’re going to add the main game loop. Game loops can get pretty complicated but we will keep it simple here. For now we only need to check user input. So let’s add the following code now.

Game Loop & Event Processing

SDL_Event evt;
bool done = false;
 
while( !done )
{
        while( SDL_PollEvent( &evt ) )
	{
		switch( evt.type )
		{
		case SDL_QUIT:
		  done = true;
		  break;
 
		case SDL_KEYUP:
		  if( evt.key.keysym.sym == SDLK_ESCAPE )
		       done = true;
		  break;
            default:
                  break;
		}
	}
}

Ok, so what’s going on here is that for every trip through the game loop we are emptying the SDL event queue and processing the events. SDL stores all kinds of events for us such as key presses, mouse movement, and joystick input. In this case, we want to know if the user wants to quit the application (SDL_QUIT) or if the user presses the escape key (SDL_KEYUP). In both cases we simply set done to true to signal the main loop to bail. SDL_Event is a union with all kinds of interesting structures in it. You should have a look at it in the SDL documentation.

The last thing that needs to happen is to shutdown the application. We can accomplish that with a simple call to SDL_Quit.

So, without further ado, here is the complete skeletal SDL game code that simply creates a 640×480 window and waits for the user to press escape or close the window.

Full Code Listing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

#include <sdl.h>
 
int main( int argc, char **argv)
{
	SDL_Event evt;
	bool done = false;
 
	// initialize SDL
	if( SDL_Init( SDL_INIT_VIDEO ) == -1 )
	{
            fprintf(stderr, "Failed to initialize SDL. [%s]\n", SDL_GetError());
            exit(1);
	}
 
	// create a software surface/window
	SDL_Surface *screen = SDL_SetVideoMode(640, 480, 32, SDL_SWSURFACE);
        if( screen == NULL )
        {
            fprintf(stderr, "Failed to set video mode. [%s]\n", SDL_GetError());
            exit(1);
        }
 
	// main game loop
	while( !done )
	{
		// check for events generated from SDL
		while( SDL_PollEvent( &evt ) )
		{
			switch( evt.type )
			{
			case SDL_QUIT:
				done = true;
				break;
 
			case SDL_KEYUP:
				if( evt.key.keysym.sym == SDLK_ESCAPE )
					done = true;
				break;
 
			default:
				break;
			}
		}
	}
 
	SDL_Quit();
 
	return 0;
}

Fun Stuff to Try

So, here’s some fun stuff to try to understand a little more about making things happen in SDL.
Try adding this snippet of code to see how to fill or clear the screen (SDL surface) with a different color. Before the main game loop add this:

Uint32 color1 = SDL_MapRGB(screen->format, 0x00, 0x00, 0xFF);
Uint32 color2 = SDL_MapRGB(screen->format, 0x00, 0xFF, 0x00);
Uint32 currentColor = color1;

And, your SDL_KEYUP processing code in your main loop should look like this:

case SDL_KEYUP:
   if( evt.key.keysym.sym == SDLK_ESCAPE )
      done = true;
   else if( evt.key.keysym.sym == SDLK_SPACE )
   {
      currentColor = ( currentColor == color1 ) ? color2 : color1;
      SDL_FillRect( screen, NULL, currentColor);
      SDL_UpdateRect(screen, 0, 0, 0, 0);
   }
   break;

Now, every time your press the space key the screen color will alternate between green and blue.

Another thing you can do is when processing the key stroke is display the character pressed in the console window. You can do that like this:

case SDL_KEYDOWN:
   printf( "KEYDOWN: %c\n", evt.key.keysym.unicode);
   break;

But you have to remember to enable Unicode support within SDL. Do that with a call to SDL_EnableUNICODE(1) in the initialization code prior to the main game loop.

What Next?

Well that’s it for now. You now have a basic game setup using SDL. It also shows some basic ways to manipulate the screen and process SDL events. Next time I am going to start integrating OpenGL and get something fun on the screen.

If you have any questions or comments let me know. See ya next time!!!