Jumping Jack is an action game where the character, Jack the Koala, jumps around a level collecting as many coins as possible; he must reach the goal flag before time runs out. Collecting timer objects gives the koala more time to explore. Some of the surfaces in the game are jump-through platforms, which behave like solid objects except that the koala can jump up through them from below and land on top, or fall down through the platforms from above. There are also springboard objects, which launch the koala high into the sky if he lands on them from above. Finally, there are lock blocks, which may come in many colors and are impassable until the koala collects the key of the same color.

The player uses the left and right arrow keys to walk back and forth and the spacebar key to jump (when the koala is standing on a solid object). The koala will automatically jump up through a platform from below, but to fall down through a platform, the player must hold the down arrow key while pressing the key to jump. The user interface displays the number of coins collected in the upper-left corner of the screen and the amount of time remaining in the upper-right. When any keys are collected, an image of a key with the corresponding color will appear in the top-center area of the screen. If the player reaches the goal flag or runs out of time, a message will appear in the center of the screen stating “You Win!” or “Time Up—Game Over,” respectively.

The game uses a vibrant, colorful, cartoonish art style. Most objects with which the player can interact involve either an image-based or a value-based animation to draw the player’s attention. Suggestions for additional special effects and audio will be discussed in the final section of this chapter to help establish the mood, provide player feedback, and enhance the interaction of game-world objects.

The chapter assumes that you are familiar with the concepts from Chapter 10, “Tilemaps,” and that you have installed the Tiled map-editor software. Beginning this project requires the same steps as in previous projects: creating a new project, creating an assets folder and a +libs folder (the latter not being necessary if you have set up the userlib directory), copying the custom framework files you created in the first part of this book (BaseGame.java, BaseScreen.java, BaseActor.java) as well as the TilemapActor.java class you developed in Chapter 10, and copying the graphics and audio for this project into your assets folder. As described previously, a BlueJ project named Framework has been created for your convenience and will be used as a starting point. To begin the first project:

To begin, start the Tiled map-editor software . Create a new map with a map size that has width of 50 tiles and height of 20 tiles, and a tile size with the width and height both set to 32 pixels. The resulting map will be 1600 pixels by 640 pixels. Click the Save As . . . button and save the file to your assets directory with the filename map.tmx.

Next, add an image layer and an object layer to your map and reorder the layers so that the tile layer appears in the middle of the list. In the Layers panel, select Image Layer 1, and in the Properties panel, set the image to background.png (whose dimensions match the size of the tilemap). Then, in the Tileset panel , add a new tileset using the image platform-tileset.png (shown on the left side of Figure 11-2), setting the tile size to 32 by 32 and checking the box to embed the tileset in the map. Add another new tileset to the map, this time using the image object-tileset.png (shown on the right side of Figure 11-2), in the same way. Since the object tiles will be used to indicate where game-world objects should be spawned, you will need to specify the corresponding Java classes (which you will create later). In the Tileset panel, select object-tileset and click on the icon to edit the tileset. In the tab that appears, you will need to click on each tile (one at a time) and add a new custom property to each. The property should be called name; the corresponding values for the tiles (from left to right) are Coin, Flag, Timer, Springboard, Platform, Key, and Lock. In addition, for the key and lock object tiles, add a second custom property called color with the value red. (This default color can be overridden for specific instances later on in the tilemap editor).

Return to the tab featuring the tilemap. In the Layers panel, select Tile Layer 1. In the Tileset panel, select platform-tileset and then press the B key to activate the Stamp Brush tool . Add tiles across the bottom row of the map, as well as some tiles representing solids to jump on, as well as some scenery. Note that the cloud graphic occupies two tiles, so you should add these tiles in adjacent pairs. One possible arrangement is shown in Figure 11-3 (which only displays part of the map, for clarity).

It is important to note that the tile layer is being used only to simplify creating an image from tilesets; none of these tiles are returned when using the getTileList method in the TilemapActor class. Instead, for the regions covered by tiles that represent solid objects (in contrast to the tiles that represent scenery), you will add rectangles in the object layer to store the data corresponding to those regions. In the Layers panel, select Object Layer 1 and press R to activate the Rectangle tool. Draw rectangles around all the regions containing solid tiles; for simplicity, rectangles can be drawn that surround multiple tiles at once. To align rectangles with the grid, you may want to activate the Snap to Grid setting in the View menu if it isn’t already activated. For the design shown in Figure 11-3, you would add rectangles around the ground, the floating platform, and the staircase made out of boxes, but not the two tiles with pictures of grass. Each time you add one of these rectangles, you must also add a custom property called name with the value Solid (which will be used to initialize corresponding actors later), or you can create them all and then use the Select tool to give them all the same property at once. Finally, add a rectangle at the position where the koala should start the level and add a custom property called name with the value Start. Applying this process to the design shown in Figure 11-3 produces the result shown in Figure 11-4, where the rectangles are drawn with a gray border. Now would also be a good time to save your tilemap file!

