C++ SDL Colour Keying Tutorial

[101MUDman101]

Hello, this is going to be a short tutorial as it is not very advanced. To start off, lets ask a few questions:

What is Colour Keying?

- Removing a certain colour from an image.

Why would we want to remove colours from our images?

- To remove unnecessary backgrounds from your images.

Take a look at these two pictures, here's the one without Colour Keying:



With Colour Keying:



As you can see, our circle has a pink background without Colour Keying, however if we do use it, it removes the pink colour.

A tip when making sprites is to use a background colour that isn't used much such as R: 255 G: 0 B: 255. This pink colour has become a standard in sprites as it is not a very attractive shade of pink.

Anyway, enough of me babbling, lets get to the code. For this tutorial, you will need to have already setup 'SDL_Image', there are numerous tutorials around the internet. Please note I am only going to give you the function to load the image not the setup of SDL.

First we need to make the function declaration

Code: Select all

SDL_Surface* loadImage(const char* filename) {

The reason why the function has an SDL_Surface* return type, is because we will be using this function to set the value of an SDL_Surface*, if you don't understand I will put a code snippet at the end of the tutorial. Now we will get to the main chunk of code:

Code: Select all

SDL_Surface* o;

o = IMG_Load(filename.c_str());

surface = SDL_DisplayFormat(o);

SDL_FreeSurface(o);

SDL_SetColorKey(surface, SDL_SRCCOLORKEY | SDL_RLEACCEL, 0xFF00FF);

return surface;

Here we are creating a temporary surface called 'o', this will hold the un-optimized image. Then SDL_DisplayFormat() is called which creates a new version of our variable 'o' in the same format as the screen. We do this to save processing power because when you blit a surface to the screen which is a different format then SDL will convert it. This is the process that cost us processing power. We then release the surface 'o' to free up memory (Imagine loading 1000 sprites without freeing 'o'!).

The next line is the important bit, we set the colour key by calling SDL_SetColorKey, the first parameter is the surface, the second is the flag, the only thing you need to know is to type in both those flags. The third parameter is the color you want to remove, in my case it is 0xFF00FF with translates to (255, 0, 255). An easier and more understandable way to set the colour, would be to do this:

Code: Select all

Uint32 colourkey = SDL_MapRGB(surface->format(), 255, 0, 255);

SDL_SetColorKey(surface, SDL_SRCCOLORKEY | SDL_RLEACCEL, colourkey);

return surface;

Here's how to use the function:

Code: Select all

SDL_Surface* myimage = loadImage("myimage.bmp/png/etc...");

I hope this tutorial helps you out! Please reply if there is any errors

[dandymcgee]

Great tutorial. It's worth noting that for more advanced applications one should look into alpha blending.

[Nokurn]

Great tutorial. It's worth noting that for more advanced applications one should look into alpha blending.

This. The biggest drawback of color keying is that you can't antialias your images.

[101MUDman101]

Great tutorial. It's worth noting that for more advanced applications one should look into alpha blending.

Thanks