Drawing isometric map in canvas / javascript

Question

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?

Answer 1

There is no player so to speak its a free looking thing (think more like age of empires). The player position is essentially the center of the screen.

If you have no player, and just draw the world, why complicate it with player positions? If that is the case I would have just defined the world position, (say top left where you start drawing). And starting from there render what you want to show in the viewport.

Don't overcomplicate it by stuffing in values you don't need.

Unless there is a particular reason for defining the center as player X that I'm not seeing?

Answer 2

Suggestion: slow down, make sure you are rendering the map nicely first. Then make sure you have the player on the map, and start moving the player ( and the camera ) on the map. This should result in a clearer solution. While nothing prevents having everything focused on the player, it is probably easier to have the player on the map.