Next, open the Jumping Jack project in BlueJ. You need a way to represent regions corresponding to solid objects. To this end, create a new class named Solid that contains the following code. Since no graphics are used for this object (the tilemap determines the graphics that will be appear in these areas), the size and boundary shape for these objects must be set directly, and the width and height values are passed in via the constructor. Note that this class also contains functionality to enable and disable the solid status of the object; this will be needed by the platform and lock objects introduced later on in this chapter.

Next, in the LevelScreen class, add the following import statements:

Then, add the following code to the initialize method to load the tilemap and generate the Solid objects corresponding to the rectangles in the tilemap:

At this point, you can test your project, although you will only see the leftmost part of the level. In the next section, you will add the player’s character (Jack the Koala), which will enable you to move around and see the rest of your level.

In this section, you will create a class for the main character (the koala) that is controlled by the player. One new feature of this class is that it will contain multiple animations corresponding to different types of movement (standing, walking, and jumping). Due to the complexity of platform character movement, the physics-related methods in the BaseActor class are insufficient for a game of this type. For example, platform characters typically have different maximum speeds for horizontal movement (walking) and vertical movement (jumping/falling). For this reason, the character’s act method will contain custom code for implementing physics-based movements. Before continuing, you may want to review the “Physics and Movement” section from Chapter 3, which contains an extensive discussion of physics-related concepts and calculations that will be revisited here.

To begin, create a new class called Koala containing the following code, which initializes two animations: stand, which consists of a single image, and walk, which contains multiple images.

Next, you will begin to implement the custom physics. First, in the BaseActor class , change the access modifier of the variables accelerationVec and velocityVec from private to protected so that the Koala class can access these variables directly. Return to the Koala class and add the following import statements:

Next, you need to add variables to store physics-related constants: acceleration and deceleration rates for walking, the maximum horizontal (walking) speed, the magnitude of the force of gravity that pulls the character downward, and the maximum possible vertical (jumping/falling) speed. To this end, add the following variable declarations to the Koala class:

All the code that follows is to be added to the act method until stated otherwise. The first order of business is to check for keyboard input. If the player is pressing the left arrow key or the right arrow key, then the acceleration vector is updated. Then, the effect of gravity is taken into account, and the acceleration vector is used to update the velocity vector. To do so, add the following code:

Next, if the character is not accelerating (which happens when the player is not pressing left or right), then deceleration takes place. First, the amount of deceleration is calculated (which depends on dt, the amount of time that has elapsed). The walking direction (positive indicating right, negative indicating left) and the walking speed (the absolute value of the velocity) are stored in variables. The walk speed is decreased by the deceleration amount , and if the value becomes negative, it is set to 0. After these adjustments, the velocity x value is recalculated from the walk speed and direction. See the following:

In addition to the effects of deceleration, the velocity in the x and y directions needs to stay within the bounds established by the variables that store the maximum speed in these directions. This can be accomplished by using the MathUtils class clamp method as follows:

Now that the final adjustments to the velocity have been performed, the velocity values are used to adjust the position, and the acceleration vector is reset to (0,0), via the following code:

You also want to make sure that the camera stays aligned with the koala, and that the koala stays on the screen at all times. To do this, add the following lines of code:

Finally, you need to switch between the animations according to the velocity in the x direction; a velocity of 0 indicates the koala is standing still and should use the corresponding animation. Furthermore, if the koala is moving to the left, you want to use the mirror image of the textures so that the koala appears to be facing to the left. Reversing the image can be easily accomplished by setting the scale in the x direction to -1, and the image can be restored by setting the scale back to 1. To do so, add the following code.

At this point, sufficiently many features have been added to the Koala class for you to be ready to add the koala to the game. In the LevelScreen class, add the following import statement:

Also add the following variable declaration to the class:

In the initialize method, add the following code to retrieve the start position specified in the tilemap, then initialize the Koala object at that position.

