Javascript Isometric draw optimization
- by hustlerinc
I'm having trouble with isometric tiles drawing.
At the moment I got an array with the tiles i want to draw.
And it all works fine until i increase the size of the array.
Since I draw ALL tiles on the map it really affects the game performance (obviously) :D.
My problem is I'm no genius when it comes to javascript and I haven't managed to just draw what is in viewport.
Should be fairly simple for an expert though because its fixed sizes etc.
Canvas is 960x480 pixels, each tile 64x32.
This gives 16 tiles on first row, 15 on the next etc. for a total of 16 rows.
Tile 0,0 is in the top-right corner. And draws X up to down and Y right to left.
Going through the tiles on the first row from left to right as +X -Y.
Here is the relevant part of my drawMap()
function drawMap(){
var tileW = 64; // Tile Width
var tileH = 32; // Tile Height
var mapX = 960-32;
var mapY = -16;
for(i=0;i<map.length;i++){
for(j=0;j<map[i].length;j++){
var drawTile = map[i][j];
var drawObj = objectMap[i][j];
var xpos = (i-j)*tileH + mapX;
var ypos = (i+j)*tileH/2 + mapY; // Place the tiles isometric.
ctx.drawImage(tileImg[drawTile],xpos,ypos);
if(drawObj){
ctx.drawImage(objectImg[drawObj-1],xpos,ypos-(objectImg[drawObj- 1]));
}
}
}
}
Could anyone please help me how to translate this to just draw the relevant tiles?
It would be deeply appreciated.
