Drahcir
Drahcir

Reputation: 11972

Bitmap Hotspots (Image Map)

I'm building a game where there is a bitmap image (library symbol) on the stage, I need to monitor the users mouse gestures over the bitmap.

The idea is that when the user hovers over different points on the image, then different actions will occur (different actions for different coordinates).

I have done this in the past, but I cheated by placing invisible MovieClips over the image, and then listened for mouse events on these MovieClips. I can't do it like this now, because there are more than 200 points of interest on the image, having so many extra MovieClips on the stage at on time really slows it all down.

So, I think the best way to do this would be to manually hardcode all the X Y coordinates into the class, then compare with the mouse coords. The problem is that it becomes tricky and my code is bloated and not optimized.

Is there a common/good way of doing this?

Upvotes: 0

Views: 408

Answers (2)

Strille
Strille

Reputation: 5781

To speed up the calculation which determines which hotspot (if any) is under the mouse coord you could generate a "hit test" bitmap at startup. This bitmap is never displayed to the user, but each hotspot is drawn as a rectangle with a generated unique color.

For each hotspot you also add an entry to a dictionary (could be a Dictionary instance, an array or normal object) where the key is the color and the value the hotspot. This scales really well, since no matter how many hotspots you have you only need to perform a getPixel() and then check the dictionary for the hotspot.

Upvotes: 2

interpolack
interpolack

Reputation: 914

Hardcoding all of the X Y coordinates does seem pretty intense - consider this workaround for placing the rectangles visually:

  1. Place the 200 movieclips in the correct locations across the bitmap
  2. On starting the game, iterate over the movieclips and add each of their coordinate values to an array of objects with those properties
  3. Unload each movieclip as soon as its information is retrieved
  4. Listening for mouse events on the movieclips in the old scenario can be replaced by listening for corresponding mouse coordinates on objects in the new scenario. Instead of checking for whether the mouse rolls over, you can check whether the amount is more than the object's 0,0 and less than its width,height.

Is this a feasible solution? It would at least concentrate all of the process-intensive action to the beginning, where it could be loaded, as opposed to spread across the game. Is a bit more intuitive for you as a developer, too.

Upvotes: 2

Related Questions