How would I apply my isometric art onto isometric CSS with correct Z-indexing

Question

I have been trying to wrap my head around how to apply my isometric art

into an array like so with correct z-indexing

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.

Answer 1

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.

Examples:

• (0, 0) = 0 + 0 + 1 = 1
• (0, 1) = 0 + 1 + 1 = 2
• (3, 3) = 3 + 3 + 1 = 7

Answer 2

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".

Answer 3

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:

index.html

Server - Basically just a 2D array

Grab the files and take a look.

Good Night.