I'm developing an RPG/roguelike-style game. Instead of having maps like:


Oh look, a dwarf.

I was having solid background tiles, So sort of a tile based RPG without drawn tiles. I like the idea of having ascii tiles for creatures and things. It saves a lot of artist time. I can change the tiles so I get some kind of symbol slightly more...related? But better than having 4 directions for each separate thing.

If I did this in white, and had a snow area, you wouldn't be able to see. So make it black. As soon as you reach a dark place, you're again stuck as to where your character is. Is there an algorithm or something that can say 'this is too dark between the tile and the NPC' and change the colour to something seeable, but not going to a bright cyan from a pale pink or whatever?


2 Answers 2


Assuming you have one bright and one dark color for each character, you can check the difference in luminance, by converting the tile color and the NPC colors to HSL. Pick the NPC color with the greatest luminance difference from the tile.

If you don't want to manually assign both colors, you can simply hardcode:

if (tile_color.l > 0.5)
    character_color.l = 0.1;
    character_color.l = 0.9;

And assign HS pairs rather than RGB triplets to each character.

You could also just provide a lighter outline around dark characters, and a darker outline around light characters, all the time.

  • \$\begingroup\$ Can I use the Value of HSV for the same kind of effect here? \$\endgroup\$ Nov 29, 2010 at 19:38
  • \$\begingroup\$ No. Intuitively, value can "darken" but not "brighten", or can only "brighten" halfway. To make a color brighter in HSV, you need to simultaneously raise value and reduce saturation. Look at the color cylinders on the Wikipedia page to see how the change works. \$\endgroup\$
    – user744
    Nov 29, 2010 at 20:31

This is assuming you are storing the ASCII art as bitmaps instead of text rendering, which is better for performance, flexibility, and can facilitate easy to implement custom tile-sets.

Instead of changing the colors depending on the background colors, make all the ASCII art light toned, and have a slight drop shadow effect pre-rendered onto the bitmaps.

This will make the characters and items show up nicely on all colors/shades/tones.

Edit: Here are some examples

With a shadow alt text

Without a shadow alt text

  • \$\begingroup\$ A shadow still doesn't work when the colors match too closely. You end up just seeing a shadow, which isn't identifiable and looks bad by itself. An outline is better, preserving more details of the shape. \$\endgroup\$
    – user744
    Nov 28, 2010 at 18:40
  • \$\begingroup\$ @Joe Wreshnig, I edited the answer and provided examples. \$\endgroup\$ Nov 28, 2010 at 19:48
  • \$\begingroup\$ You provided two low-luminance shades for mid-high luminance fonts. Try just shadows on backgrounds nearly equal to the font, and you'll see the problem. Still, the problem is already appearing on the yellow shadowed "e" in "Text" on white. \$\endgroup\$
    – user744
    Nov 28, 2010 at 20:37

You must log in to answer this question.

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