Displaying hexagonal maps

Hexagons have formed the basis of a number of strategic board games over the last three decades, both physical and virtual, and thus the ability to deal with them in one's own games can be advantageous.

In reality, drawing a hexagonal map usually doesn't present the greatest challenge. On the other hand, it's not unusual for a lot of hexagonal-based computer games to rely upon either mouse or touch input as the selection mechanism for hexagons and the challenge of how to correlate a mouse click with a particular hexagon can be a surprisingly unintuitive problem to solve.

With this in mind, we will be covering not only the drawing of the hexagons onto the screen, but also the thorny issue of how to map screen coordinates into their corresponding hexagon as the following image illustrates:

Getting ready

In order to draw a hexagonal map, we're going to need an image of a hexagon.

The code demonstrated here was written with an image of 100x87 pixels in mind, but it can...