Tilemap storage (The Easy Part):

Your array of tiles should be stored as a 2d array, with a skewed x/y axis. This is pretty straightforward.

Rendering (The Slightly Tricky Part):

For rendering, we shift to a surface that's been cut from a body-centered cubic lattice. Notice that the (x,y) coordinates of each cell have remained the same, and that for each cell, x+y=-z. The large numerals represent the coordinates at the center of that cube (which is projected into our rendering as a hexagon), and the small numerals represent the coordinates of that vertex. The drawing formulas (and converting screen-space coordinates backwards) depend on your choice of projection and rendering technique, but there are 2 basic approaches. The simple way looks something like this (assuming you have a bunch of 2d images with transparency around the hexagonal images):

The other one is a proper orthographic transformation (in theory, a perspective transformation ought to work too, but it might produce odd looking results). For every point you want to render you apply these transformations:

The usual choices of a and b for isometric projection are a=cos⁻¹(√(2/3)) and b=π/4

Yielding:

Rotation by 120° in screen space yields

Which should produce the grid pictured when using the down-screen is +y convention. Note that for both of these, the formula for the 2d y coordinate may need to be inverted, depending on your screen-space coordinate conventions).

Distance formulas:

This really depends on how you want to do distance. In my opinion, there are two particularly useful ones.

One for inter-tile distance counted in number of tiles:

And one for inter-vertex distance counted in number of edges:

Useful/Important invariants:

For a tile:

For a vertex:

A value of +(1/2) means you're on a vertex that looks like Y, and a value of -(1/2) means you're on a vertex looks like λ.

Finding coordinates of the cells neighboring a Y vertex:

and coordinates of the cells neighboring a λ vertex:

Any questions or suggestions?

Your array of tiles should be stored as a 2d array, with a skewed x/y axis. This is pretty straightforward.

Rendering (The Slightly Tricky Part):

For rendering, we shift to a surface that's been cut from a body-centered cubic lattice. Notice that the (x,y) coordinates of each cell have remained the same, and that for each cell, x+y=-z. The large numerals represent the coordinates at the center of that cube (which is projected into our rendering as a hexagon), and the small numerals represent the coordinates of that vertex. The drawing formulas (and converting screen-space coordinates backwards) depend on your choice of projection and rendering technique, but there are 2 basic approaches. The simple way looks something like this (assuming you have a bunch of 2d images with transparency around the hexagonal images):

**Code:**```
```

for(j=0;j<num_rows;j++)

{

for(i=0;i<num_cols;i++)

{

drawTile(tile_map_imgs[j][i],x=(i-j)*cos(π/3),y=(i+j)*sin(π/3));

}

}

The other one is a proper orthographic transformation (in theory, a perspective transformation ought to work too, but it might produce odd looking results). For every point you want to render you apply these transformations:

**Code:**```
```

x_out = cos(b)*x-sin(b)*y,

y_out = -sin(a)*sin(b)*x+cos(a)*y-sin(a)*cos(b)*z

The usual choices of a and b for isometric projection are a=cos⁻¹(√(2/3)) and b=π/4

Yielding:

**Code:**```
```

x_out = .7071067811*x-.7071067813*z,

y_out = -.4082482905*x+.8164965809*y-.4082482904*z

Rotation by 120° in screen space yields

**Code:**```
```

x_out = .7071067813*x-.7071067815*y

y_out = .4082482908*x+.4082482904*y-.8164965812*z

Which should produce the grid pictured when using the down-screen is +y convention. Note that for both of these, the formula for the 2d y coordinate may need to be inverted, depending on your screen-space coordinate conventions).

Distance formulas:

This really depends on how you want to do distance. In my opinion, there are two particularly useful ones.

One for inter-tile distance counted in number of tiles:

**Code:**```
```

D=max(ΔX,ΔY,ΔZ)

And one for inter-vertex distance counted in number of edges:

**Code:**```
```

D=|ΔX|+|ΔY|+|ΔZ|

Useful/Important invariants:

For a tile:

**Code:**`x+y=-z`

For a vertex:

**Code:**`x+y+z=±(1/2)`

A value of +(1/2) means you're on a vertex that looks like Y, and a value of -(1/2) means you're on a vertex looks like λ.

Finding coordinates of the cells neighboring a Y vertex:

**Code:**```
```

Cell_Above = {x,y,z}+{-0.5,0.5,0.5}

Cell_Left = {x,y,z}+{-0.5,0.5,-0.5}

Cell_Right = {x,y,z}+{0.5,-0.5,-0.5}

and coordinates of the cells neighboring a λ vertex:

**Code:**```
```

Cell_Below = {x,y,z}+{0.5,0.5,-0.5}

Cell_Left = {x,y,z}+{-0.5,0.5,0.5}

Cell_Right = {x,y,z}+{0.5,-0.5,0.5}

Any questions or suggestions?