Intermediate Tutorials

Intermediate Game Tutorial #2 - Scrolling a tile based map

Introduction

This tutorial demonstrates how to scroll around a tile based map.

Compile and run tutorial12. The program will read the map data file and display the map on the screen. Use the arrow keys (not the ones on the numeric pad) to scroll the map around. Closing the window or pressing Escape will exit the program.

An in-depth look

In the previous tutorial, the map size was restricted to 20 x 15 tiles. We have updated the Map structure to allow scrolling and also allow dynamic map sizes. Below is the change we have made to structs.h:

typedef struct Map
{
    int startX, startY;
    int maxX, maxY;
    int tile[MAX_MAP_Y][MAX_MAP_X];
} Map;

The map loading code in map.c has changed to make use of these new variables:

void loadMap(char *name)
{
    int x, y;
    FILE *fp;

    fp = fopen(name, "rb");

    /* If we can't open the map then exit */

    if (fp == NULL)
    {
        printf("Failed to open map %s\n", name);

        exit(1);
    }

    /* Read the data from the file into the map */

    for (y=0;y<MAX_MAP_Y;y++)
    {
        for (x=0;x<MAX_MAP_X;x++)
        {
            fscanf(fp, "%d", &map.tile[y][x]);
        }
    }

    /* Set the start coordinates */

    map.startX = map.startY = 0;

    /* Set the maximum scroll position of the map */

    map.maxX = MAX_MAP_X * TILE_SIZE;
    map.maxY = MAX_MAP_Y * TILE_SIZE;

    /* Close the file afterwards */

    fclose(fp);
}

void doMap()
{
    if (input.left == 1)
    {
        map.startX -= SCROLL_SPEED;

        if (map.startX < 0)
        {
            map.startX = 0;
        }
    }

    else if (input.right == 1)
    {
        map.startX += SCROLL_SPEED;

        if (map.startX + SCREEN_WIDTH >= map.maxX)
        {
            map.startX = map.maxX - SCREEN_WIDTH;
        }
    }

    if (input.up == 1)
    {
        map.startY -= SCROLL_SPEED;

        if (map.startY < 0)
        {
            map.startY = 0;
        }
    }

    else if (input.down == 1)
    {
        map.startY += SCROLL_SPEED;

        if (map.startY + SCREEN_HEIGHT >= map.maxY)
        {
            map.startY = map.maxY - SCREEN_HEIGHT;
        }
    }
}

void drawMap()
{
    int x, y, mapX, x1, x2, mapY, y1, y2;

    mapX = map.startX / TILE_SIZE;
    x1 = (map.startX % TILE_SIZE) * -1;
    x2 = x1 + SCREEN_WIDTH + (x1 == 0 ? 0 : TILE_SIZE);

    mapY = map.startY / TILE_SIZE;
    y1 = (map.startY % TILE_SIZE) * -1;
    y2 = y1 + SCREEN_HEIGHT + (y1 == 0 ? 0 : TILE_SIZE);

    /* Draw the background */

    drawImage(backgroundImage, 0, 0);

    /* Draw the map starting at the startX and startY */

    for (y=y1;y<y2;y+=TILE_SIZE)
    {
        mapX = map.startX / TILE_SIZE;

        for (x=x1;x<x2;x+=TILE_SIZE)
        {
            if (map.tile[mapY][mapX] != 0)
            {
                drawImage(brickImage, x, y);
            }

            mapX++;
        }

        mapY++;
    }
}

mapX = map.startX / TILE_SIZE;

x1 = (map.startX % TILE_SIZE) * -1;

x2 = x1 + SCREEN_WIDTH + (x1 == 0 ? 0 : TILE_SIZE);

for (y=y1;y<y2;y+=TILE_SIZE)
{
    mapX = map.startX / TILE_SIZE;

    for (x=x1;x<x2;x+=TILE_SIZE)
    {
        if (map.tile[mapY][mapX] != 0)
        {
            drawImage(brickImage, x, y);
        }

        mapX++;
    }

    mapY++;
}

The remaining files and functions have been covered in the basic tutorials so we will not look at them.

Conclusion

Implementing scrolling does require a small amount of care to ensure that it is done correctly. The map is in the same format as before so you can again edit the file to change the map layout. In the next tutorial we will create a map editor to assist with the creation of maps.

Downloads

Source Code