Welcome back guys. Let’s resume my last post which was Making Game using SDL: Part – 1. We discussed the variables of Graphics class. Now let’s see what functions we have used.

Graphics() Constructor:

Graphics::Graphics(){
SDL_Init( SDL_INIT_EVERYTHING );
//Set up the screen
this->screen = SDL_SetVideoMode( SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_BPP, SDL_SWSURFACE );
//Initialize SDL_ttf
TTF_Init();
//Set the window caption
SDL_WM_SetCaption( "rCricket2013", NULL );
this->textColor.b = 255; this->textColor.g = 255; this->textColor.r = 255;
}

In constructor we will initialize everything to create a screen. To use SDL, we need to first call SDL_Init(). Then what we are doing is setting up properties for a screen. We are passing the values of SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_BPP from our global values and SDL_SWSURFACE from default SDL value. You must remember that I mentioned in my previous post that everything that has SDL_ prefix is actually comming from the SDL library. So, in this case, value of SDL_SWSURFACE is also defined in SDL library.

Next, we are initializing True Type Font (TTF) by calling TTF_Init() , Since, beside graphics, we want to use Textual representation in our game. In line 8 we are setting up caption for the window and in my case I put the name of my game. At line number 9, we are setting up default font color.

load_image():

SDL_Surface *Graphics::load_image( string filename )
{
//The image that's loaded
SDL_Surface* loadedImage = NULL;

//The optimized surface that will be used
SDL_Surface* optimizedImage = NULL;

//Load the image
loadedImage = IMG_Load( filename.c_str() );

//If the image loaded
if( loadedImage != NULL )
{
//Create an optimized surface
optimizedImage = SDL_DisplayFormat( loadedImage );

//Free the old surface
SDL_FreeSurface( loadedImage );

//If the surface was optimized
if( optimizedImage != NULL )
{
//Color key surface
//Reference : http://www.colorhexa.com/ca18df
SDL_SetColorKey( optimizedImage, SDL_SRCCOLORKEY, SDL_MapRGB( optimizedImage->format, 0xca, 0x18, 0xdf ) );
}
}
//Return the optimized surface
return optimizedImage;
}

In this function we are passing an image file and after necessary modification we are returning it. We need to do this modification to make the image compatible for our screen. I hope, if you read the comments in the code and try to do some research on each of the function and strategy we used here by reading the documentation, you will understand it.

apply_surface():

void Graphics::apply_surface( int x, int y, SDL_Surface* source, SDL_Surface* destination, SDL_Rect* clip){
//Holds offsets
SDL_Rect offset;

//Get offsets
offset.x = x;
offset.y = y;

//Blit
SDL_BlitSurface( source, clip, destination, &offset );
}

This may be bit complex to understand. What we are trying to do here, take the x and y co-ordinate of screen then just put the source surface on screen. This is pretty much of it. But if you want to know what’s going on in the back, here it is: we take a single surface as source. It can be *location or *text. and then we put it to our destination surface. Most of the time which is *screen. I think you remember what I said about *screen, *location and *text.

~Graphics() destructor:

Graphics::~Graphics(){
//Freeing Surface
for(int i = 0; i location_flag; i++){
if(this->screenBackgrounds[i].location){
SDL_FreeSurface(this->screenBackgrounds[i].location);
}
}
for(int i = 0; i text_flag; i++){
if(this->screenMessages[i].text){
SDL_FreeSurface(this->screenMessages[i].text);
}
}
}

In destructor, we will free the surface so that we don’t need to free it explicitly. You know, we stored the backgrounds and Texts in two different array. So, we are running two different loops to take each one of those and free them up. Here we run the loop 0 to the the flag that mention the top of the array. It’s because we don’t need to free the full array. We are freeing each surface by calling SDL_FreeSurface() function.

 

Screen Class

Now, let’s talk about Screen class. Screen class will be used to generate a screen. Important thing is, it’ll be inherited from the class Graphics. We actually won’t use properties of Graphics class directly. We will use it only in Screen class. Let’s see the class definition.

class Screen :
public Graphics
{
public:
//The font that's going to be used
TTF_Font *font;

Screen(string, int);
bool load_background( int x = 0, int y = 0, string location = "resources/background.png");
bool load_message(int x = 0, int y = 0, string text = "" );
bool trigger_surface();
};


Here, we see only one pointer variable of type TTF_Font. If you are thinking that this pointer will point the textual properties of a screen, you are absolutely correct. Let’s take a look at the functions.

Screen() constructor:

Screen::Screen(string font_file = "resources/BuxtonSketch.ttf", int font_size = 20){
for(int i = 0; i screenBackgrounds[i].location = NULL;
this->screenMessages[i].text = NULL;
}
this->location_flag = 0;
this->text_flag = 0;
this->font = TTF_OpenFont( font_file.c_str(), font_size );
}

Here we are preparing the arrays that we described in Graphics class by putting NULL value for location. Also we are initializing flag by point it to the index number 0. and at last we are initializing *font that we described earlier by using the values from arguments. First argument is indicating the font file and second pointer is defining size of the text in pixel.

load_background() & load_message():

bool Screen::load_background( int x , int y , string location , int w , int h ){
//Load the background image
this->screenBackgrounds[this->location_flag].location = this->load_image( location.c_str());
this->screenBackgrounds[this->location_flag].location_x = x;
this->screenBackgrounds[this->location_flag].location_y = y;
this->location_flag++;
return true;
}

