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

The Concepts

The key to scrolling is to keep track of where the heck you are in your large tile world, and therefore which tiles in your map to draw to the screen. For example, suppose that after the right arrow on the keyboard is pressed the sprite in your game has to "move" to the right in your map by two tiles. In your tile drawing function, you would have to recognize this change and blit a set of tiles to the screen that have been shifted by two tiles in the array, or, say 64 pixels in the world, to the right. As a result, your sprite appears to move as your tile world behind it changes. I'm sorry if this explanation is hard to understand, but I hope this concept will become clearer as we continue.

As you will see in a bit, we'll create two variables to store this information and the amount of change that has taken place in the map. These two variables will be used in our final version of the draw_tiles() function to decide which tiles in our world to draw to the screen.

As far as concepts go, that's about it. If you have these ideas down pat, you're ready to put this stuff into code.

Setup

Before we rewrite the draw_tiles() function, we have to provide some defines and globals.

#define TILE_SIZE       32
#define WORLD_SIZEX     20
#define WORLD_SIZEY     20
#define SCREEN_SIZEX    12
#define SCREEN_SIZEY    12

Here we defined the size of each tile as 32 pixels, the world size (in tiles) as 20 * 20, and the screen size (also in tiles) as 12 * 12. As a result, we'll have 12 * 12 (144) tiles viewable at a time on the screen, while there are 20 * 20 tiles total in our array. We had to make the map bigger than the screen viewable size so that we can witness the scrolling in action. Note: Depending on the resolution that you set for your DirectX app, you will probably not see the whole screen filled with tiles.

int world_camerax = 0;
int world_cameray = 0;

world_camerax and world_cameray, as I mentioned in the Concepts section, are the two variables that will keep track of the position in our world. They will be used together to determine which tiles in the total map array will be blitted to the screen. Right now, we'll initialize them to 0 so our current position is at (0, 0), or the top-left corner of the world/array. world_camerax will store the position in x coordinates, or the distance from the starting point 0. world_cameray will store the position in y coordinates, or the distance from the starting point 0. Again, if you have any problems understanding this, go back and read the Concepts section a couple times. If you're still having trouble, then it's probably my fault. :)

The last thing that we have to do before re-writing the draw_tiles() routine from Part I is to define our new world (20 tiles * 20 tiles), which will be larger than the last array from tutorial I.

char map[WORLD_SIZEY][WORLD_SIZEX] = {
     {2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2},
     {2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2}, };

Pretty large world we've got here, along with a little message. :)

Next : Drawing the Smooth Scrolling Tiles