2
\$\begingroup\$

I am developing a browser game based on a hex map. I am storing my data based on axial coordinates system.

Axial

I developed a function which shows me axial coordinates of hexes within $distance from a given hex. Now I want to show those hexes in a form in a HTML table.

The data that I have is only axial coordinates of center hex as well a list of axial coordinates of hexes within distance (not sorted in any way)

As shown in the transition scheme below, hexes may always be shown in form of a simple HTML table:

TableToHexes

But I am struggling at how to get each of the map hexes shown in a correct table field (row/column) of the table, assuming that table numbering looks like this:

enter image description here

To solve this out it seems to me that in first instance I need to determine the size of the HTML table that I need. If I will be able to determine what is table coordinate of center of the HTML table then I would be able to find out localisation of each hex in reference to the center hex.

In case of $distance = 1 I need 3 columns and 3 rows:

enter image description here

In case of $distance = 2 I need 5 columns and 5 rows:

enter image description here

This leads me to the conclusion that my required HTLM table size is:

$distance *2 + 1

The center hex lies in the middle of the table, so its coordinates are:

($distance *2 + 2) /2

But what is next, how to convert axial coordinates to table coordinates?

Improve this question
\$\endgroup\$
2
  • \$\begingroup\$ Looking at the 5x5 table, it looks like the first number is the table row and the second number is the table column. \$\endgroup\$
    – amitp
    Nov 20, 2015 at 17:35
  • \$\begingroup\$ This is a great guide to this: redblobgames.com/grids/hexagons \$\endgroup\$
    – Silent137
    Jan 14, 2016 at 20:37

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .