Im using 2D isometric tiles.
What i want to know is how to divide the map up in zones, and more importantly only draw the tiles visible on the canvas.
My current drawMap function looks like this:
function drawMap(){
var tileW = 64;
var tileH = 32;
for(i=0;i<map.length;i++){
for(j=0;j<map.length;j++){
var drawTile= map[j];
var xpos = (i-j)*tileH + mapX;
var ypos = (i+j)*tileH/2 + mapY;
ctx.drawImage(tileImg[drawTile],xpos,ypos);
if(i == playerX && j == playerY){
ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2));
}
if(i == xmouse && j == ymouse){
ctx.fillStyle = 'rgba(110, 160, 255, 0.5)';
ctx.beginPath();
ctx.moveTo(xpos, ypos+16);
ctx.lineTo(xpos+32, ypos);
ctx.lineTo(xpos+64, ypos+16);
ctx.lineTo(xpos+32, ypos+32);
ctx.fill();
}
}
}
}
Any examples of how i can adjust my code to improve it are appreciated.