Contents  Smooth Scrolling  The Concepts  Drawing  Final Thoughts  Printable version     The Series  Part 1  Part 2

Drawing the Smooth Scrolling Tiles

Now to rewrite the draw_tiles() routine.

void draw_tiles(void)
{
  int tile;
  int x, y;
  int scroll_x, scroll_y;   // (NEW) 
  int offset_x, offset_y;   // (NEW) 


  RECT tile_src;

tile is going to be used later in determining if the tile map[scroll_y][scroll_x], for example, has an ID# of 1 or 2 when we go through the loop of the map array. x and y are the two variables used in drawing the tiles at their appropriate locations. The RECT tile_src is going to specify which graphic is going to be used at each tile location, pointing at the offscreen surface. Whe

scroll_x and scroll_y will serve the function that the regular x and y variables served in the draw_tiles() function from Tutorial 1. You may be asking, "Why can't we just use x and y again?" Good question. The answer is that some calculations have to be done with the "world camera" that include the x and y variables, as you will see in the next steps, so the product of these calculations will be placed in scroll_x and scroll_y so that we can still use x and y, with their original values, for the blitting of the tiles.

offset_x and offset_y will be used in determining the very fine, or precise location to draw our tiles at. These two variables are the heart of the "smooth" in Smooth Scrolling.

  for (y = 0; y < SCREEN_SIZEY; y++) 
  {
    for (x = 0; x < SCREEN_SIZEX; x++) 
    { 
      // (NEW)
      scroll_x = x + (world_camerax / TILE_SIZE);  
      scroll_y = y + (world_cameray / TILE_SIZE);

      // (NEW)
      offset_x = world_camerax & (TILE_SIZE - 1);
      offset_y = world_cameray & (TILE_SIZE - 1);

      tile = map[scroll_y][scroll_x];

Ok, some new stuff here. First, a double-nested loop is established in order to loop through our map and capture the ID# of each tile.

Next, scroll_x and scroll_x are defined as the values of x and y, respectively, added to the amount of scrolling (in tiles) that occurred in the world so far (the world_camera variables).

Then the offset variables are defined, which will be used later in blitting. What we will do is subtract the offset variables (the amount of "smooth scroll") from the final tile location.

      tile_src.left    =  (tile - 1) * TILE_SIZE;
      tile_src.top     =  0;
      tile_src.right   =  tile * TILE_SIZE;
      tile_src.bottom  =  TILE_SIZE;

The tile_src RECT is now set up, depending on the tile ID stored in tile for the tile at map[scroll_y][scroll_x];

      // (MODIFIED)
      BltFast((x * TILE_SIZE) - offset_x, (y * TILE_SIZE) - offset_y,
              lpddsoffscreen, &tile_src, NULL);	

    }
  }
}

Now we blit the tile at the correct screen coordinates, which would be the x and y variable positions * 32 pixels - the "smooth scroll" stored in the offset variables. I used lpddsoffscreen as the name of the DirectX surface where my bitmap is loaded to. Yours might be loaded to a differently named surface.

Next : Final Thoughts