Z axis in isometric tilemap
- by gyhgowvi
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?
