If you go to the Map drop-down menu and select Resize Map, you will be presented with a dialog box that has the current width and height, in tiles, of our map. If you simply double the width value and click on OK, you will find that your map is now twice the size of the width, as shown in the following screenshot:

Hopefully, your screen looks somewhat similar to mine. Next, we need to add some more tiles to our Tile Layer. Feel free to create yours as you wish; the Tile Layer that I created looks like the one shown in the following screenshot:

As you can see, this is a simple mirror image of what we already have.

If you try to run the project now, you will find that Pete is still constrained within the screen. He can't access the rest of the level! Let's fix this now.

Before we do this, let's just think about what we need to do here. We need to:

First, let's tackle the problem of Pete moving off the screen. If we look at our GameScreen class again, we can see that we have a method called stopPeteLeavingTheScreen(). Here is the code for it in case you have forgotten:

private void stopPeteLeavingTheScreen() {
  if (pete.getY() < 0) {
    pete.setPosition(pete.getX(), 0);
    pete.landed();
  }
  if (pete.getX() < 0) {
    pete.setPosition(0, pete.getY());
  }
  if (pete.getX() + Pete.WIDTH > WORLD_WIDTH) {
    pete.setPosition(WORLD_WIDTH - Pete.WIDTH, pete.getY());
  }
}

We are interested in the last part of the code. Currently, we are saying that if the right-hand side of Pete (Pete's x coordinate plus his width) is greater than the width of the world, according to the camera, then we need to reset his position. However, we need to update the same as the level's width as well. So, let's update the method as follows:

private void stopPeteLeavingTheScreen() {
  if (pete.getY() < 0) {
    pete.setPosition(pete.getX(), 0);
    pete.landed();
  }
  if (pete.getX() < 0) {
    pete.setPosition(0, pete.getY());
  }
  TiledMapTileLayer tiledMapTileLayer = (TiledMapTileLayer) tiledMap.getLayers().get(0);
  float levelWidth =  tiledMapTileLayer.getWidth() * tiledMapTileLayer.getTileWidth();
  if (pete.getX() + Pete.WIDTH > levelWidth) {
    pete.setPosition(levelWidth - Pete.WIDTH, pete.getY());
  }
}

As you can see, we get a reference to the layer that we require. Then, we calculate the level's width and finally update the condition statement.

If you run the project now, you will find that you can make Pete go off the screen and come back.

Part one achieved! Next, we need to be able to move the camera.

Because we are only going to scroll to the left or right, we don't need to worry about updating the y axis of our camera. However, if you wanted up and down scrolling, what we will do here will apply to the y axis as well, for when the responsibility comes upon you to implement your own game.

Our first step is to create a method that will update the camera. In our GameScreen class, let's create a method called updateCameraX()—we will do this as we are only going to update the x coordinate.

You can see this method in the following code:

private void updateCameraX() {
  camera.position.set(pete.getX(), camera.position.y, camera.position.z);
  camera.update();
  orthogonalTiledMapRenderer.setView(camera);
}

Here, you can see that we are setting the position of the camera to be that of Pete's, updating the camera, and then updating the view on the TileMapRenderer parameter.

Next, we will add a call to this method in our update() method.

If you run the project now, you should hopefully see that the camera is centered around Pete on the x axis:

private void update(float delta) {
  pete.update(delta);
  stopPeteLeavingTheScreen();
  handlePeteCollision();
  handlePeteCollisionWithAcorn();
  updateCameraX();
}

However, you might have spotted the flaw in what we have just done. Let's look at the following image:

So, by centering the camera around Pete, we have exposed what is outside our level. In some games, this might actually be desirable. However, let's lock this position down so we don't expose what is happening in our game's behind-the-scenes!

To do this, we will need to update our updateCameraX() method to take into consideration Pete's position and only update the camera if he is in the middle of our level.

Update the method with the following code:

private void updateCameraX() {
  TiledMapTileLayer tiledMapTileLayer = (TiledMapTileLayer) tiledMap.getLayers().get(0);
  float levelWidth = tiledMapTileLayer.getWidth() * tiledMapTileLayer.getTileWidth();
  if ( (pete.getX() > WORLD_WIDTH / 2f) && (pete.getX() < (levelWidth - WORLD_WIDTH / 2f)) ) {
    camera.position.set(pete.getX(), camera.position.y, camera.position.z);
    camera.update();
    orthogonalTiledMapRenderer.setView(camera);
  }
}

So, once again, we retrieve the length of the level. We then check whether Pete is more than half in the screen width, but with not less than half a screen width remaining. We then update the camera.

If you run the project now, you will find that the camera is now bound to the level and will not go past either end. Let's take a look at the following screenshot:

As you can see, Pete can't escape the end of the level and the camera has stopped scrolling.