Dear GameDev users,

i'm new in canvas world. and i need a help.

i'm create a 300x300 tile map (with 64x64 tiles). (19200px X 19200 px)

<canvas id="entities" width="1440" height="800">Your browser doesn't support HTML5 Canvas</canvas>

Added tiles with, every colls and rows drawImage(image, x, y);

x= 0,64,128,192 …..

y= 0,64,128,192 …..

i get my map. how can i scroll in this only looking the 1440x800px content.

Thanks!

Hello vsystech,

in case you haven't solved it already:

To scroll your tile map, you first add x/y-offsets to the drawing coordinates of your tiles.Like this: drawImage(image, x + offsetx, y + offsety). The offsets represent your “camera position”. Then, all you need to do is to set up keyboard event listeners (e.g. for the arrow keys) which modify the offsets on key press, like “if ”arrow left" key is pressed, decrement offset_x by 1".

This is the basic concept. In a more sophisticated version, you could add viewport culling, i.e. only draw the tiles that are really visible at the moment.