How To Color Keying Using SDL

When rendering multiple images on the screen, having images with transparent backgrounds is usually necessary. Fortunately SDL provides an easy way to do this using color keying.

//Texture wrapper class
class LTexture
{
    public:
        //Initializes variables
        LTexture();

        //Deallocates memory
        ~LTexture();

        //Loads image at specified path
        bool loadFromFile( std::string path );

        //Deallocates texture
        void free();

        //Renders texture at given point
        void render( int x, int y );

        //Gets image dimensions
        int getWidth();
        int getHeight();

    private:
        //The actual hardware texture
        SDL_Texture* mTexture;

        //Image dimensions
        int mWidth;
        int mHeight;
};

Color key the cyan (light blue) colored background and render it on top of this background:

(foo.png)

Next, color key the image with SDL_SetColorKey before creating a texture from it. The first argument is the surface  to color key, the second argument covers whether to enable color keying, and the last argument is the pixel to color key with.

    //The final texture

    SDL_Texture* newTexture = NULL;

    //Load image at specified path

    SDL_Surface* loadedSurface = IMG_Load( path.c_str() );

    if( loadedSurface == NULL )

    {

        printf( "Unable to load image %s! SDL_image Error: %s\n", path.c_str(), IMG_GetError() );

    }

    else

    {

        //Color key image

        SDL_SetColorKey( loadedSurface, SDL_TRUE, SDL_MapRGB( loadedSurface->format, 0, 0xFF, 0xFF ) );

=Here are the image loading functions in action.=

bool loadMedia()

{

    //Loading success flag

    bool success = true;

    //Load Foo' texture

    if( !gFooTexture.loadFromFile( "10_color_keying/foo.png" ) )

    {

        printf( "Failed to load Foo' texture image!\n" );

        success = false;

    }

    

    //Load background texture

    if( !gBackgroundTexture.loadFromFile( "10_color_keying/background.png" ) )

    {

        printf( "Failed to load background texture image!\n" );

        success = false;

    }

    return success;

}

=Here are the image loading functions in action.=

void close()

{

    //Free loaded images

    gFooTexture.free();

    gBackgroundTexture.free();

    //Destroy window    

    SDL_DestroyRenderer( gRenderer );

    SDL_DestroyWindow( gWindow );

    gWindow = NULL;

    gRenderer = NULL;

    //Quit SDL subsystems

    IMG_Quit();

    SDL_Quit();

}