Question

I was wondering how to set canvas to view a specific grid spot ?

For example, my isometric map uses x:y co ordinates. And when i load the map is some what off the canvas, about half of it.. so i want to set the center of the camera to the center tile of the map. So that the entire grid is viewable in the canvas.

img.onload = function(){
tiles_wide = 18; 
tiles_long = 19; 

for (i=0;i<tiles_wide;i++){ //horizontal

  for (j=0;j<tiles_long;j++){ // vertical

    var x = (i-j)*(img.height/2);
    var y = (i+j)*(img.height/4);

    ctx.drawImage(img,x,y);
        }
    }

}

Hope some one can help 🙂

Answer 1

when drawing the image you could do
x+(tiles_wide/2)*tilewidth and the same for y.

All collisions and game function will still run at the correct coordinates but you will be drawing with an offset creating an illusion of a camera.

Make sure you are only drawing at the offset and not setting these “objects” at the offset.

Also the tilewidth var should be the width of the tile in pixels. Is that what you were getting after?