Scrolling a tile map

What we have created so far is fine for a game that takes place in one area that is the size of our window, but what about if we want to have large maps that are open to exploration. This is where scrolling comes into play. We have actually implemented this already but have not yet gone through it step-by-step or seen it in action. Let's do this now.

First of all, we must resize our map in the Tiled application. Navigating to Map | Resize Map… will allow us to do this. Leave the height of our map at 15 and change the width to 60. Fill up the remaining squares with whatever tiles you like. The map would then look like the following screenshot:

Save the map and we can look at the code:

int x, y, x2, y2 = 0;

x = m_position.getX() / m_tileSize;
y = m_position.getY() / m_tileSize;

x2 = int(m_position.getX()) % m_tileSize;
y2 = int(m_position.getY()) % m_tileSize;

When scrolling the map we don't actually move it more than a tile width; we use the position value to work out where...