# Understanding hexagonal tiles – updated with HTML5 examples thanks to Phaser

This is the update to a post I started a loooong time ago, back in 2008 with Understanding hexagonal tiles where I talked about – guess what – hexagonal tiles and above all about the difference from horizontal hexagonal tiles and vertical hexagonal tiles.

There is a lot of more theory and some ActionScript examples in the posts Hex maps creation and rollover, Finding adjacent cells in an hex map, Finding adjacent cells in an hex map – part 2 and Finding adjacent cells in an hex map – AS3 Version where all the theory behind hex maps is explained.

Now I am showing you how to create an hex map, both horizontal and vertical, center it on the stage and how to detect which hexagon you are moving the mouse over just using math. This way you should be able to port these scripts in any language you need.

Vertical hex maps

Here it is the example, move the mouse over the hexagons to place a marker on them:

And this is the source code:

And this now the same concept applied to…

Horizontal hex maps

Just like in previous example, move the mouse over the hexagons to place a marker:

And this is the – pretty similar – source code:

I hope this will help you in the creation of a game based on hexagonal maps. You can download the source code of all examples, and if you have questions, just leave a comment.

• MB

Honestly, don’t waste your time calculating which tile you’re hovering over. Give your tiles a mouseOver, mouseOut and stop worrying about it.

• Emanuele Feronato

You’re right, but knowledge is power :)

• Matthew Cooley

There are many, many scenarios where you are going to want know what hex intersects an x/y coordinate that does not involve mouse events; for example, an enemy spawns at a random x/y coordinate and his internal logic depends on what tile he is in, and what is happening in adjacent tiles. Using the mouse is an easy way to demonstrate the logic needed to accomplish part of that task.