PC Games

Orb
Lasagne Monsters
Three Guys Apocalypse
Water Closet
Blob Wars : Attrition
The Legend of Edgar
TBFTSS: The Pandoran War
Three Guys
Blob Wars : Blob and Conquer
Blob Wars : Metal Blob Solid
Project: Starfighter
TANX Squadron

Android Games

DDDDD
Number Blocks
Match 3 Warriors

Tutorials

2D shoot 'em up
2D top-down shooter
2D platform game
Sprite atlas tutorial
Working with TTF fonts
2D adventure game
Widget tutorial
2D shoot 'em up sequel
2D run and gun
Roguelike
SDL 1 tutorials (outdated)

Latest Updates

SDL2 Rogue tutorial
Wed, 29th September 2021

SDL2 Gunner tutorial
Thu, 26th August 2021

SDL2 Shooter 2 tutorial
Tue, 13th July 2021

SDL2 Widget tutorial
Fri, 18th June 2021

SDL2 Adventure tutorial
Tue, 8th June 2021

All Updates »

Tags

android (3)
battle-for-the-solar-system (9)
blob-wars (9)
brexit (1)
code (6)
edgar (6)
games (37)
lasagne-monsters (1)
making-of (5)
match3 (1)
numberblocksonline (1)
orb (2)
site (1)
tanx (4)
three-guys (3)
three-guys-apocalypse (3)
tutorials (8)
water-closet (3)

Books

« 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. Unpack the code and then type 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 here:

It is also available as part of the SDL2 tutorial bundle (with on-going updates):

If you do not wish to create an itch.io account, you can also purchase the tutorial bundle using PayPal. This method will be slower, however, as it will require manual verification of the transaction.

Comments

Share your comments and thoughts below. All comments are anonymous and cannot be edited.

 

Mobile site