Drawing isometric map in canvas / javascript
- by Dave
I have a problem with my map design for my tiles.
I set player position which is meant to be the middle tile that the canvas is looking at.
How ever the calculation to put them in x:y pixel location is completely messed up for me and i don't know how to fix it.
This is what i tried:
var offset_x = 0; //used for scrolling on x
var offset_y = 0; //used for scrolling on y
var prev_mousex = 0; //for movePos function
var prev_mousey = 0; //for movePos function
function movePos(e){
if (prev_mousex === 0 && prev_mousey === 0) {
prev_mousex = e.pageX;
prev_mousey = e.pageY;
}
offset_x = offset_x + (e.pageX - prev_mousex);
offset_y = offset_y + (e.pageY - prev_mousey);
prev_mousex = e.pageX;
prev_mousey = e.pageY;
run = true;
}
player_posx = 5;
player_posy = 55;
ct = 19;
for (i = (player_posx-ct); i < (player_posx+ct); i++){ //horizontal
for (j=(player_posy-ct); j < (player_posy+ct); j++){ // vertical
//img[0] is 64by64 but the graphic is 64by32 the rest is alpha space
var x = (i-j)*(img[0].height/2) + (canvas.width/2)-(img[0].width/2);
var y = (i+j)*(img[0].height/4);
var abposx = x - offset_x;
var abposy = y - offset_y;
ctx.drawImage(img[0],abposx,abposy);
}
}
Now based on these numbers the first render-able tile is I = 0 & J = 36. As numbers in the negative are not in the array.
But for I=0 and J= 36 the position it calculates is : -1120 : 592
Does any one know how to center it to canvas view properly?
