Chapter 7 – Images in SDL

Images are a crucial part of modern games. They are used for sprites, backgrounds, effects, tiles, intros and a lot of other stuff. Below is a screen-shot from SNK’s “The King of Fighters 2002” (Kyo is about to hit Iori with his Orochi Nagi).

In SDL, images are loaded as SDL_Surfaces in order to make it easier to use them in graphics. The SDL library itself only supports loading Bitmap (*.BMP) images. These images are loaded directly from a path in the file-system. Images are loaded using the SDL_LoadBMP function.

SDL_Surface *SDL_LoadBMP(const char *file);

This function loads a Windows Bitmap from file, converts it to an SDL_Surface and returns a pointer to the SDL_Surface. It returns a NULL on failure. Sample usage:

SDL_Surface* img = NULL;

img = SDL_LoadBMP("my_image.bmp");
if (!img) { /* handle errors */ }

Let’s create a sample program that loads some images.

#include <SDL/SDL.h>

int main(int argc, char* argv[])
{
    ...

    /* Loading the images */
    SDL_Surface* img_kyo = NULL;
    SDL_Surface* img_iori = NULL;

    img_kyo = SDL_LoadBMP("kyo.bmp");
    if (!img_kyo) fprintf(stderr, SDL_GetError());

    img_iori = SDL_LoadBMP("iori.bmp");
    if (!img_iori) fprintf(stderr, SDL_GetError());

    /* Blitting the images on the screen */
    SDL_Rect rect_kyo = { 10, 10 };
    SDL_BlitSurface(img_kyo, NULL, screen, &rect_kyo);

    SDL_Rect rect_iori = { 300, 10 };
    SDL_BlitSurface(img_iori, NULL, screen, &rect_iori);

    /* Flipping the screen to display the images */
    SDL_Flip(screen);

    ...

    /* While the program is running */
    while (!quit)
    {
        /* Check for new events */
        while(SDL_PollEvent(&event))
        {
            /* If a quit event has been sent */
            if (event.type == SDL_QUIT)
            {
                /* Quit the application */
                quit = 1;
            }
        }
    }

    /* Always free the surfaces you create */
    SDL_FreeSurface(img_kyo);
    SDL_FreeSurface(img_iori);

    ...

    return 0;
}

Here’s a screenshot of the application:

Now to explain the code.

    /* Loading the images */
    SDL_Surface* img_kyo = NULL;
    SDL_Surface* img_iori = NULL;

    img_kyo = SDL_LoadBMP("kyo.bmp");
    if (!img_kyo) fprintf(stderr, SDL_GetError());

    img_iori = SDL_LoadBMP("iori.bmp");
    if (!img_iori) fprintf(stderr, SDL_GetError());

Here we load the two bitmap images, kyo.bmp and iori.bmp, which are located in the same directory as the application. As I said before, the SDL_LoadBMP() function returns a NULL on failure, so I check for a NULL value after loading each image. If everything worked fine, the images have now been loaded and converted to SDL_Surfaces. That means we can use all the graphics functions on them that we use on normal surfaces.

    /* Blitting the images on the screen */
    SDL_Rect rect_kyo = { 10, 10 };
    SDL_BlitSurface(img_kyo, NULL, screen, &amp;rect_kyo);

    SDL_Rect rect_iori = { 300, 10 };
    SDL_BlitSurface(img_iori, NULL, screen, &amp;rect_iori);

Now that we have loaded the images successfully, we copy them onto the video surface. By the way, blit is actually shot from Bit Blit, which stands for Bit BLock Image Transfer. Anyway, I blit img_kyo, at (10, 10) and img_iori at (300, 10) so that they are displayed right next to each other.

    /* Flipping the screen to display the images */
    SDL_Flip(screen);

When we copied the images in the last section, they were actually copied to the back-buffer. To make them visible onto the screen, we have to copy (or replace) the back-buffer onto the front-buffer. This is done internally by SDL_Flip().

    /* Always free the surfaces you create */
    SDL_FreeSurface(img_kyo);
    SDL_FreeSurface(img_iori);

As I told earlier, SDL_Surfaces are reference counted. So you should always free a surface you created. Since we created img_kyo and img_iori, we now have to free them.

Advertisements

One comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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