0
\$\begingroup\$

I want to make a turn-based game where the player is given "opportunities for attack." An image of the in-game sprite character appears when it's the player's turn to attack. The player can mouseover the various parts of the image, which will highlight that specific body part, like so:

enter image description here

The player can then choose to attack that given body part.

To do this, I was thinking of adopting the "grid" method, and put my image within a 2D array... with each region of the body mapped to a certain square, like so:

enter image description here

Or, I could generate a pixelated version of the in-game sprite within a grid to begin with, so I would already have the mappings, like so:

Minecraft Pixel Art

I'm not sure:

  • how to partition the image up so that each section is represented meaningfully in the matrix
  • if this is the right way of doing this

Any guidance would be helpful

\$\endgroup\$
0

1 Answer 1

Reset to default
2
\$\begingroup\$

You could just store a second image (or use the alpha channel of your image) to store a heat map (this also depends a bit on how you're drawing this, e.g. through a canvas).

You just create some mapping and tint areas in their specific color (example):

  • Left arm becomes red.
  • Right arm becomes orange.
  • Left leg becomes cyan.
  • Right leg becomes blue.

As an alternative, you could use the alpha channel of your image. For drawing, you round your alpha value (e.g. if it's above 250, consider it to be 255):

  • Left arm is alpha = 254.
  • Right arm is alpha = 253.
  • Left leg is alpha = 252.
  • Right leg is alpha = 251.

When you've got a touch event, you're just looking up the pixel at that position and determine the color. Based on the color you know the actual assignment.

This even works with animated sprites and avoids having the player pick some body part despite touching some area outside the actual image.

Also have a look at HTML's <map> tag, which would allow you to define freeform outlines that become clickable.

\$\endgroup\$
3
  • \$\begingroup\$ Mario - the HTML <map> tag looks awesome! I will give that a shot. Only thing is, how do I define the coordinates \$\endgroup\$ Commented Nov 19, 2014 at 16:38
  • \$\begingroup\$ Read the documentation. Those are typically in pixels relative to your image. There are also some tools out there allowing you to edit such maps using an WYSIWYG editor. my first hit on Google looks promising, although I haven't tried it. \$\endgroup\$ Commented Nov 19, 2014 at 17:24
  • \$\begingroup\$ Found ImageMapster: outsharked.com/imagemapster/default.aspx?demos.html \$\endgroup\$ Commented Nov 19, 2014 at 19:38

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.