3
\$\begingroup\$

Games like Dwarft Fortress and Dungeon Crawl Stone Soup are drawing their boards using tiles from a tileset image (I think?). I know you can do color keying and replace the background color with transparency or another color, but how are games like these drawing the text characters into different colors? Using the same method? I am trying to find the best way to use a tilesheet to draw ascii graphics and be able to choose what color the text is, and what color the background of the tile is separately.

Something similar to what is pictured here.

\$\endgroup\$
2
\$\begingroup\$

If your "base" tile in a tile set is white (1.0, 1.0, 1.0), then you can simply take advantage of the multiplicative identity (one times a thing is that thing) to multiply in the color of your choice from whatever source you want at draw time. For example, you might pass the desired color as a vertex attribute or a shader uniform, and in the fragment shader output you sample the tile texture and multiply in your desired color (pseudocode):

float4 baseColor = sample(tileTexture);
return baseColor * desiredColor;

Depending on the values you put in the colors, you may need to further clamp/reassign the alpha component of the color because you normally won't want that modulated in this fashion. Although you can allow that if you like the effect/control it provides.

That's a simple approach.

A more complicated approach, for example if your base tile color is not white or is more than one color, is to look at either

  • decomposing the tiles into one or more layers which can be tinted as above, or
  • hue-shifting the tiles instead; this means converting the tile colors from RGB into the hue/saturation/value color space, and adjusting the hue to the desired value, and converting back.

You can combine the above two approaches, in fact: use one texture layer for the parts of the tile which would always remain their fixed, original color and another layer (or layers) containing the parts of the tile that can be color-shifted by some amount. This gives you quite a bit of flexibility and is very similar (if not exactly the same as) a common technique used to support "dye channels" in character's clothes or armor.

\$\endgroup\$
2
  • \$\begingroup\$ I'm using libgdx's TextureRegion object to represent the tiles so I'm not sure if your method applies directly to my use case, but I think it has given me some direction and I'm looking into possible solutions. Thanks for the quick reply! \$\endgroup\$
    – lhasson
    Jul 7 '15 at 0:15
  • \$\begingroup\$ I've never used libgdx so I can't provide specifics pertaining that API, but the general concepts should be applicable in one way or another. :) \$\endgroup\$
    – user1430
    Jul 7 '15 at 3:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .