Ok, you don't.

When doing the scrolling, you should be only actively moving the items that are visible to your player. So, you don't scroll your background to match your player, you move your background in to the screen as it becomes visible.

I know that didn't come across as clearly as I wanted, but think about it this way. Picture you level as one giant 10000x10000 pixel jpg, and your screen as a 640x480 viewport of that picture. You dont modify the underlying picture itself, you instead move around your viewport of that picture. Or in other words, your world doesn't get translated, your perspective of it does.

I can't give a thorough answer, I'm on my phone, but I wanted you to know the big image comment was just an analogy.

Google tile engine scrolling. That is what you want.

Say map is 10000x10000 like previous person stated lets assume that you want to scroll left and right. The "MAP" will have a fixed position, we will say 1 to 10000, and the viewport(or section that is viewable to player) is 640x480. If you wanted to scroll right:

Record the locations, X and Y or Both (both for top/bottom left/right scrolling). Then you need an Offset variable, I usually use OffsetX and OffsetY. Every time the player pushed the arrow(or whatever) that would move the character you change the Offset variable.

When drawing the map you need to make the starting position(X or Y) of your map that you are drawing increased by the Offset variable and then the ending position increased by the Offset + Screen(Width or Height depending on which you want to scroll)

Here is a coding example. Written in Java, but gives you a basic example. Ripped right out of my Scrolling RPG example. Ignore the collision code. Will supply entire source that I ripped this out but the code examples below should have good readability as I use decent variable names.


private void DrawMap(Graphics g, int[][][] map)
{
for (y = MapOffsetY / BlockHeight; y < MapOffsetY / BlockHeight + ScreenHeight / BlockHeight + 2; y++)
{
for (x = MapOffsetX / BlockWidth; x < MapOffsetX / BlockWidth + ScreenWidth / BlockWidth + 2; x++)
{
if (y < MapMaxY && y >= 0 && x < MapMaxX && x >= 0)
{
Block.setFrame(map[MAPNumber][y][x]);
draw_sprite(g, Block, x * BlockHeight - MapOffsetX, y * BlockWidth - MapOffsetY);
}
}
}
}
...
private void MoveMap(int[][][] map, int[][]BlockStruct)
{
int keystate = getKeyStates();
if (MoveMap)
{
if ((keystate & RIGHT_PRESSED) != 0 && ScrollRight
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX + (charBlob.getWidth() / 2) + STEP * 2, myBlob.y + MapOffsetY - (charBlob.getHeight() / 2) - STEP) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX + (charBlob.getWidth() / 2) + STEP * 2, myBlob.y + MapOffsetY + (charBlob.getHeight() / 2) + STEP) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX + (charBlob.getWidth() / 2) + STEP * 2, myBlob.y + MapOffsetY) == 0))
{
MapOffsetX += STEP;
if (MapOffsetX > (MapMaxX * BlockWidth) - ScreenWidth)
{
MapOffsetX = (MapMaxX * BlockWidth) - ScreenWidth;
ScrollRight = false;
MoveRight = true;
}
blobMove = true;
}
if ((keystate & LEFT_PRESSED) != 0 && ScrollLeft
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX - (charBlob.getWidth() / 2) - STEP * 2, myBlob.y + MapOffsetY - (charBlob.getHeight() / 2) - STEP) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX - (charBlob.getWidth() / 2) - STEP * 2, myBlob.y + MapOffsetY + (charBlob.getHeight() / 2) + STEP) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX - (charBlob.getWidth() / 2) - STEP * 2, myBlob.y + MapOffsetY) == 0))
{
MapOffsetX -= STEP;
if (MapOffsetX < 0)
{
MapOffsetX = 0;
ScrollLeft = false;
MoveLeft = true;
}
blobMove = true;
}
if ((keystate & UP_PRESSED) != 0 && ScrollUp
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX - (charBlob.getWidth() / 2) - STEP, myBlob.y + MapOffsetY - (charBlob.getHeight() / 2) - STEP * 2) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX + (charBlob.getWidth() / 2) + STEP, myBlob.y + MapOffsetY - (charBlob.getHeight() / 2) - STEP * 2) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX, myBlob.y + MapOffsetY - (charBlob.getHeight() / 2) - STEP * 2) == 0))
{
MapOffsetY -= STEP;
if (MapOffsetY < 0)
{
MapOffsetY = 0;
ScrollUp = false;
MoveUp = true;
}
blobMove = true;
}
if ((keystate & DOWN_PRESSED) != 0 && ScrollDown
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX - (charBlob.getWidth() / 2) - STEP, myBlob.y + MapOffsetY + (charBlob.getHeight() / 2) + STEP * 2) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX + (charBlob.getWidth() / 2) + STEP, myBlob.y + MapOffsetY + (charBlob.getHeight() / 2) + STEP * 2) == 0)
&& (Collided(map, BlockStruct, myBlob.x + MapOffsetX, myBlob.y + MapOffsetY + (charBlob.getHeight() / 2) + STEP * 2) == 0))
{
MapOffsetY += STEP;
if (MapOffsetY > (MapMaxY * BlockHeight) - ScreenHeight)
{
MapOffsetY = (MapMaxY * BlockHeight) - ScreenHeight;
ScrollDown = false;
MoveDown = true;
}
blobMove = true;
}
}
}



Pastebin of entire code: Canvas Java Sorry that you'll have to look through 655 lines of code, but this is a working example.

Hope that helps. This is Java for Mobile devices, should give example. There is A* implementation in code and a lot of collision code you can ignore, but no time to edit it all down to the basics.

If you need the basics I could write a simpler example tomorrow that does just the scrolling.

Actually what bloodisblue is trying to say that may not be coming off that well, is you want to keep the player at a fixed position on the screen(viewport) and instead of moving the entire map drawn completely every time you instead draw what only you can see relative to the players position based on the screen size and as the player moves you treat it much like a camera in a movie and you follow them and just like a movie, you cannot see what is outside the frame so therefore technically you can refer to it as it doesn't exist and you don't need to draw it.

For a computer you may have to draw a little ahead if using tiles to avoid the map edge jumping around.