Tile map to image for color masking/transparent tiles

[Vitis]

Greetings to the SFML community!

I am new to SFML and game programming in general.  I found this excellent tutorial on creating and drawing a tile map. (http://www.sfml-dev.org/tutorials/2.0/graphics-vertex-array.php) (I plan on going further by loading a tile map from a text file tile index instead of an array, but I plan to tackle that challenge later.)

Right now I'm trying to draw a tile map with transparent regions over a background sprite. I have figured out how to create a color mask to key out background colors, which allows me to use sprite sheets that do not have transparent backgrounds for animated characters; however, I have not figured out how to draw tile maps with transparent regions over a background sprite. 

I created four hand-drawn test tiles: three tiles are to be visible on screen, and one is a solid fuchsia color that I intend to key out and make transparent.  I have made a simple tile map using the technique from the "Example: Tile Map" section of the aforementioned SFML tutorial. (See link above.)  In order to have transparent regions of my tile map, I figure I need to somehow:

1) copy the tile map to an image
2) key out the fuchsia tiles using createMaskFromColor()
3) create a texture from the tile map image
4) create a sprite from the tile map texture
5) and draw the tile map sprite over my background sprite.

I have enough SFML experience to do steps 2-5, but I don't know how to accomplish step 1).  Any help with this step would be greatly appreciated! (If you have a better way to accomplish this task, please share it!)

Regards,
-Vitis

[Dark Goomba]

Load your tile map to an image then copy it to a texture with this code:

        sf::Image ImageTileMap;
        sf::Texture TileMap;
        ImageTileMap.loadFromFile("filename");
        ImageTileMap.createMaskFromColor(...);
        TileMap.update(ImageTileMap);

or you can always convert sf::Texture to sf::Image with

image = texture.copyToImage()

Afterwards, create your tile map class using your texture.

[Vitis]

Greetings Dark Goomba,

Thank you for your advice.

So with your approach, I would theoretically need at least one draw call per tile type, right? For example, let's say I wanted to draw a tile map consisting of 100 tiles composed of 4 different tile types, would I need at least 4 draw() calls?

Regards,
-Vitis

[eXpl0it3r]

In general it's best to open the spritesheet in an image editor and replace the background color with a transparent color. Doing so in your application is essentially a waste of processing time (once in an image editor vs. every time you run your application).
That way you can simply load all tile and entity images into a texture and dras them, no need to convert things.

Also with vertex arrays you need one draw call per vertex array, i.e. one draw call per texture/tilesheet.

[Vitis]

In general it's best to open the spritesheet in an image editor and replace the background color with a transparent color.

I've been using color masking only because I don't yet have an image editor program that can create and save transparent backgrounds.  I'm looking for a good, free image editor that can handle transparency. Any recommendations?

[Laurent]

GIMP.

[Jesper Juhl]

I personally use gimp for all my image editing needs.

[AlejandroCoria]

If you want a simple editor, you can use Paint.NET (Windows). If you want something more complete, I recommend GIMP.

[Hapax]

GIMP.

This just looks like an insult 

[Laurent]

GIMP.

This just looks like an insult 

I never knew it meant something as a word

[Nexus]

...just like Git