Creating Sprites for the Scoring System

Now that I have created the bare bones of Pong, I want to focus on other parts of the game. Pong definitely needs some kind of a scoring system, so I’m either going to have to find a way of displaying text on the screen or I’m going to need to graphically draw the score. It’s actually easy to display text with SDL, but this requires another library installation called SDL_ttf. I’m not going to go in that direction yet. Instead I’m going to paint the score myself by creating a sprite sheet using the GIMP. This can also be done with other paint programs such as Photoshop and Paint Shop Pro. After creating the sprite sheet, I will use color keying to clear the background and then I will crop the sheet to load each individual sprite; doing it this way won’t be that much different from displaying a regular sprite like the paddles or the ball.

Since I don’t have money to buy Photoshop or Paint Shop Pro, I’m going to use the GIMP to create the sprites. I already have it installed on my system. I open up the GIMP and start a new 800 x 200 image.

Next I select the Text tool and use it to insert a text box into my image. I double-click on the Text tool icon to open the Tool Options dialog box and I pick out a font and a font size. A font size bigger than 62 px will do nicely.

Choosing a font type is rather important. I want to find something that will give Pong a classic game feel. Perhaps something with a futuristic or a sci-fi theme; or maybe something that brings back memories of old gaming systems like the Atari. In any case, there’s tons of free fonts to choose from on the internet. It’s easy to look for one to download and install. A good resource for free fonts is simplythebest.net.

Okay, so let’s say I have a font I want to use. Mine is the Chintzy font. To make it available to the GIMP, I first install it using the Control Panel, then I hit the refresh button in the font dialog box. Now it should be available for me to choose.

The next thing I do is type from 0 to 9 inside the text box like this: 0 1 2 3 4 5 6 7 8 9

Now I’m ready to do some painting. I first select the Bucket tool and use RGB color 255, 0, 255 in the Change Foreground Color dialog. This color is my color key that I will use for the sprite sheet. A color key is simply a color that tells SDL how it should separate the background from the sprite images. When I want to display a sprite on the screen, the RGB color 255, 0, 255 will be cleared out so that only my sprite image will show. If I didn’t have a color key, SDL would not know what part of the sprite sheet is my image and which part is the background.

Once I have picked my color, I click on the background to fill it up.

Next I go to View->Zoom and zoom in at about 800%. I want to use the Bucket tool to make my numbers white instead of black.

I change my color back to white and I start clicking inside the outlines of each digit using the Bucket tool. This should make them all white. I now have this on my screen:

Using the crop tool (Shift + C), I cut out the numbers from the background.

That should take care of the sprite sheet for the scoring system. To use it, I load it like a regular graphics file except that I also call the SDL_SetColorKey function and initalize the color key to RGB 0xFF 0×00 0xFF, the color of my background. When I want to blit the surface, I pass the coordinates of the source rectangular section of my sprite sheet (using an SDL_Rect) to the SDL blitting function. For example, if I want to display the number “0″ I would need to initialize an SDL_Rect that has x=0, y=0, w=70, and h=80. The numbers w and h came from the actual sprite sheet that I just created. Using the GIMP ruler to measure the sections, I can easily see that if I cut out a rectangle starting at (0,0) and go 80 units down and 70 units right I get the section that has the number “0″ on my sprite sheet. I can get the rest of the coordinates for the other digits the same way.

To test out how my digits will look like in the game, I created a simple program that goes through all the sprites starting from 0 and ending in 9.