I have been trying to wrap my head around how to apply my isometric art enter image description here

into an array like so with correct z-indexing

enter image description here

In the long run I want to be able to select a specific tile and depending on what tile it is I can choose a different function via drop down.

I'd appreciate any help. Even links to isometric documentation on putting images onto tiles. Or even how to successfully put an isometric tile onto a div without it being selectable on the transparent parts of the tile.

Sorry if this was hard to understand.


When laying out your tiles you can use their xy-coordinates to determine what z-index to give them. Just add together the x and y values then add one to produce the z value.


  • (0, 0) = 0 + 0 + 1 = 1
  • (0, 1) = 0 + 1 + 1 = 2
  • (3, 3) = 3 + 3 + 1 = 7
  • 1
    \$\begingroup\$ That's brilliant! \$\endgroup\$ – Phantômaxx Sep 11 '18 at 11:19

The simplest solution I think would be to make another array the same size as the one you are using to display things with, perhaps call it the "depth array". You can by-hand fill in the z values into this array, or have some code to do it. This way you can use index for the on screen array as a lookup for z values into the "depth array".


Its 4 am and I am going to bed. But I figure that this might help you.

I found an old script where I did some Isometric stuff.

var x_map = x_map_base + (x * (tile_w / 2)) + ((y * tile_w / 2));
var y_map = y_map_base + (x * (tile_h / 2)) - ((y * tile_h / 2));   
var x_obj = x_obj_base + (x * (tile_w / 2)) + ((y * tile_w / 2));
var y_obj = y_obj_base + (x * (tile_h / 2)) - ((y * tile_h / 2));

I havent tested it for a long time. But it might help you along the way:


Server - Basically just a 2D array

Grab the files and take a look.

Good Night.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.