Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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
3  
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
add comment

1 Answer

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
add comment

Your Answer

 
discard

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.