So my question is highly related to Creating non-rectangular hotspots and detecting clicks.

Yet again, I've irregular hot-spots (think the game Risk). So basically, we can detect clicks on these hot-spots easily using color key mapping as discussed in above question which I don't have any problems implementing (which is also covered here in details).

The problem is about highlighting these irreguar hotspots. So let me explain the question a bit more - the above color key mapping guide uses this as a world map:

world map

Then the author color-maps the imaginary countries:

color coded world map

Now we can now detect the country the pointer is over. In the same article author mentions outlining countries on mouse-over. Though to get the effect, he creates unique border assets for each country - like:

line drawing outlining a single country

For the game I'm working on I'm using the same color-key mapping idea to detect hot-spots, but I didn't like the way of highlighting hot-spots. Coloring all the hot-spots is already a time-consuming job for me - as I have 25+ hot-spots for each map. Further, the need to have 25 unique border/highlight asset per hot-spot doesn't sound right.

Anyone have a better idea/suggestion on highlighting these hot-spots?

  • \$\begingroup\$ If you have the color map couldn't you just: open it up in GIMP, select by color, and add a stroke around the selection? gimp.org/tutorials/Borders_On_Selections \$\endgroup\$ Mar 26, 2012 at 8:19
  • \$\begingroup\$ Can you use custom shaders? \$\endgroup\$ Mar 26, 2012 at 15:46
  • \$\begingroup\$ How do you define your hotspots in code? By use of a polygon perhaps? Can't you use the polygon information to draw a fill and outline? \$\endgroup\$
    – Roy T.
    Mar 26, 2012 at 15:47
  • \$\begingroup\$ @classThunder, I actually don't want borders but complete highlighting. \$\endgroup\$ Mar 27, 2012 at 7:20
  • \$\begingroup\$ @Drackir, yep, that's a possibility. \$\endgroup\$ Mar 27, 2012 at 7:21

1 Answer 1


Instead of creating all border/highlight assets manually, you could also create them at runtime, preferably during startup/loading of the game?

To do so, I suggest you look into the marching squares algorithm. By focusing on a single color (eg. treating all other colors as "background") you should be able to trace the outline of a single hotspot. Then just move on to the next color and repeat.


You must log in to answer this question.

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