Color keying

Using SDL color keying system to make the background of the images transparent.

In this section, we will examine a program that uses a .png image file as a background and displays another .png image file with a non-transparent background on the background image by making its background transparent with the key color method.

When the program runs, the following operations are performed in addition to the basic operations:

1. The global variables shown below are first defined at the beginning of the program:
   • SDL_Surface *surface_img: Surface variable
   • SDL_Texture *texture_back: Background texture variable
   • SDL_Texture *texture_front: Foreground texture variable
2. Inside the load_img() function,
   • The background image file is loaded to the texture_back variable with the IMG_LoadTexture() function.
   • The foreground image file is loaded to the surface_img variable with the IMG_Load() function.
   • The background color of the image loaded to the surface_img surface is defined as the key color with the SDL_SetSurfaceColorKey() function, and this color is processed transparently in the operations to be performed.
   • The foreground surface value is loaded to the texture_back variable with the SDL_CreateTextureFromSurface() function.
3. Inside the draw_screen() function,
   • The background texture is transferred to the main window with the SDL_RenderTexture() function.
   • The foreground texture is transferred to the main window with the SDL_RenderTexture() function.

SDL_SetSurfaceColorKey() function

The SDL_SetSurfaceColorKey function sets the color key on an SDL_Surface. This causes pixels on the page to be considered transparent for a given color value (pixel). This function allows you to make certain colors invisible in a blit operation (the process of copying an image to another image).

bool SDL_SetSurfaceColorKey(SDL_Surface *surface, bool enabled, Uint32 key);

This function enables the specified color key and this color causes all pixels on the SDL_Surface to be considered transparent. For example, you can use this function to make a blue pixel transparent.

main.c file content will be as follows:

#include <stdio.h>
#include <SDL3/SDL.h>
#include <SDL3_image/SDL_image.h>

// Window width and height
#define WINDOW_WIDTH 640
#define WINDOW_HEIGHT 480

// Global variables
int is_running = false;            // Variable that controls the execution of the main loop of the program
SDL_Window *window = NULL;         // Main window variable
SDL_Surface *surface_img = NULL;   // Surface variable
SDL_Texture *texture_back = NULL;  // Texture variable for background image
SDL_Texture *texture_front = NULL; // Texture variable for foreground image
SDL_Renderer *renderer = NULL;     // Renderer variable

// Function prototypes
int init_window(void);             // Create window and renderer
void init_vals(void);              // Initialize values
void load_img(void);               // Load image to texture
void process_event(void);          // Process events
void update_screen();              // Update values
void draw_screen(void);            // Draw screen
void destroy_window(void);         // Destroy window

int main(int argc, char* argv[])
{
    // Create window and renderer
    is_running = init_window();

    // Initialize values
    init_vals();

    // Load .png file to texture
    load_img();

    // Main loop
    while (is_running) {
        process_event();       // Processing SDL events (Here keyboard inputs).
        update_screen();       // Updating variables
        draw_screen();         // Drawing objects on the window (Rendering)
    }

    // Destroy renderer and SDL window
    destroy_window();

    return 0;
}

// Create window and renderer
int init_window(void)
{
    // Initialize the SDL library.
    if(SDL_Init(SDL_INIT_VIDEO) == false) {
       SDL_Log("SDL init error: %s\n", SDL_GetError());
       return false;
    }

    // Create a window and a 2D rendering context for the window.
    if(!SDL_CreateWindowAndRenderer("SDL3 window -  Color keying", WINDOW_WIDTH, WINDOW_HEIGHT, 0, &window, &renderer)) {
       return false;
    }

    return true;
}

// Initialization function that runs only once at the beginning of the program
void init_vals(void)
{

}

// Load image to texture
void load_img(void)
{
     // Load background image into a GPU texture.
     texture_back = IMG_LoadTexture(renderer, "background.png");

	 if(texture_back == NULL)	{
	    SDL_Log("Load texture error: %s\n", SDL_GetError());
	 }

	 // Load foreground image to surface
	 surface_img = IMG_Load("front.png");

	 if(surface_img == NULL)	{
	    SDL_Log("Load image error: %s\n", SDL_GetError());
	 }

     // Color key image
     SDL_SetSurfaceColorKey(surface_img, true, SDL_MapSurfaceRGB(surface_img, 255, 240, 70));

	 // Create texture from surface pixels
	 texture_front = SDL_CreateTextureFromSurface(renderer, surface_img);
}

// Function to control SDL events and process keyboard inputs
void process_event(void)
{
     SDL_Event event;

     // Creating a loop to process user inputs
     while (SDL_PollEvent(&event)) {
        switch (event.type) {
            case SDL_EVENT_QUIT: // Logout action by the user (x button at the top right of the window)
                 is_running = false; // Terminates the execution of the program main loop.
                 break;

            case SDL_EVENT_KEY_DOWN: // Indicate that a key was pressed.
                 if(event.key.key==SDLK_ESCAPE) {
                    is_running = false;
                 }
                 break;
        }
     }
}

// Updates objects in the main window
void update_screen(void)
{

}

// Render function used to draw game objects in the main window
void draw_screen(void)
{
     SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255); // Set the color used for drawing operations.
     SDL_RenderClear(renderer); // Clear the current rendering target with the drawing color.

     // Draw background texture
     SDL_RenderTexture(renderer, texture_back, NULL, NULL);

     // Draw foreground texture
     SDL_FRect rect_front = { 200, 180, 300, 233 };
     SDL_RenderTexture(renderer, texture_front, NULL, &rect_front);

     // Loading all objects drawn one by one to the back buffer to the front buffer at once and loading them onto the screen
     // This process prevents each drawn object from being displayed on the screen one by one.
     SDL_RenderPresent(renderer); // Update on screen all operations performed since the previous call
}

// Destroy Renderer and SDL window, exit from SDL3
void destroy_window(void)
{
     SDL_DestroyTexture(texture_front);
     SDL_DestroyTexture(texture_back);
     SDL_DestroySurface(surface_img);
     SDL_DestroyRenderer(renderer);
     SDL_DestroyWindow(window);
     SDL_Quit();
}