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:


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



x_out = .7071067811*x-.7071067813*z,
y_out = -.4082482905*x+.8164965809*y-.4082482904*z

Rotation by 120° in screen space yields


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:



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:


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:


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?
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 1
» All times are UTC - 5 Hours
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum