Canvas Isometric game engine - moving the map

Question

I have been working through a tutorial (http://glacialflame.com/category/tutorial/) to build an Isometric game engine, but I would like the map to move with the character as the focus point.

So, when you move - the map centres on the character.

I have a little PasteBin here: http://pastebin.com/U75Pz4Yy

See it in action here: http://www.wikiword.co.uk/release-candidate/canvas/newEngine/index.html

Have a fiddle, by request! http://jsfiddle.net/neuroflux/vUxYg/2/

Note: This is for HTML5 and Canvas browsers only, don't moan if you are using IE6 ;)

Any ideas and help would be appreciated, I thought I could do it by updating each of the "tiles" in the array by +1 or -1 respectively, but I can't seem to do a ForEach loop for the tile images already on the canvas.

Cheers in advance!

Answer 1

There are several ways to attack this:

1. You can move the whole canvas, delete the elements which became invisible (eventually). So what if the top left corner is at -257467,374672? It's just one addition for the renderer.

2. Instead of moving the canvas, you can move the images of the times. So create an array for all the style elements of the map pieces and then, in the loop, move the background-image styles around. The map elements stay in place, only the image changes.

3. You can create/delete the DOM nodes plus move the existing ones. But from my experience, that's pretty expensive (since the browser needs to figure out what you changed and then update the DOM tree, flush the render caches, render the part you changes again, lots of objects are created and destroyed, ...)