CSIS 10B Lab 2 Game Programming!

Installing the SDL Graphical API SDL Generic project Demo  A bubble animation

+++++++++++++++++++++++++++++++++++++++++

INSTALLING THE SDL GRAPHICAL API (Penton, Appendix C)

Installation The two SDL library files are on the CD and on my webpage under "online resources" Make sure you install both SDL and SDL_TTF, which handles fonts for text displays Programs that use SDL need to be distributed with the SDL.DLL and SDL_TTF.DLL dynamic link libraries, also on the CD and in the demo projects

SDL Installation Overview for your Home Computer (Lab PCs are already set up) 1) download, unzip and install the libraries on the C: drive.

In general, the game projects must also contain additional compiler instructions. But if you always start with a working project, you won’t need to worry about those.

Detailed Instructions for step 1 1) click on the links below, download and unzip the two SDL libraries, expand them both into C:/Program Files/SDL (make an SDL directory in program files)

SDL Downloads: SDL_ttf-2p0p5.zip SDL-1p2p4.

++++++++++++++++++++++++++++++++++++++++++++++++++++++ SDL Generic project Demo A bubble animation

In general, when you start a new game project, you should begin with a working project by making a new copy of a working project folder and modifying the contents of the programs already included. This way you save the work needed to build a new game project from scratch, a tedious operation that requires you to configure the project settings and include all the necessary libraries. Not covered in this handout! Refer to Penton appendix C if you are really interested.

This demonstration will start with a blank generic project and transformed it into a working animation of a simple bubble.

Open the folder "generic project" and open the project file Project.vcproj OR Project.sln. This project includes the file GenericMainStart.cpp And the file SDLHelpers.cpp. It also

1 2 contains the header file that we developed last year called csis10b.h. This file contains some functions that make using the SDL library easier. We made functions called SDL_Initialize, to initialize the SDL graphics environment; ClearScreen, to clear the screen and replace it with a certain color background; and two Label Functions to insert labels of integer variables and string messages on the game screen.

You can begin by running the project and see that it just generates a white screen with no animation. We are going to perform the following steps to transform the program into a simple bubble animation. You can try typing in these modifications, but a more practical approach might be to open this file in word and copy the statements of over from word to the C++ file. The changes you're going to make are labeled in the file with comments relating to the number of the step being performed //1 for Step one, Etcetera.

1) the initialize function we created last year lets us set the title of the game in the title bar of the window. Change the title displayed on the game window by modifying the string in parentheses in the SDL_Initialize function at //1.

//1 SDL_Initialize("Simple Graphics Demo" );

2) each time through the game cycle, the screen must be erased so the images can be redrawn in a new position. This is done with a function called ClearScreen. Change the background color displayed by modifying the argument in parentheses in the call to clear screen, Found at //2 in the program.

//2 each time through clear the screen to white (erase old screen) ClearScreen(BGRND); // or YELLOW, RED, LTBLUE, GREEN

When you're finished, change the color back to BGRND, the default color defined in the file CSIS10B.h

3) Images used in the game must be represented with a pointer to a bitmap. Create two pointers that will point to a bitmap image (SDL_Surface) stored in memory. Insert this code right before the main function definition (at //3A).

//3A declare 2 pointers to bitmap images SDL_Surface* redbitmap; SDL_Surface* blackbitmap;

By defining these pointers before main, we're making them global. This means we don't have to pass them as parameters to functions. They will point to bitmap images in memory. The handling of these pointers is done with various SDL functions, so it won't be very difficult to work with them.

To load the bitmap images in the main program, put the following statements four lines below the beginning of the main program (at //1B)

// 3B load bitmaps and make their white backgrounds transparent redbitmap=SDL_LoadBMP( "circlered.bmp" ); blackbitmap=SDL_LoadBMP( "circleblack.bmp" ); MakeTransparent(redbitmap, WHITE); MakeTransparent(blackbitmap, WHITE);

The first two statements above Load in a bitmap image from a file in the same folder as the project. If the bitmap file is not there or you spell the file name incorrectly, the program will crash!

The second two statements prevent the images from blocking each other when they slide across one on top of the other. It makes all the pixels that are white in the image transparent to images that may slide beneath them.

Finally, at the end of the main function definition, you need to free the memory allocated for the bitmap images so that you don't get a memory leak when the program finishes. The following statements should be placed right before the return 0 ; statement.

//3C do game cleanup here SDL_FreeSurface(redbitmap); SDL_FreeSurface(blackbitmap);

4) now you need to set up the initial coordinates for the bubble to appear on the screen. We are using the variables x and y, which are already declared right at the top of the main function. You can set the value of these variables at //4:

//4 initialize X. and Y. coordinates for your circle x=250; y=450;

They are already set for the bubble to appear at the bottom of the screen in the center. You can modify them but make sure the X value is below 600 and the Y value is below 450.

5) now you can place the command to draw the bubble on the screen. This goes after the clear screen command we played with the above. After the screen is cleared, the bubble can be drawn. The command is a little cryptic, what it means is the black bitmap image is going to be inserted into the g_window image (a bitmap representing the entire game window) at position x,y:

// 5 Draw your black circle at it's current x, y onto g_window SDLBlit(blackbitmap,g_window, x,y);

6) after you draw the bubble, you can also display an indicator of the current position of the bubble. The label function is designed to display either a string in quotation marks or an integer. The two numbers indicate the X, Y position where the label will be placed. You can experiment by moving these locations to different parts of the screen.

// 6 Add an indicator of the bubble X,Y value Label("X: ",450,10); Label( x, 500, 10); Label("Y: ",550,10); Label( y, 600, 10);

At this point, you should try to rebuild the project and run it and see if you get a bubble appearing on the screen. Correct any errors you might have made before proceeding.

7) at this point the bubble appears on the screen, but it is static. Well, not quite. Because the mouse Handler is set up to retrieve the mouse position and store the point where the mouse was clicked in the x,y variables, when you click your mouse on the screen, you will move the bubble.

The lines that retrieve the mouse coordinates are in the event handling routine you can find them by searching for these lines (but don't change these lines)

if( event.type == SDL_MOUSEBUTTONDOWN ) { // get the mouse state. SDL_GetMouseState( &x, &y ); } if( event.type == SDL_MOUSEBUTTONUP ) { // get the mouse state. SDL_GetMouseState( &x, &y ); }

Notice they are passing the address of the X and Y variables. Those addresses would be passed to pointer parameters in the functions themselves.

8) In order to move the bubble, you can define instructions in another portion of the event Handler that looks for whether the arrow keys have been pressed. You can find this code at the //8. Your job is to fill in the definitions of these handlers which are currently blank { } with the instructions necessary to move the bubble x and y position.

//8 The Arrow Handling Instructions if( event.key.keysym.sym == SDLK_UP ) { // process the up arrow key event } if( event.key.keysym.sym == SDLK_DOWN )

{ // process the down arrow key event } if( event.key.keysym.sym == SDLK_LEFT ) { // process the left arrow key event } if( event.key.keysym.sym == SDLK_RIGHT ) { // process the right arrow key event }

For this step, you need to modify the y coordinate to make the bubble move up (y=y-10;) or down (y=y+10; ) and the x coordinate to make the bubble move left or right.