« Back to tutorial listing

— 2D platformer tutorial —
Part 2: Scrolling the map

Introduction

Note: this tutorial series builds upon the ones that came before it. If you aren't familiar with the previous tutorials, or the prior ones of this series, you should read those first.

This tutorial will explain how to scroll a 2D map. Extract the archive, run cmake CMakeLists.txt, followed by make to build. Once compiling is finished type ./ppp02 to run the code.

A 1280 x 720 window will open, with a series of coloured squares displayed over a light blue background. The map can be scrolled around by using the WSAD control scheme. Close the window by clicking on the window's close button.

Inspecting the code

Scrolling the map around is not too difficult a task, as can be seen from the length of this tutorial. Before we can scroll the map, we need to do some setup. As always, this will involve defs.h and structs.h. defs.h sees the addition of one new line:

#define PLAYER_MOVE_SPEED 12

PLAYER_MOVE_SPEED will simply define how fast the camera will move when we scroll it around. The camera itself also needs to be defined. Our camera is nothing special - it's just x and y coordinates. We can add this to the Stage struct:

typedef struct {
	SDL_Point camera;
	...
} Stage;

The camera is simply an SDL_Point. Nothing special. Now, let's look at the actual map drawing code. This a quite a bit different to what we had before. We'll walk through the drawMap function:

void drawMap(void)
{
	int x, y, n, x1, x2, y1, y2, mx, my;

	x1 = (stage.camera.x % TILE_SIZE) * -1;
	x2 = x1 + MAP_RENDER_WIDTH * TILE_SIZE + (x1 == 0 ? 0 : TILE_SIZE);

	y1 = (stage.camera.y % TILE_SIZE) * -1;
	y2 = y1 + MAP_RENDER_HEIGHT * TILE_SIZE + (y1 == 0 ? 0 : TILE_SIZE);

	mx = stage.camera.x / TILE_SIZE;
	my = stage.camera.y / TILE_SIZE;

	for (y = y1 ; y < y2 ; y += TILE_SIZE)
	{
		for (x = x1 ; x < x2 ; x += TILE_SIZE)
		{
			if (mx >= 0 && my >= 0 && mx < MAP_WIDTH && my < MAP_HEIGHT)
			{
				n = stage.map[mx][my];

				if (n > 0)
				{
					blit(tiles[n], x, y, 0);
				}
			}

			mx++;
		}

		mx = stage.camera.x / TILE_SIZE;

		my++;
	}
}

To draw the map according to the position of the camera, we need to work out where to draw from and to on both the x and y axis. Starting with the x axis, and the x1 and x2 variables. We calculate x1 (our from location) by calculating the TILE_SIZE modulo of the camera's x coordinate. With TILE_SIZE being 64, this will give us a value between 0 and 63. We then multiply this value by -1, to get the negative value. This means that we will (for the most part) be starting the map drawing from offscreen. Next, we want to calculate the x2 value (our to location). This is simply a case of drawing from x1 to MAP_RENDER_WIDTH * TILE_SIZE. Since there is the likelihood that we'll be drawing from a negative position, we may also need to draw one extra tile (in effect, creating overscan). To do this, we need only check if x1 is not zero and add TILE_SIZE to x2 (x1 == 0 ? 0 : TILE_SIZE).

Calculations for drawing the y axis is handled in the same way, only using the camera's y coordinate and the MAP_RENDER_HEIGHT.

Next, we need to work out which tiles we want to draw. We do this by calculating two values: mx and my. These are calculated by dividing the camera's x and y coordinates by TILE_SIZE. With this done, we're ready to begin the main drawing loop. We will draw the rows and columns as before, y1 to y2 and x1 to x2, incrementing by TILE_SIZE each time. As we draw each column, we increment mx by one, so we can draw the next relevant tile. Once we reach the end of the row, we increment my by 1 and reset mx to its initial value. As we're moving the map around, and due to the overscan, we need to ensure our mx and my values are within the bounds of the map array before we blit the tile to be used. We do this by testing to see if mx and my are both >= and are < MAP_WIDTH / MAP_HEIGHT.

It might look complex, but drawing a scrolling map according to the camera position is quite simple. If it still looks complex, consider one line at a time.

We need to add just two other changes to allow us to move the map around - responding to key presses to move the camera position, and also to restrict the camera to the map constraints. Starting with player.c, where we've added a function called doPlayer to move the camera around:

void doPlayer(void)
{
	if (app.keyboard[SDL_SCANCODE_A])
	{
		stage.camera.x -= PLAYER_MOVE_SPEED;
	}

	if (app.keyboard[SDL_SCANCODE_D])
	{
		stage.camera.x += PLAYER_MOVE_SPEED;
	}

	if (app.keyboard[SDL_SCANCODE_W])
	{
		stage.camera.y -= PLAYER_MOVE_SPEED;
	}

	if (app.keyboard[SDL_SCANCODE_S])
	{
		stage.camera.y += PLAYER_MOVE_SPEED;
	}
}

Nothing out of the ordinary here - we're responding to the WASD control scheme to add and subtract PLAYER_MOVE_SPEED from the camera's x and y. To constrain the camera's movement, we'll create a new function called doCamera in a file called camera.c:

void doCamera(void)
{
	stage.camera.x = MIN(MAX(stage.camera.x, 0), (MAP_WIDTH * TILE_SIZE) - SCREEN_WIDTH);
	stage.camera.y = MIN(MAX(stage.camera.y, 0), (MAP_HEIGHT * TILE_SIZE) - SCREEN_HEIGHT);
}

doCamera limits the camera's x and y coordinates to a minimum of 0, and a maximum of the map's width and height minus the screen's width and height. In effect, this means the camera will never scroll beyond the map boundary. Putting this all together, we need only call these new functions in stage.c's own logic function:

static void logic(void)
{
	doPlayer();

	doCamera();
}

With these changes, the map can now be scrolled using the WASD keys and will be constrained to the map bounds.

We've made some great steps so far. We're able to load and display a map, and also scroll it around. But a platform game requires a character to control and guide around the level. In the next tutorial, we'll look at adding Pete (the titular character) to the game, and see how we can make him interact with the map so that he can walk on the tiles and hop around.

Purchase

The source code for all parts of this tutorial (including assets) is available for purchase:

From itch.io

It is also available as part of the SDL2 tutorial bundle: