Game Development Stack Exchange is a question and answer site for professional and independent game developers. It only takes a minute to sign up.
Sign up to join this community
Say for a game with irregular hotspots (say Risk, or a strategy game like Paradox's Hearts of Iron or Crusader Kings), how do you
Define a non-rectangular hotspot of irregular shape (much like a territory on a map?), in code?
What tool can you use to trace out the hotspot and import into your game?
What is the algorithm for detecting if someone has clicked within such a hotspot?
Besides the vector/polygon approach, another way to do this is to use a bitmap.
If each "color" in the bitmap represents a territory (France, Belgium etc.), then it's simply a matter of figuring out which pixel in the bitmap was clicked, looking up the color and determining if that color represents the territory of interest. You can even represent overlapping territories with specific colors, or treat your colors as a bitmask of territories.
In terms of tools, have your artists/content producer author the bitmap in any pixel editing tool. For example if you use Photoshop or the Gimp, you could represent different territories (France, Belgium etc.) as either named layers or as 1 layer but distinguishing the territories based on colors. You would then write a tool to convert the image/layers into a format that is suitable for game-internal purposes.
The game internal format would very likely be per-row run-length compressed (see: http://en.wikipedia.org/wiki/Run-length_encoding). You should be able to achieve very good compression ratios this way, as adjacent pixels on rows will very often belong to the same territory. The algorithm then becomes, for the current y coordinate of the mouse, traverse that row and figure out which run it belongs to, and therefore which corresponding territory.
You'll need to define the hotspots as a series of polygons that overlay your image. Then, when a user clicks on the map, go through the list of polygons (clickable hotspots) and see which (if any) the click point is inside of.
Also, you might look into how imagemaps in HTML are done. Not that you will be working with HTML, but basically they are essentially what you want to implement. They allow for defining hotspots as rectangles, circles, and polygons (which is what you want).
Here's a webpage describing HTML image maps that might give you some ideas: http://www.javascriptkit.com/howto/imagemap.shtml
Here's a Wikipedia article on algorithms to tell if a point is in a polygon: http://en.wikipedia.org/wiki/Point_in_polygon
You can define an arbitrary shape as just a series of points that are turned into line segments.
The collision test for "am I inside this arbitrary shape" is given by my answer here: In Cocos2D, how do I check for collisions against an arbitrary user-drawn shape?
For this kind of thing we use an image used as a mask, with transparent/opaque or black/white pixels. The masks aren't drawn, but are conceptually "placed" over the map region they cover.
When you get a click, first check the bounding box of the image. If it's outside, the player didn't click the region. If it's inside, check the pixel. If it's transparent/black, the player didn't click the region. Otherwise, he did.
If memory usage is a serious concern, you can use half-sized images and apply the appropriate screen to image coordinate conversion. You won't get pixel-perfect detection but you probably don't need it in this case.
Also, if you go transparent/opaque, either save the masks as PNG (or any other lossless compression scheme) or use a high threshold (alpha > 128 instead of alpha > 0). Otherwise, JPEG artifacts may cause some of the transparent pixels to appear not so transparent (say alpha = 1 or 2 instead of alpha = 0)
