Adding a Vertical Scroll

You might have noticed that the tile map is 8 tiles times 32 pixels heigh which amounts to 256 pixels. The viewport on the other hand has a height of 192 pixels which means that on any time 64 pixels of every vertical line of the tile map lies outside the scope of the viewport. I could have used a larger viewport to fit in the full height of the map but of course leaving part of the map out of view and adding that typical vertical scrolling effect for level 1 has been done deliberately to create an extra dimension and "feel" of the level. In this section I'll show you how the vertical scroll is coded. The vertical scroll logic basically uses 2 concepts:

  • Whenever I move up/down the camera moves up/down with the same speed as my spaceship (hence it's the background that's actually moving and not the ship)
  • The camera stops moving whenever the upper/lower edge of the map is seen through the viewport, but now the ship can still move in the specific direction till it reaches the edge of the screen.

First let's add some code that will take care of the vertical camera translation whenever we touch the up or down keys. Go to the MambowGame class and make the following changes:

Code Analysis:

On line 3 I've added a variables cam_Ystart to store the value of the y component of the camera's starting position (line 11). When we start our game before the map starts scrolling the left bottom corner of our map is displayed at the left bottom corner of our viewport. Since we know the map is 2 tiles * 32 px = 64 pixels higher than the height of our viewport we know that we shouldn't move the camera more than 64 pixels up otherwise we'll start moving the camera of the map. Consequently we also shouldn't move the camera lower than it's starting position. We'll use the cam_Ystart variable to see whether or not the camera should be translated vertically when the up/down keys are touched.

Previously the camera related code could be found within the render() method, but I now created a separate method cameraUpdate() to store all the camera related code and call that method at the end of the render() method (line 37).

On line 42 I check whether the up key is touched and down is not touched (no need to move the camera if both keys are touched). If that is the case I'll check if the y component of the camera's position is smaller than the camera's y component value when the game starts - cam_Ystart - + 2 Tile Height (64px). If that is the case I can still move the camera without moving of the map. On line 47-51 the same is done except for moving down.

On line 54 I've also changed the speed of the horizontal scroll

Now if you added this code you should get an error at lines 44 & 49. What I'm trying to do here is call the .getSpeed() method from the player class to get the value of speed and have the camera move with the same speed as the player is moving (again: notice the use of delta here...). Let's fix this and add the following code at the end of the Player class:

You can also let Eclipse create these so called GETTERS that are used to get the value of variables (usually from within another classes) automatically by right-clicking inside your class and select Source -> Generate Getters and Setters...
Now run your project again and see if everything is working correctly.


If you haven't taken up the Challenge from the section on "Handling Keyboard Input" the spaceship is still able to fly of the screen. Lets fix that:
Go to your player class and create two (private float) fields/variables named width & height.
Add the following lines of code to the constructor right after the loadPlayerTextures() call.

The value of width and height is now being set by getting the width and height from the ship_middle texture.
In the update() method we'll now add if statements to the logic describing the player movement to make sure that the spaceship only moves as long as the texture of the spaceship is still fully visible on our screen.
Your Player class should now look something like this:

Now to make it all a bit more lively let's add some background music. We'll do that in the next section




-->