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):
Code:
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:
The usual choices of a and b for isometric projection are a=cos⁻¹(√(2/3)) and b=π/4
Yielding:
Code:
Rotation by 120° in screen space yields
Code:
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:
And one for inter-vertex distance counted in number of edges:
Code:
Useful/Important invariants:
For a tile:
Code:
For a vertex:
Code:
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:
and coordinates of the cells neighboring a λ vertex:
Code:
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*zWhich 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=-zFor 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?
