Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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;


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?

share|improve this question
up vote 2 down vote accepted

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?

share|improve this answer
Because i render only tiles visible in the screen from the center of the screen reducing amount of draws needed. – Dave Mar 20 '12 at 2:12
Try with my solution and it will be alot easier, use the left corner as view position, and from there draw what fits on the screen. – justanotherhobbyist Mar 20 '12 at 14:55

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.

share|improve this answer
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. – Dave Mar 11 '12 at 3:14

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.