# Character movement on a 2D tile map

I'm working at making a HTML5 game. Top down, closest thing I can equate it to is the gameboy zeldas, but open world and no rooms.

What I have so far is a procedurally generated map in a multi dimensional array. And a starting position on the map. Along with this I have an array of movable and non movable tile ID's.

I also have a class for my player and have him being rendered out in the center of the starting tile.

My problem however is getting the movement sorted out for the player. I want to be able to have the character free move around the map (pixel by pixel essentially) ontop of this 2D generated world. Ideally this would allow the user to move around the walk able area of the canvas. this is simple enough for me to do, but I am having problems now moving the world.

If the user is 20% from the edge of the screen i want the world to start panning in the direction the player is heading. But I'm rather lacking in ideas of how to do this.

I've looked around for some tutorials, but am coming up blank on ideas of how to generate the playable area (zoomed in) and to then move this generated area under the player when they reach near the end of the screen.

My current idea was to generate a certain amount of tiles full size to fill the screen and place the player i the middle. Then when the user approaches the edge of the screen start generating the tiles offset by the distance moved and the direction. I can kind of see this working but I really have no idea if this is the best or easiest to code of methods for generating the world.

sorry for the lack of code but I'm still just in the theory stages of working this all out.

Generating the world:

This is often done by dividing the world into a big rectangular areas (blocks).

You decide how big the areas are - making them big enough that one fills the whole screen is a good starting point.

You generate the area that the player starts in, and the 8 areas that go around it, like so:

123
4X5  < -- X is the start
678


When the player walks out of the first area into one of the others, you generate all the areas around that area. This means that areas will always be generated before the player walks into them.

If the user is 20% from the edge of the screen i want the world to start panning in the direction the player is heading

Like Byte56 said this is usually done with a camera.

Have a camera object that has an x and y position.

Every time you draw something, subtract the camera's position from the thing's position.

drawHero(hero.x - camera.x, hero.y - camera.y)


Then you can make some rules to make the camera follow the hero.

if (hero.x > camera.x + screenWidth * 0.8) camera.x += 1; //hero is 20% from right edge of the screen, so chase after them with the camera.