bool Screen::load_message( int x , int y , string text , int w , int h ){
//Load the background image
this->screenMessages[this->text_flag].text = TTF_RenderText_Solid( this->font, text.c_str(), this->textColor );
this->screenMessages[this->text_flag].text_x = x;
this->screenMessages[this->text_flag].text_y = y;
this->text_flag++;
return true;
}

Both of these are pretty much same. 1st one is loading or putting an image to the screenBackgrounds array and 2nd one is loading or putting text in screenMessages array. we are also increasing flag value by one. We are using the optimized image that we get from the load_image() function of Graphics class to save it in *location.

trigger_screen():

bool Screen::trigger_surface(){
for(int i = 0; i location_flag; i++){
if(this->screenBackgrounds[i].location != NULL){
this->apply_surface(this->screenBackgrounds[i].location_x, this->screenBackgrounds[i].location_y, this->screenBackgrounds[i].location, this->screen, NULL );
}
}
for(int i = 0; i text_flag; i++){
if(this->screenMessages[i].text != NULL){
this->apply_surface(this->screenMessages[i].text_x, this->screenMessages[i].text_y, this->screenMessages[i].text, this->screen, NULL );
}
}

SDL_Flip( this->screen );
return true;
}

This function will just loop through those two array and trigger/apply it by using the app_surface function defined in Graphics class.

 

So, that’s all of Screen class. In our next part we will start constructing our game. Till now we just configured necessary functions to create screens and graphics. We will start implementing these in our next part. Before that, try to understand what these functions and variables will do. Hope, you will be clear when you see the implementation. Thanks you all. Bye bye…

 

 

Few days ago I started to develop a cricket game for one of my university courses. I decided to use SDL Library to make the game. Since I wanted to develop a very basic 2D Game in C++, so I didn’t go for OpenGL or DirectX. SDL will provide almost everything to make this game. Besides this, SDL also have functionality to use OpenGL. That’s why I went for SDL Library. So, I started to learn SDL and start working. I’m sharing here how I’m making this game using SDL.

Lazyfoo has an wonderful resource for beginners in SDL. I’ve used MS Visual Studio 2012. Click here to see how to include SDL Library in various platforms. After inclusion, I’ve spent a day to try and learn how SDL Library work and it’s basic functionalists.You can take a look at those tutorials also.

Planning:

At night I designed the basic structure and functionalists of my game. Here what came to my mind that time.

Classes:

• Graphics
• Screen
• Game
• Events
• Teams
• GameEngine

 

Game flow:

1. Welcome Screen
2. Team and Game Setting Selection
3. Toss
4. Game Info display and wait for User confirmation
5. Start Game

Game will have following functionality:

1. Pitch pointing for bowling
2. Shot selection for batting
3. Running between wickets on user input
4. Basic functions of a cricket game
5. Batsman shot success will depend on difference between his Rating point & bowlers Rating point, shot selection for a particular delivery.

Obviously there will be some changes in this plan during the development process.

Coding:

I started coding from the following day. At first I created a class named graphics to hold all graphical properties. Today I’m going to describe only this class.

The main purpose of this class to hold the functions and variables to generate a Screen. We will see the Screen class later on. Let’s just see what I put in the Graphics class. Here what variables and functions I will have in that class .


class Graphics{
public:
//The color of the font
SDL_Color textColor;

//The surfaces
background screenBackgrounds[MAX_SCREEN_ELEMENT];
message screenMessages[MAX_SCREEN_ELEMENT];
int location_flag ;
int text_flag ;

SDL_Surface *screen;

Graphics();
~Graphics();
SDL_Surface *load_image(string);
void apply_surface( int, int, SDL_Surface*, SDL_Surface*, SDL_Rect* clip = NULL );

};

Initially I planned to put everything under public access. I know it’s not a good idea. But, since I’m new to SDL and trying to develop a game, so I wanted to avoid complexity. I’ll place them in private and protected after I finish the main coding.

Let’s take a look at the class in depth. To set text color of a particular screen, I declared a textColor variable. Note that, all variable type, started with SDL_ you will see in this project are form SDL library. So for detail reference of them please take a look at SDL Documentation .

We will have two types of thing in a single screen. images/pictures/backgrounds and text. So here we defined an array of background type to contain images for a single screen and another array of message type to contain text/messages for a single screen. background and message are just two structure. Here are those two structure…

struct background
{
SDL_Surface *location;
int location_x;
int location_y;
};

struct message
{
SDL_Surface *text;
int text_x;
int text_y;
};

So, here you see, values for each. For background, 1st one is for having the location of the image file and for message, 1st one is for holding the text. both location_x and text_x are to store the position in X-co-ordinate of that particular image or text and location_y and text_y are to store position in Y-Co-ordinate of the window. By the way, our window width and height will be 1024×768. This values are defined as global constant including the value of MAX_SCREEN_ELEMENT, which you’ve seen as the array length. Here is the code.


//Screen attributes
const int SCREEN_WIDTH = 1024;
const int SCREEN_HEIGHT = 768;
const int SCREEN_BPP = 16;
const int MAX_SCREEN_ELEMENT = 100;

You may wonder to see SCREEN_BPP. It’s screen bit per pixel. We will use this value soon. Next, the location_flag and text_flag are to flag top index of the array screenBackgrounds and screenMessages.  pointer *screen will actually hold the screen or surface.

The key thing you should remember is, *screen, *location and *text all are same type (SDL_Surface type pointer). But we will actually put all *location and all *text in that single *screen. It’s like, putting plate with different types and colors in a single big plate.

 

So, that’s pretty much of variables of this class. I will discuss about the functions in next part. Till then, have a nice time… Good bye.