Next, collisions with solid objects (represented by the Solid class) are handled. The preventOverlap method is used to stop the koala from passing through any solid objects. A subtle issue that needs to be addressed is how the koala’s speed should be adjusted when this occurs. Not adjusting the speed at all can lead to glitchy behavior; for example, if the koala falls and collides with the ground and the vertical speed is not set to zero, then gravity will cause the speed to build up, and eventually the koala will pass through the solid object in a single frame, causing it to seemingly disappear from the game. If the velocity vector is set to (0,0) on all collisions, however, this also leads to problems: for example, if the koala were to hit the side of a wall while falling, the koala would appear to stop for an instant, and if the player were to hold down an arrow key that moved the koala against a solid (such as a wall) while it was falling, the koala would appear to slowly float down the side of the wall. To avoid problems such as these, the direction of the impact must be taken into account. You encountered a similar issue when creating the Rectangle Destroyer game in Chapter 8, in that you needed to know the side of an object that was hit. As before, you can resolve this issue by analyzing the displacement vector returned by the preventOverlap method to determine the direction in which collision occurred and then setting the velocity in that direction to 0. To implement all of this, in the update method, add the following code:

Finally, you will add the ability to jump to the Koala class . The most difficult part of this process is determining when the koala is on the ground and therefore able to jump. Checking if the velocity in the y direction equals 0 is insufficient, as this is also true at the instant when the koala is at the maximum height of a jump. The approach that will be used here is to create a small auxiliary object (named belowSensor) positioned directly below the koala at all times, as shown in Figure 11-5. If this object overlaps a solid object, then the koala will be able to jump. In the final version of the game, this sensor will be invisible, but for testing purposes, the box will be colored green or red, depending on whether the koala is on a solid or not.

To begin, add the following import statement to the Koala class :

Next, add the following variables to the class:

These objects are set up in the constructor (along with the collision polygon) by adding the following code. Note that belowSensor is slightly less wide than the koala in accordance with the collision polygon that is being used:

To keep belowSensor in the correct position, in the act method, add the following code after the acceleration has been reset:

Since jumping is a discrete action, it will be called from the LevelScreen class (similar to the shooting action in the Space Rocks game). To this end, in the LevelScreen class, add the following import statement:

Finally, returning to the Koala class , in the act method, replace the if-else statement used to set the animation with the following improved code, which determines which of the three animations (stand, walk, or jump) should be used, as well as sets the color of belowSensor , for testing and visualization purposes:

You are now ready to test your game again. Press the spacebar key (while the koala is on the ground) to jump and watch the color of the belowSensor rectangle change accordingly. Try pressing the spacebar key while the koala is in the air to verify that the koala cannot jump in this situation. Depending on how you designed your level in the Tiled map editor, you may find that you want to change the jump strength of the koala or adjust your level design. At this point, you have implemented the most difficult part of the platformer game. When you are finished testing, in the Koala class, set the visibility of belowSensor to false. In the following section, you will add a variety of objects for the koala to interact with (other than the ground).

Now, you will turn your attention to level design. Open your map.tmx file in the Tiled map-editor program. In the Layers panel, select Object Layer 1, and in the Tileset panel, select the object-tileset tab. Press T to activate the Insert Tile tool. Figure 11-6 illustrates a minimal level that features all the different object tiles; Figure 11-7 shows how your program would render that particular map. In the level portrayed, the goal flag is enclosed by red lock blocks, which require the player to obtain the red key. The key can be accessed either by jumping on the springboard to the left or by jumping onto the grassy tiles and then through the platform. Along the way, there are coins for the player to collect and a timer that can be collected to add extra time to reach the goal. Note that the springboard and flag objects will be larger than a single tile, and so the object tile indicates the lower-left corner of where the object will appear. Don’t forget to save your tilemap file regularly so that the changes you make are incorporated into your game project.

In this chapter, you learned how to create a platform game, including a main character that had animations for each of its actions (standing, walking, jumping), custom physics, and a “sensor” to determine when it was standing on a solid object and was therefore able to jump. You created a variety of objects for your character to interact with, including a flag to represent the goal, coins to collect, a timer to increase time remaining to complete the level, a springboard that launches the character into the air, platforms to jump through, and keys to remove locks that block the path ahead.

As always, there are more features you should add to the game. The largest omissions are a title screen and instructions screen, as well as audio. Background music should be included to set the mood. Sound effects should be added that correspond with player inputs (such as jumping), as well as game-object interaction (such as collecting an object, bouncing off a springboard, when a lock fades away, or when the game ends, either by reaching the goal flag or by running out of time). You may want to add a secondary obstacle, such as spikes, that penalize the player for coming into contact with them. The penalty could be that the player loses a life (perhaps starting with three lives) and has to restart the level, losing the game after all lives are lost. Alternatively, the player could lose a “health point” and continue on from that point, losing the game after all health points are lost. This alternative approach can be more complicated, however, as you will need to add an “invincibility” period after the character is damaged to give them an opportunity to move away from and escape the danger, otherwise all the character’s health points will be drained immediately.