How to find adjacent tiles in hexagonal maps – ALL and EVERY case explained

If you read my previous post about hexagonal maps: Understanding hexagonal tiles – updated with HTML5 examples thanks to Phaser, you will see there are two ways of representing hexagonal maps and finding which tile you can find at a generic x,y coordinate, according to the way hexagons are placed on the map.

When we need to find adjacent tiles of a given tile in an hexagon map, things get even more difficult because there are some things to consider if hex maps have a even or odd number of rows and columns.

Look at this picture:

Here we have the four types of hexagonal maps, let’s see them all:

UPPER LEFT: This is a vertical hex map, so each column is basically made by two hexagon columns. The upper-left hexagon is at coordinate (0,0), then the hexagon placed exactly below is at coordinate (0,2). To find the hexagon at coordinate (0,1) we must look at the exagon touching the bottom-right side.

As you can see in the picture, having an odd number of columns – nine – will also cause our map to have some missing coordinates in the 4th column, such as (4,1), (4,3), (4,5) and so on with all odd y numbers until (4,11). This may cause errors when looking at adjacent tiles, because not all columns are complete.

Also, hexagons with even y coordinate have different rules than hexagon with odd y coordinate to find their adjacent tiles. Just look at hexagon (2,4): to find its lower left adjacent tile we must look at (x-1,y+1), while to find the lower left adjacent tile of (2,5) we must look at (x,y+1).

UPPER RIGHT:

It’s the same thing as upper left example, but this is easier to work with as it has an even number of columns, so you won’t have to deal with missing coordinates.

LOWER LEFT:

The horizontal hex map basically features the same problems we found in vertical hex maps. In this case, an even number of rows – remember, “rows” as we are talking about horizontal maps now – prevents us to deal with missing coordinates, but there will be different rules to determine adiacent tiles according to hexagon y coordinate being even or odd: keeping (1,7) as an example, the bottom left hexagon will be at (x-1,y-1), but the bottom left hexagon of (1,8) is at (x,y-1).

LOWER RIGHT:

The lower right example is a horizontal map with an odd number of lines, so you will have to deal with missing row tiles. You won’t have (3,1), (3,3) and so on.

Enough boring theory, let’s have a look at the vertical hex map example:

Move the mouse to place the marker on an hexagon and highlight adjacent tiles.

And this is the source code, made with Phaser:

And this is the horizontal hex map example, with missing tiles too:

With its source code:

Now you are ready to create any kind of hexagon driven game.

Download the source code of the full examples.

  • MB

    That is way more complicated than it needs to be. Let’s assume we have “flat top hexes” … each column is just that: a column. The rows are also just that: rows. The only trick is that the rows zig zag as you go across the map. Each odd column (or even, whatever) is simply shifted down 50%. None of this “2 columns are a column” stuff. Just plain rows and columns like a normal square grid.

    • Emanuele Feronato

      It’s another approach to the problem, but you’ll face anyway the issue there are odd – or even – rows (or columns) which are shorter than the other ones. I’ll publish your idea too, probably using Unity C#

  • ozgur

    Hello,
    I have been reading your articles for a while, they are very nice, thank you.

    “Move the mouse to place the marker on an hexagon and highlight adjacent tiles.”
    what happens if you deploy it on mobile, there is no move.

    • Emanuele Feronato

      You can make the player touch the screen and detect touched and adjacent hexagons

  • Your example with some modifications: http://codepen.io/jdnichollsc/pen/ZGazGy

    Thanks Senpai! :D

  • Pingback: The hexagonal concept behind iOS blockbuster Down The Mountain | Emanuele Feronato()