SFML community forums

Help => Graphics => Topic started by: Vitis on June 26, 2014, 05:51:12 am

Title: Tile map to image for color masking/transparent tiles
Post by: Vitis on June 26, 2014, 05:51:12 am
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
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Dark Goomba on June 26, 2014, 06:47:22 am
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.
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Vitis on June 26, 2014, 07:23:10 am
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
Title: AW: Tile map to image for color masking/transparent tiles
Post by: eXpl0it3r on June 26, 2014, 07:56:17 am
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.
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Vitis on June 26, 2014, 08:37:06 am
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?
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Laurent on June 26, 2014, 08:58:42 am
GIMP.
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Jesper Juhl on June 26, 2014, 09:01:19 am
I personally use gimp (http://www.gimp.org/) for all my image editing needs.
Title: Re: Tile map to image for color masking/transparent tiles
Post by: AlejandroCoria on June 26, 2014, 06:17:52 pm
If you want a simple editor, you can use Paint.NET (http://www.getpaint.net/) (Windows). If you want something more complete, I recommend GIMP.
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Hapax on June 29, 2014, 03:28:30 pm
GIMP.
This just looks like an insult  ;D
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Laurent on June 29, 2014, 08:32:58 pm
Quote
Quote
GIMP.
This just looks like an insult  ;D
I never knew it meant something as a word ;D
Title: Re: Tile map to image for color masking/transparent tiles
Post by: Nexus on June 29, 2014, 08:59:52 pm
...just like Git :P