I''ve been trying to figure out how to get smooth side scrolling, but I just cannot figure it out. I have a TileMap that stores 32x32 tiles. I made my player start in the middle of the screen, and whenever he moves, his x,y value becomes +/- 2. I made a startTileY = 0, endTileY = 20, since my screen is 640x640. I got it to work so whenever the player moves a certain amount, the start and end tile are incremented. However, this looks choppy. Does anyone have an algorithm that does smooth side scrolling? I looked at Jim Adams tutorial on this site, but I couldn''t understand it. I don''t know why I''m having such difficulty grasping this concept. And one more thing, in the tutorials I found relating to this, people created an offsetX, offsetY. What are these values intended for?

simply:

You have WORLD SPACE and then you have SCREEN SPACE. The world space is where all your objects move around in regardless of your screen size. The screen space is where the objects are on the actual screen (if they in fact are on the screen).

The trick is to know where on the screen your objects are if you store their positions in world space (all objects should be stored in world space!)

You also need to record where the screen is in the world. Imagine a rectangle (the screen) that moves around inside another rectangle (the world). Keep track of the X and Y offsets of the screen''s top left corner in relation to the world''s top left corner.

Then the formula is:

SCREEN_COORD = WORLD_COORD - SCREEN_OFFSET

example:

your guy is at world coord 500x,700y. The screen is currently off by 200x,300y. So your guy is on the screen at exactly 300x, 400y pixels.

and that''s it!

The variables I reference are part of this diagram

The basic problem in smooth scrolling is to find W and H given any tile at point (X, Y) so that you can blit only that section of the tile. First we know Tile Width and Tile Height, the width of the visible area of the map (View Width), the height of the visible area of the map (View Height), and the coordinate location of the visible area on the map (OX, OY). OX and OY are the x and y offsets: they are the distance the visible area is from the origin.

First let''s define when a tile is visible:
We can see from the diagram that a tile is visible if either its right edge is greater than OX and its left edge is less than OX + View Width and if its bottom edge is greater than OY and if its top edge is less than OY + View Height.

For each visible tile we need to find the visible region so that we can clip the rest. We''ll deal with the left first:
From the diagram we can see that if X is greater than or equal to OX than the left edge is visible and the clipped region of the tile would begin at the far left of the tile. If X is less than OX than the visible left of the tile doesn''t start until the distance between OX and X (that is, OX - X).

Now for the right edge:
From the diagram we can see that if the X + Tile Width is less than or equal to OX + View Width then the right edge is visible and the clipping region of the tile would extend to the far right of the tile. If X + Tile Width is greater than OX + View Width then the right edge is not visible and the clipping region ends at (OX + View Width) - X.

The top and bottom of the clipping region is similar. The top follows the same lines as the left and the bottom follows the same lines as the right.

Colin Jeanne | Invader''s Realm
"I forgot I had the Scroll Lock key until a few weeks ago when some asshole program used it. It even used it right" - Conner McCloud

I feel so stupid not being able to do this. Thank you, the examples and explanations are excellent, and now the only way I''m going to get this to work is by drawing it out. Later.

My side-scroll demo if you haven''t seen it, someday I''ll turn this into a game

source | EXE

Its smooth enough for me.

Phil P

Drawing it is not a bad idea. I keep a pad of graph paper and pen next to the computer for that very reason.

Man, this brings back memories of my sidescroller. It starred a half man, half robo-spider. I had a pretty sweet scrolling engine, but I can''t find the CD I backed it up on. Anyway, the offset is so that part of a tile can be displayed onscreen. This is what gives the smooth scrolling effect.

Do you guys think this is alright...

int worldCameraX = 0;
int worldCameraY = 0;

player moves and camera adjusted accordingly

draw() {
// check boundaries and set camera if necessary
int startTileX = (worldCameraX / tile_size);
int startTileY = (worldCameraY / tile_size);
int lastTileX = startTileX + num_tiles_possible_x;
int lastTileY = startTileY + num_tiles_possible_y;

for (int x = startTileX; x < lastTileX; x++) {
for (int y = startTileY; y < lastTileY; y++) {
g.drawImage(map.getTile(y,x), x*32 - worldCameraX,
y*32 - worldCameraY, null);
}
}
drawMainCharacter(player.getX() - worldCameraX, player.getX() - world
CameraY);

}


The only problem is that the scrolling isn''t perfectly smooth. Otherwise, do you think this code is coded correctly?