Retro Gaming Hacks, Part 2: Add Paddles to Pong

In this hack, I will show you how, with the help of sprites, you can create and animate player-controlled paddles for the SDL Pong clone you built in part one of this three-part series (part three is also online). For the uninitiated to the spidery language of video game programmers, a sprite is "a small graphic that can be moved independently around the screen, producing animated effects." Some might argue that the SDL_Rect-based "sprites" we will use to represent the two paddles in our game are not proper sprites at all, but as I could not think of a better way to refer to them, sprites they are.

Sprites a Go-Go

The first thing you will need to do is add some macros to control the initial positions of the sprites. It will once again be handy to grab your old geometry book, as well as a heap of scratch, or even graph, paper. The tricky part about 2D computer graphics is that you must make use of a so-called left-handed coordinate system. This sounds daunting, but it is as simple as taking a normal X-Y graph, throwing away all but the upper-right quadrant, and then having the audacity to suggest that Y=0 is not in the bottom left-hand corner of the quadrant, but rather in the top left. And to top it all, Y values increase as you move down in the quadrant. Revolutionary, I know.

If you are having trouble wrapping your head around this, simply imagine it's 1996 and your monitor is running in 640 by 480 resolution. Point your finger to the upper left-hand corner. You are now at (0,0). Move your finger halfway down the screen, but keep it flush with the left side of the screen. This is (0,240). Move all the way down and you are at (0,479) (not 480, since the screen is only 480 pixels tall and we started counting, like all good coders do, at 0). Move all the way right and you are at (639,479). All the way up from there is (639,0). Finally, put your finger right in the middle of the screen. That is (320,240) and that is where we want to place our ball.

Right, so back to the coding. Add these lines to the section where you are declaring macros, right beneath the screen width and height:

Does all of this make sense, within the context of the devious left-handed coordinate system? The ball is a 4-by-4 rectangle (since X comes before Y in a coordinate set, I will always talk about width before height, to avoid confusion and brain malfunctions), and it is sitting right in the middle of the screen. We will track all three of our sprites by their upper left-hand corners, so positioning the upper left-hand corner of the ball at (318,238) results in it being centered. Player 1's paddle starts at (0,215), and extends five pixels to the right and 50 down. Player 2's paddle starts at (635,215), and also extends five pixels to the right and 50 down, putting its right edge against the right edge of the screen, just as the left edge of Player 1's paddle is flush with the left edge of the screen.

The next step is to create a structure that will hold all of our sprite-related information, as well as all of our game state. If you decide to write a game in C++, you would probably use a class for this, but we shall forge on bravely in pseudo object-oriented C. Add the following code just beneath the Structure definitions comment: