C++ SDL Colour Keying Tutorial

Whether you're a newbie or an experienced programmer, any questions, help, or just talk of any language will be welcomed here.

Moderator: Coders of Rage

Post Reply
User avatar
101MUDman101
Chaos Rift Newbie
Chaos Rift Newbie
Posts: 38
Joined: Fri Aug 17, 2012 12:36 pm
Current Project: Elemental Dawn (2D RPG)
Favorite Gaming Platforms: PC, NES
Programming Language of Choice: C/++, Lua, Perl
Location: England
Contact:

C++ SDL Colour Keying Tutorial

Post by 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:

Image

With Colour Keying:

Image

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 :lol:
Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.

Damn Right.

Channel: http://www.youtube.com/user/101MUDman101
User avatar
dandymcgee
ES Beta Backer
ES Beta Backer
Posts: 4709
Joined: Tue Apr 29, 2008 3:24 pm
Current Project: https://github.com/dbechrd/RicoTech
Favorite Gaming Platforms: NES, Sega Genesis, PS2, PC
Programming Language of Choice: C
Location: San Francisco
Contact:

Re: C++ SDL Colour Keying Tutorial

Post by dandymcgee »

Great tutorial. It's worth noting that for more advanced applications one should look into alpha blending. ;)
Falco Girgis wrote:It is imperative that I can broadcast my narcissistic commit strings to the Twitter! Tweet Tweet, bitches! :twisted:
User avatar
Nokurn
Chaos Rift Regular
Chaos Rift Regular
Posts: 164
Joined: Mon Jan 31, 2011 12:08 pm
Favorite Gaming Platforms: PC, SNES, Dreamcast, PS2, N64
Programming Language of Choice: Proper C++
Location: Southern California
Contact:

Re: C++ SDL Colour Keying Tutorial

Post by Nokurn »

dandymcgee wrote: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.
User avatar
101MUDman101
Chaos Rift Newbie
Chaos Rift Newbie
Posts: 38
Joined: Fri Aug 17, 2012 12:36 pm
Current Project: Elemental Dawn (2D RPG)
Favorite Gaming Platforms: PC, NES
Programming Language of Choice: C/++, Lua, Perl
Location: England
Contact:

Re: C++ SDL Colour Keying Tutorial

Post by 101MUDman101 »

dandymcgee wrote:Great tutorial. It's worth noting that for more advanced applications one should look into alpha blending. ;)
Thanks :lol:
Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.

Damn Right.

Channel: http://www.youtube.com/user/101MUDman101
Post Reply