Chapter 8 – Working with SDL Surfaces

SDL_Surfaces are the foundation of the SDL Graphics API. In this chapter I will introduce some miscellaneous functions used to process and optimize SDL_Surfaces.

Lets start with processing SDL_Surfaces. First comes color-keys. What are color-keys? Well, let’s say you have a picture like this:

Notice it has a white back-ground. Now we blit it onto the screen in an SDL Application:

    /* Loading the images */
    SDL_Surface* mario = NULL;
    mario = SDL_LoadBMP("mario.bmp");

    SDL_Rect rect_mario = { 100, 100 };
    SDL_BlitSurface(mario, NULL, screen, &rect_mario);

Here we run into a problem. How do we remove the white background? One way to do this is to use image formats like *.PNG that have an alpha channel (I’ll cover that later). The second way is to use color-keys. The RGB Value for white is {255, 255, 255}. So if we set the color-key of the surface to white, all the white pixels will be treated as transparent. Here’s the function you use to set the color key of a surface:

int SDL_SetColorKey(SDL_Surface *surface, Uint32 flag, Uint32 key);

The surface parameter is obvious. The flag parameter is usually SDL_SRCCOLORKEY, you can also clear any color-key you have set previously by passing 0 as the flag. The last value is a Uint32 representation of the RGB color, use the SDL_MapRGB() function to get this. Now let’s set a color-key to our previous image:

    Uint32 white = SDL_MapRGB(mario->format, 255, 255, 255);
    SDL_SetColorKey(mario, SDL_SRCCOLORKEY, white);

And voila! No more white background.

As for alpha blending. It is a kind of mixture (blend) of the surface and alpha pixels to produce a transparency effect. Here is the function you use:

int SDL_SetAlpha(SDL_Surface *surface, Uint32 flag, Uint8 alpha);

The surface parameter is (obviously) the surface you want to manipulate. The flag is usually SDL_SRCALPHA (for more values, see the docs). The final parameter, alpha is for setting how much transparent you want the surface to be. 0 (SDL_ALPHA_TRANSPARENT) represents a completely transparent surface, while 255 (SDL_ALPHA_OPAQUE) represents a completely opaque surface. A number between these two gives a varying degrees of partial transparency. (The batteries of my wireless keyboard have just run out so there may be some typos).

Adding the following line to our example program:

    SDL_SetAlpha(mario, SDL_SRCALPHA, 100);

We make the image partially transparent.

Now let’s discuss optimizing an SDL_Surface. To speed up the process of editing and blitting SDL_Surfaces, there are some functions.

SDL_Surface *SDL_DisplayFormat(SDL_Surface *surface);
SDL_Surface *SDL_DisplayFormatAlpha(SDL_Surface *surface);

The first function converts a given surface to the display format (i.e the format of the video surface). This makes way for faster blitting on the screen. Note that SDL_DisplayFormat returns a new surface and the previous surface should be deleted with SDL_FreeSurface() if you no longer intend to use it. Something like:

SDL_Surface* opt_surf = SDL_DisplayFormat(surf);

SDL_DisplayFormatAlpha() does essentially the same thing as the former function. In addition it adds an alpha channel to the surface. For both functions color-keys and alpha values should be set before you call the functions.

This tutorial was pretty boring ¬_¬. But at least now, since I’ve covered this, we can move onto more interesting topics. Perhaps even create some fun games!



  1. Great endeavour. Thanks for thinking of all the beginners out there. I really enjoyed the tutorials.
    Keep it plain and simple…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s