Lo que vamos a ver ahora son los colores clave. Un color clave es un color que no queremos que aparezca en la imágen, como el fondo de la misma. La estructura SDL_Surface tiene un elemento llamado color key , que determina que color de la imagen no queremos que sea visible. Esto es lo que se usa cuando queremos una imagen con fondo transparente.

Pueden descargar el código fuente de esta lección.

Bien, supongamos que queremos fusionar esta imagen llamada foo:



a este fondo:

Pero no queremos que aparezca el fondo azul claro de la primera imagen:

Para que no se muestre el fondo de la primera imagen, necesitamos fijarlo como color key, en este caso el valor de este color es (En hexadecimal): Red 0, Green FF, Blue FF. El color key se suele fijar normalmente al cargar la imagen.

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

    //The optimized image 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 image
        optimizedImage = SDL_DisplayFormat( loadedImage );

        //Free the old image
        SDL_FreeSurface( loadedImage );

Esta es la función que carga la imagen, y que vamos a modificar.

En primer lugar, cargamos la imagen optimizada, como hacíamos hasta ahora.

//If the image was optimized just fine
        if( optimizedImage != NULL )
        {
            //Map the color key
            Uint32 colorkey = SDL_MapRGB( optimizedImage->format, 0, 0xFF, 0xFF );

Comprobamos que la imagen fue optimizada.
Si todo va bien, necesitamos mapear el color que queremos ocultar. Llamamos a SDL_MapRGB() para tomar los valores de rojo, verde y azul. Esta función nos devuelve el valor del pixel en el mismo formato que el de la imagen. Puedes leer más acerca de los pixeles en el artículo 3.

//Set all pixels of color R 0, G 0xFF, B 0xFF to be transparent
            SDL_SetColorKey( optimizedImage, SDL_SRCCOLORKEY, colorkey );
        }

Ahora vamos a configurar el color Key, lo que vamos a hacer es fijar todos los pixeles de color 00ffff a transparentes.
El primer argumento de esta función es la imagen para la cual queremos aplicar el color key.

El segundo es para los flags que desee aplicar, en este caso, el flag SDL_SRCCOLORKEY asegura que estamos usando color Key cuando fusionemos una imagen en otra.

El tercero es el color que deseamos fijar como color key, como vemos, es el color que hemos mapeado hace un momento.

//Return the optimized image
    return optimizedImage;
}

Para finalizar, la función devuelve la imagen optimizada con el color clave.

//Apply the surfaces to the screen
    apply_surface( 0, 0, background, screen );
    apply_surface( 240, 190, foo, screen );

    //Update the screen
    if( SDL_Flip( screen ) == -1 )
    {
        return 1;
    }

El resultado de hacer todo esto da como resultado la imagen siguiente:

Como vemos, ahora en la imagen del hombrecillo de Palo ya no se ve el fondo azul claro.

Para aquellos que uséis imágenes PNGs con transparencia, IMG_Load() la maneja automáticamente. Si itentamos fijar un color clave para imágenes que ya disponen de transparencia, ocasionaremos resultado extraños. También se perderá la transparencia Alfa si usamos SDL_DisplayFormat() en lugar de SDL_DisplayFormatAlpha(). Para mantener la transparencia en un PNG simplemente no fije un color clave. IMG_Load() también se encarga del alfa de imágenes TGA. Busque en la documentación de SDL para obtener más información detallada sobre los colores clave.