Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Tile map to image for color masking/transparent tiles  (Read 5708 times)

0 Members and 1 Guest are viewing this topic.

Vitis

  • Newbie
  • *
  • Posts: 10
    • View Profile
Tile map to image for color masking/transparent tiles
« 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

Dark Goomba

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Tile map to image for color masking/transparent tiles
« Reply #1 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.
Goombas are mushrooms.

Vitis

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Tile map to image for color masking/transparent tiles
« Reply #2 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

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10801
    • View Profile
    • development blog
    • Email
AW: Tile map to image for color masking/transparent tiles
« Reply #3 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.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Vitis

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Tile map to image for color masking/transparent tiles
« Reply #4 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?

Laurent

  • Administrator
  • Hero Member
  • *****
  • Posts: 32504
    • View Profile
    • SFML's website
    • Email
Re: Tile map to image for color masking/transparent tiles
« Reply #5 on: June 26, 2014, 08:58:42 am »
GIMP.
Laurent Gomila - SFML developer

Jesper Juhl

  • Hero Member
  • *****
  • Posts: 1405
    • View Profile
    • Email
Re: Tile map to image for color masking/transparent tiles
« Reply #6 on: June 26, 2014, 09:01:19 am »
I personally use gimp for all my image editing needs.

AlejandroCoria

  • Jr. Member
  • **
  • Posts: 68
    • View Profile
    • alejandrocoria.games
    • Email
Re: Tile map to image for color masking/transparent tiles
« Reply #7 on: June 26, 2014, 06:17:52 pm »
If you want a simple editor, you can use Paint.NET (Windows). If you want something more complete, I recommend GIMP.

Hapax

  • Hero Member
  • *****
  • Posts: 3346
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Tile map to image for color masking/transparent tiles
« Reply #8 on: June 29, 2014, 03:28:30 pm »
GIMP.
This just looks like an insult  ;D
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Laurent

  • Administrator
  • Hero Member
  • *****
  • Posts: 32504
    • View Profile
    • SFML's website
    • Email
Re: Tile map to image for color masking/transparent tiles
« Reply #9 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
Laurent Gomila - SFML developer

Nexus

  • SFML Team
  • Hero Member
  • *****
  • Posts: 6286
  • Thor Developer
    • View Profile
    • Bromeon
Re: Tile map to image for color masking/transparent tiles
« Reply #10 on: June 29, 2014, 08:59:52 pm »
...just like Git :P
Zloxx II: action platformer
Thor Library: particle systems, animations, dot products, ...
SFML Game Development:

 

anything