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\$ – ClassicThunder Mar 26 '12 at 8:19
  • \$\begingroup\$ Can you use custom shaders? \$\endgroup\$ – Richard Marskell - Drackir Mar 26 '12 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 '12 at 15:47
  • \$\begingroup\$ @classThunder, I actually don't want borders but complete highlighting. \$\endgroup\$ – HuseyinUslu Mar 27 '12 at 7:20
  • \$\begingroup\$ @Drackir, yep, that's a possibility. \$\endgroup\$ – HuseyinUslu Mar 27 '12 at 7:21

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.