Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm experimenting with isometric tile maps in JavaScript and HTML5 Canvas. I'm storing tile map data in JavaScript 2D array.

// 0 - Grass
// 1 - Dirt
// ...
var mapData = [
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0,

and draw

for(var i = 0; i < mapData.length; i++) {
    for(var j = 0; j < mapData[i].length; j++) {
        var p = iso2screen(i, j, 0); // X, Y, Z
        context.drawImage(tileArray[mapData[i][j]], p.x, p.y);

but this function mean's all tile Z axis is equal to zero.

var p = iso2screen(i, j, 0);

Maybe anyone have idea and how to do something like mapData[0][0] Z axis equal to 3 mapData[5][5] Z axis equal to 5?

I have idea: Write function for grass, dirt and store this function to 2D array and draw and later mapData[0][0].setZ(3); But it is good idea to write functions for each tiles?

share|improve this question
Your question is kind of unclear. Instead of saying "do something like..." Can you tell us what you want to do? I don't know how you're going to call .setZ(3) on an integer stored in an array. – Byte56 Jul 12 '12 at 4:56
.setZ(3) work if I'm create functions for each tiles and create "setZ" method, but maybe is other method when create functions for all tiles? – gyhgowvi Jul 12 '12 at 5:29

I'm assuming by Z axis we're kind of talking about the 'height' of the tile here.

If you're sure that there would only ever be one tile on each of the X and Y axes (like a heightmap) then you can just modify your map array to store two values rather than a number:

// mapData[i][j][0] is the tile Id, mapData[i][j][1] is the Z axis
var mapData = [
    [[0,0], [0,1], [0,0], [0,2], [0,3]],
    [[0,1], [0,0], [1,0, [0,1], [0,2],

If you're not sure of this (i.e, you might have caves or overhangs or similar features) then the way to do it is slices.

Slices are all the same size (the whole of your map) and you would have one for each and every Z level possible. You would also require a new tile type of 'Nothing', which means you just don't draw anything.

This way is more expensive, but if you need the flexibility it's the way to do it.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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