© Lee Stemkoski and Evan Leider 2017

LEE STEMKOSKI and Evan Leider, Game Development with Construct 2, 10.1007/978-1-4842-2784-8_13

13. Jumping Jack

Lee Stemkoski and Evan Leider2

(1)DEPT OF MATH & CS, ADELPHI UNIVERSITY DEPT OF MATH & CS, Garden City, New York, USA

(2)NY, USA

In this chapter, you will create a side-perspective platform-style game called Jumping Jack, shown in Figure 13-1, inspired by classic arcade and console games such as Super Mario Bros.

A434545_1_En_13_Fig1_HTML.jpg
Figure 13-1. The Jumping Jack game

In Jumping Jack, the player controls Jack the Koala, whose goal is to navigate a level, collecting coins and dodging or defeating enemies along the way, until he reaches the flag at the end of the level. Enemies come in two varieties: the flying type, which fly back and forth between two given points, and the ground type, which move along the ground and reverse direction whenever they encounter a wall. Enemies can be destroyed by jumping on top of them, but otherwise they damage the player on contact. After being hit three times, the player loses the game. The environment itself contains a variety of interactive elements, such as ladders that can be climbed, springboards that launch the koala into the air, platforms that can be jumped through from underneath, brick blocks that can be destroyed by colliding with them from underneath, and keys that can be collected to allow the koala to pass through locked blocks. The “Side Quests” section describes additional potential features such as adding a countdown timer.

The player controls the koala using the arrow keys to walk and climb ladders and using the spacebar to jump. The user interface displays the number of coins collected, the health of the koala, and whether any keys have been collected. This project uses the Tilemap, Sprite, TiledBackgrounds, and Keyboard objects, and it uses the behaviors Scroll to, Pin, Fade, Bullet, Solid, and Flash. The koala character uses a new behavior called Platform for standard platform controls, as well as the 8-Direction behavior for climbing ladders. The behavior JumpThru is introduced to create a special type of one-way solid. The Function object will be introduced to avoid repeating code, and the Particle object will be introduced for a brick-breaking visual effect.

To begin, download the assets for this chapter from the book web site. Set the layout size to 1600, 640 and the window size to 800, 640. On the View tab, select the Snap to grid and Show grid check boxes, and set the grid width and grid height both to 16. Add three additional layers to your project (for a total of four layers), naming them Background, Map, Main, and UI. The reason for using four layers in this project (as opposed to three, as you have in previous projects) is that the background image needs to scroll more slowly than the tilemap for a parallax effect (as in the Plane Dodger game in Chapter 6), so it must be in a separate layer. At the same time, to avoid accidentally selecting or modifying the tilemap once it is complete (as discussed when developing the Racecar 500 game in Chapter 7), the tilemap should be in its own layer so that it can be locked later. For the Background layer, set Parallax to 50, 0; this will cause the Background layer to scroll at half the speed as the Map and Main layers while the player navigates the level. For the UI layer, set Parallax to 0,0; this will fix the UI in place, as desired.

Level Design

In this section, you will set up a basic level. In the Background layer, add a TiledBackground object named Background with the image background.png. Resize and position this object so that it covers the entire layout. In the Map layer, add a TileMap object named Map with the image platform-tiles.png. These tiles are 32-by-32 pixels, so the default properties for the tilemap do not need to be adjusted. However, you should adjust the collision polygons for the nonsquare tiles, as you did for the Racecar 500 game in Chapter 7. In the layout, add some ground tiles across the bottom of the map. Also, create some walls (at least six blocks high) on each side to stop the player from falling off the sides of the level. (Alternatively, you could create invisible solid objects to place at either end to serve the same purpose.) Feel free to add a staircase or two in the middle for variety and perhaps some floating platforms. Many other objects will be added later in the chapter, so do not feel compelled to fill the tilemap at this time; leave plenty of open space available. When you are finished, the layout should appear similar in style to Figure 13-2. When you are finished, add the Solid behavior to the tilemap, click the selection tool in the Tilemap panel, and lock the Background and Tilemap layers.

A434545_1_En_13_Fig2_HTML.jpg
Figure 13-2. Background and basic tilemap setup

Player Setup

The next goal is to set up the koala character that the player controls. Set the active layer to Main, and add a new sprite named Koala. In the image editor, set up the following animations with the given names, images from the koala folder, and animation properties (when applicable):

  • Name: Stand. Image: stand.png.

  • Name: Jump. Image: jump.png.

  • Name: Walk. Images: walk-1.png, walk-2.png, walk3.png. Set Speed to 6, Loop to Yes, and Ping-pong to Yes.

  • Name: Climb. Images: climb-1.png, climb-2.png. Set Speed to 6 and Loop to Yes.

When you are finished, you need to adjust the collision polygon so that it is consistent across all frames of all animations; otherwise, strange glitches may occur. Select the Stand animation, and adjust the collision polygon (deleting and repositioning vertices as necessary) until it is a rectangle, somewhat thinner than the image itself, as illustrated in Figure 13-3. Make sure that the left and right sides of the collision polygon are perfectly vertical. For precise measurements, when a vertex is selected, its coordinates are displayed at the bottom of the image editor window, and its position can be adjusted pixel by pixel with the arrow keys. When you are finished, right-click the polygon, and in the menu that appears, select Apply to all animations.

A434545_1_En_13_Fig3_HTML.jpg
Figure 13-3. Collision polygon for the Koala sprite

For the Koala object, set Size to 32,50, and add the behaviors Platform, Scroll to, and 8-Direction. The Platform behavior handles walking and jumping. However, the ability to climb ladders must be managed separately. For example, when climbing a ladder, gravity does not affect the player, and the player can also move up and down. This can be efficiently handled by using two behaviors, enabling one and disabling the other when appropriate. Set the Platform properties Max speed to 120 and Default controls to No. Set the 8-Direction properties Max speed to 120, Set angle to No, and Initial state to Disabled. There are no conditions that check whether these behaviors are enabled, so you will store this information with an instance variable. Add an instance variable and set Name to State, Type to Text, Initial value to Normal, and Description to Normal or Climbing.

The reason you disabled the default Platform controls is that you will reserve the up and down arrow keys for climbing, and the spacebar (or another key of your choice) can be used for jumping. Next, you will implement these alternative controls. At the same time, you will use the Appearance: Set mirrored action to reflect the sprite image so that the koala is facing in the direction that it is moving. In the layout, add a Keyboard object and then open the event sheet. Because of the large number of events in this project, you will use groups to keep your events organized. In the event sheet, add a group named Player Movement, and add the following subevents in this group (be sure to use the Platform action Simulate control, not the 8-Direction action):

  • Add the condition Keyboard - Key is down (Left arrow), add the action Koala - Platform: Simulate control (Left), and add the action Koala - Appearance: Set mirrored (Mirrored).

  • Add the condition Keyboard - Key is down (Right arrow), add the action Koala - Platform: Simulate control (Right), and add the action Koala - Appearance: Set mirrored (Not Mirrored).

  • Add the condition Keyboard - On key pressed (Space), and add the action Koala - Platform: Simulate control (Jump).

The completed events should appear as shown in Figure 13-4.

A434545_1_En_13_Fig4_HTML.jpg
Figure 13-4. Player movement events

This is a good point to save and test your game. At this point, check that the controls move the koala as expected and that the screen scrolls along with the koala (and the background scrolls at half-speed). The koala should face the direction it is moving in, but the animations have not been activated yet; you set these up (except for climbing) next. As you will see, the Platform behavior has a great number of conditions that check the movement and surroundings of the object, and these are quite useful for activating the correct animation.

In the event sheet, add a new group named Player Animation. In this group, add a subevent with the condition Koala - Compare instance variable, and check whether State equals Normal. Create three subevents to this condition as follows:

  • Add the condition Koala - Platform: Is on floor, add the inverted condition Koala - Platform: Is moving, and add the action Koala - Set Animation ("Stand").

  • Add the condition Koala - Platform: Is on floor, add the condition Koala - Platform: Is moving, and add the action Koala - Set Animation ("Walk").

  • Add the inverted condition Koala - Platform: Is on floor, and add the action Koala - Set Animation ("Jump").

The completed events should appear as in Figure 13-5. Once again, save and test your game and confirm that the animations appear as expected.

A434545_1_En_13_Fig5_HTML.jpg
Figure 13-5. Player animation events

Ladders and Climbing

In this section, you will implement the ladder-climbing mechanic. This is complicated because of the need to switch between two different behaviors, determine the different conditions in which the player will want the koala to start or stop climbing, and handle the animations. To reduce the repetition of particular sets of actions, you will also learn how to use the Function object. To start, create a new TiledBackground object named Ladder, using the image ladder.png. You are using a TiledBackground rather than a Sprite object so that the pattern of rungs repeats as you resize the object. Resize and position the Ladder object so that it is 32 pixels wide and so it reaches from the ground to the top of one of your tilemap platforms, as shown in Figure 13-6. Also, add the behavior Jump-thru to the ladder. This behavior allows other objects to pass though from below, but not from above, a mechanic that is used in many platform-style games .

A434545_1_En_13_Fig6_HTML.jpg
Figure 13-6. Setting up a ladder next to a tilemap platform

When switching from the platform behavior to the 8-Direction behavior for climbing, two of the required actions are to disable the Platform behavior and to enable the 8-Direction behavior. In addition, the koala’s State variable should be set to keep track of the control scheme being activated (in this case, "Climbing"). One subtle point that needs to be taken into account is the koala’s motion at the moment when a movement behavior is disabled. Both the Platform and 8-Direction variables independently keep track of the koala’s velocity in the X and Y directions in variables named VectorX and VectorY. Whenever you disable a behavior, you should set both of these values to 0. Otherwise, when the behavior is reenabled later, these variables will be restored to their original values at the moment the behavior was disabled, causing unexpected motion in some direction.

As will be discussed later, you will see that there multiple combinations of conditions for which the koala should start climbing or stop climbing. To avoid entering the same set of actions repeatedly, you will use the Function object. The Function object has many uses, one of which is to activate another event in the event sheet. In the layout, add the Function object to the project. Much like the Keyboard or Audio object, this does not add anything to the layout, but it enables extra conditions and actions in the event sheet. In the event sheet, in the Player Movement group, add a new subevent with the condition Function - On Function, and set Name to "ClimbStart". This event can be activated at a later time by a Function object action named Call function, as you will see. Next, add the following actions to the event you just created:

  • Koala - Platform: Set enabled (Disabled)

  • Koala - Platform: Set Vector X (0)

  • Koala - Platform: Set Vector Y (0)

  • Koala - 8-Direction: Set enabled (Enabled)

  • Koala - Instance variables: Set value, with State set to "Climbing"

Add another subevent in this group, again with the condition Function - On Function, but this time set Name to "ClimbStop". Add the following set of actions, which closely correspond to the set of actions earlier:

  • Koala - 8-Direction: Set enabled (Disabled)

  • Koala - 8-Direction: Set Vector X (0)

  • Koala - 8-Direction: Set Vector Y (0)

  • Koala - Platform: Set enabled (Enabled)

  • Koala - Instance variables: Set value, with State set to "Normal"

When you are finished, the events should appear as in Figure 13-7. You can save your project, but there is nothing new to test at this time, as no other events have activated these functions yet.

A434545_1_En_13_Fig7_HTML.jpg
Figure 13-7. Functions that switch the Platform and 8-Direction behaviors

Next, we will discuss the conditions for which one of these functions should be activated. The most obvious cases are that when the koala is overlapping a ladder and the player presses either the up arrow or down arrow key, the ClimbStart event should be called, and whenever the koala is not overlapping a ladder, then the ClimbStop event should be called. However, there are two subtle additional scenarios to consider. First, if the koala is climbing down and reaches the ground, then the player probably wants the koala to stop climbing. If the koala is standing on top of the ladder and the player presses down, then the player probably wants to start climbing.

The logical difficulty with checking these last two scenarios is that they both involve the area directly below the koala’s feet. The most straightforward way to be able to check these conditions is to create a sprite that serves as a “sensor” for this area, as follows. Create a new sprite named Below, and use the image editor drawing tools to fill in the box with a solid color and draw a letter B. When you are finished, close the image editor windows, change the property Size to 24,18, and set Initial visibility to Invisible. Position the sprite so that it appears a few pixels below the bottom of the Koala sprite, as shown in Figure 13-8 (you may need to temporarily disable the Snap to grid option to line it up accurately, or press the Alt key while dragging to ignore the grid positioning). Add the Pin behavior to the Below object. To active the Pin object, in the event sheet, create a new event with the condition System - On start of layout, and add the action Below - Pin to object (Koala). In addition, since the ladder was added after the koala, the koala will appear underneath the ladder. To remedy this, add a section action to the event: Koala - Z Order: Move to top. This event should appear as in Figure 13-9.

A434545_1_En_13_Fig8_HTML.jpg
Figure 13-8. Placement of the Below sprite
A434545_1_En_13_Fig9_HTML.jpg
Figure 13-9. Events to activate on start of layout

Now you are ready to add the events that activate and deactivate the climbing behavior. In the group Player Movement , add the following five subevents, which are also shown in Figure 13-10:

A434545_1_En_13_Fig10_HTML.jpg
Figure 13-10. Events to activate and deactivate climbing
  • Add the condition Keyboard - On key pressed (Up arrow), add the condition Koala - Is overlapping another object (Ladder), and add the action Function - Call function ("ClimbStart").

  • Add the condition Keyboard - On key pressed (Down arrow), add the condition Koala - Is overlapping another object (Ladder), and add the action Function - Call function ("ClimbStart").

  • Add the inverted condition Koala - Is overlapping another object (Ladder), and add the action Function - Call function ("ClimbStop").

  • Add the condition Keyboard - Key is down (Down arrow), add the condition Below - Is overlapping another object (Map), add the inverted condition Below - Is overlapping another object (Ladder), and add the action Function - Call function ("ClimbStop").

  • Add the condition Keyboard - On key pressed (Down arrow), add the condition Below - Is overlapping another object (Ladder), add the inverted condition Below - Is overlapping another object (Map), add the action Function - Call function ("ClimbStart"), and add the action Koala - Move at angle, with Angle set to 90 and Distance set to 2.

In the last two events listed, the overlapping map conditions are present to stop the koala from trying to start climbing when the solid tilemap is in the way and to stop the koala from falling off the ladder too soon in the situation where the bottom of the ladder is not next to solid tiles from the tilemap. In addition, the extra action in the last event is necessary because the Jump-thru behavior on the ladder prevents the koala from passing through it from above, so an initial adjustment is required. Finally, in some platform games, pressing the jump button also causes the player to stop climbing and “fall down” (return to the Platform controls); you can add this feature as a sixth event if desired.

Although you could test the climbing mechanic at this time, the koala would appear strange while climbing because the events that activate the climb animation have not yet been set up; this will be your next step. In the Player Animation group, add a new subevent with the condition Koala - Compare instance variable, and check whether State equals "Climbing". Create two subevents to this condition as follows:

  • Add the condition Koala - 8-Direction: Is moving, and add the action Koala - Set Animation ("Climb").

  • Add the condition System - Else, and add the action Koala - Animation: Stop.

Figure 13-11 shows these events. Now is an excellent time to save and test your game and verify that the climbing mechanic works as desired. However, when climbing up the ladder, the player will have to be careful to align the koala so that its head does not hit a tilemap tile while climbing, which, having the Solid behavior, would prevent further movement. Try every combination of movement that can trigger these events: standing on the ground and climbing up the ladder, standing on top of the ladder and climbing down, climbing the ladder starting from midjump, falling off the ladder by climbing to either side, and so on.

A434545_1_En_13_Fig11_HTML.jpg
Figure 13-11. Events to activate the climbing animation

Overall, climbing ladders is a difficult and complicated mechanic to implement well, so congratulations on completing this section!

Additional Game Objects

In this section, you will create a variety of objects for the koala to interact with, which will make the gameplay much more interesting. In particular, you will add a flag (which it is the koala’s goal to reach), platforms that can be jumped through, coins to collect along the way, springboards that launch the koala into the air, bricks that can be broken, coins to collect along the way, and keys that let the koala pass through locked blocks. Although many of these objects could be considered optional, it is worth implementing them all to learn how the game mechanics work, and later you can make a final decision on which of these to include. To keep your code organized, in the event sheet, create a new group named Object Interaction. All the events you create in the following sections should be subevents in this group unless stated otherwise.

Goal Flag

The player needs to have a goal; in this game, you will create a flag that the koala is trying to reach. Create a new sprite named Flag; in the Animation frames window, load the spritesheet flag.png (two horizontal cells and one vertical cell), and set the Animation properties Speed to 5 and Loop to Yes. Make sure the Flag object is on the Main layer, and place it near the end of your level. Create another new sprite, named MessageComplete, using the image message-complete.png. Place it on the UI layer; to center it in the window, make its X coordinate 400 (since a sprite’s location is measured from its center by default and the window is 800 pixels wide). Its Y coordinate can be anything you want, although you should avoid overlapping the other elements on the UI layer. Set the property Initial visibility to Invisible. Then, in the event sheet, add a new event with the condition Koala - On collision with another object (Flag), add the action Koala - destroy, and add the action MessageComplete - Set visible (Visible). Figure 13-12 shows this event.

A434545_1_En_13_Fig12_HTML.jpg
Figure 13-12. Event to display a message after reaching the goal

Jump-Through Platforms

Jump-through platforms are a common feature in many platform-style games; in some, they are used as an alternative to ladders that enable the player to reach higher areas in the level. Since the Construct game engine provides a Jump-thru behavior (which you have used previously in the section on ladder mechanics), this is fairly straightforward. Recall that the Jump-thru behavior enables an object to act as a solid from above, while enabling the player to move (or jump) through it from below. In the layout, create a new TiledBackground object named Platform using the image log-bridge.png. You are using a TiledBackground object instead of a Sprite object so that the image repeats, similar to the Ladder object. Add the Jump-thru behavior. In the layout, change the height of your platform to 16 pixels, but make the width anything you like.

Optionally, you may want to give the players the ability to jump down through platforms, which is conveniently an action provided with the Platform behavior. An intuitive control scheme to activate jumping down is when the koala is standing on a platform and the player presses the jump button while holding the down arrow key. To configure this event, locate the event in the Player Movement group that contains the action Platform - Simulate control (Jump). To this event, add a subevent with the condition Keyboard - Key is down (Down arrow) and the condition Koala: Compare instance variable (check whether State is equal to "Normal"). Then add the action Koala - Platform: Fall through. Figure 13-13 shows this subevent.

A434545_1_En_13_Fig13_HTML.jpg
Figure 13-13. Event for jumping down through Platform objects

Another optional feature to add to the platform objects is movement, which is most easily accomplished by adding the Sine behavior and setting the Sine property Movement property to Horizontal or Vertical. To make each platform move a greater distance, you can increase the value of the Magnitude property, but you will need to increase the Period property by the same factor if you want to keep the same speed of movement. If you add the Sine behavior but you still want some platforms to remain stationary, set their Magnitude value to 0.

Springboards

With the default Platform behavior property values, the koala can jump to a height of nearly five (32-pixel) tiles. To overcome walls or other barriers higher than this, you could design a route involving ladders or platforms. To add some variety, you could also create a springboard, which is an object that launches a character into the air when the character lands on it. To implement this, create a new sprite named Springboard; in the Animation frames window, load the spritesheet springboard.png (three horizontal cells and one vertical cell), and set the Animation properties Speed to 8, Loop to Yes, and Ping-pong to Yes. Adjust the collision polygon for each frame of the animation to fit the image displayed in each frame. In the event sheet, create a new event with the condition Below - On collision with another object (Springboard), and add the action Koala - Platform: Set Vector Y (-1000). Vector Y indicates motion in the vertical axis; the negative value indicates the upward direction. Figure 13-14 shows this event. Feel free to experiment with the value of Vector Y until you are satisfied with the jump height.

A434545_1_En_13_Fig14_HTML.jpg
Figure 13-14. Event to implement a springboard game mechanic

Breakable Bricks

Destructible objects are another type of classic platform game objects. In this section, you will implement breakable bricks , which can be destroyed by the koala if he jumps into them from underneath or, equivalently, if the area above the koala collides with the brick. To detect collisions in this area, you will create another sprite (named Above) that will be invisible and pinned to the koala, similar to the Below sprite. To provide visual feedback to the player when the brick is destroyed, you will create an animated effect that resembles brick fragments falling down. Since it is difficult to find a spritesheet with this particular sequence of images, you will learn how to simulate this effect with a Particle object.

First, create a new sprite named Brick using the image brick.png. Open the collision polygon editor, right-click to bring up the corresponding menu, and select Set to bounding box. This is important to keep the koala from “snagging” or getting caught on the corners if he were to walk across the top of a row of bricks. Create a few new instances of this object, and position them around the level within the jumping range of the koala.

Create a new sprite named Above; use the image editor drawing tools to fill in the box with a solid color and draw a letter A. When you are finished, close the image editor windows, change the size to 16,16, and set Initial visibility to Invisible. Position this sprite above the head of the koala sprite. Add the Pin behavior. In the event sheet, locate the On start of layout event, and add the action Above - Pin to object (Koala) .

Next, you will set up a Particle object. Particle objects generate particle systems, which are large numbers of copies of a single small image (each of which is called a particle) that move independently to simulate visual effects; these are often used to create animations of smoke, fire, star fields, and so forth. There are a great number of properties that can be configured for the Particle object, only some of which will be discussed in the text that follows. In the layout, create a new Particle object named Fragments; in the image editor, open the image fragment.png. Close the image editor, and position the fragments object in the left margin of the layout area. The relevant particle object properties that you need to modify are briefly defined, and their values should be set as listed here:

  • Type: This can be Continuous (to create a constant spray of particles over a period of time) or One-shot (which generates a set number of particles at a single instant in time); set this to One-shot.

  • Rate: If Type is set to Continuous, this represents the number of particles generated per second. If Type is set to One-shot, this represents the total number of particles generated. Set this to 6.

  • Spray cone: This represents the range of directions (specified in degrees) in which the particles can be fired; the angle of motion for each particle will be a random number between 0 and this number. Set this to 120.

  • Speed: This is how fast the particles move initially; set this to 300.

  • Size: This is the initial size of the particles; set this to 16.

  • Gravity: This represents the downward acceleration of the particles. For consistency, this value should match the value for the platform behavior, so you should set this to 1500.

  • Acceleration: This represents the change in speed per second; this is not needed for the intended effect, so set this to 0.

  • Speed randomizer: This specifies a random adjustment to the speed of the particles; since this is also unnecessary for this effect, set this to 0 as well.

  • Destroy mode: This determines when the particle will be destroyed: after fading out, after a certain amount of time passes, or after the particles stop moving. Set this to Timeout expired.

  • Timeout: This is the time in seconds until the particles will be destroyed; set this to 3 (so that the particles will have enough time to fall past the bottom edge of the layout).

Finally, you can set up the event that enables the koala to destroy the bricks. In the event sheet, create a new event with the condition Above - On collision with another object (Brick), and add the following three actions:

  • Add Brick - Spawn another object (Fragments, on the "Main" layer).

  • Add Fragments - Set angle (270) so that the particle spray cone direction faces upward.

  • Add Brick - Destroy.

When finished, this event should appear as in Figure 13-15.

A434545_1_En_13_Fig15_HTML.jpg
Figure 13-15. Event to create breakable bricks with a particle effect

Coins

A standard feature in many platformer games is the ability to collect some type of object, such as coins. They may be worth a certain number of points, or collecting a certain number may yield some type of award to the player, such as an extra life. Players can use them as a benchmark of their skill and have the personal goal of collecting more than their personal best, with the ultimate goal of collecting them all. As they have the potential to serve so many purposes, you will learn how to implement collectible coin objects in this game.

To begin, create a new sprite named Coin, and in the image editor Animation frames window, load the spritesheet coin.png (six horizontal cells and one vertical cell). Set the Animation properties Speed to 8 and Loop to Yes. Close the image editor windows, and in the layout, change the property Size to 24,24. Create a few additional instances of the Coin object. To keep track of the number of coins collected by the koala, add an instance variable to the koala named Coins with an initial value of 0. To display this value on the user interface, create a new Text object named TextCoins with Text set to 0, and change the font to Arial, bold, size 36. Change the font color to a golden yellow to match the coins themselves. For visual simplicity, instead of displaying the word Coins in the Text object, you will add an icon to the UI instead. Create a new sprite named IconCoin with the image icon-coin.png. Make sure that TextCoins and IconCoin are both on the UI layer, and position them in the upper-left area of the layout, with the icon to the left of the text. (Figure 13-18 shows how they will be positioned, after you have added some other user interface elements later.) The final addition to the layout will be a sparkle animation that will appear every time a coin is collected; this gives visual feedback to the player. On the Main layer, create a new sprite named Sparkle, and in the image editor Animation frames window, load the spritesheet from the sparkle folder named sparkle-yellow.png (four horizontal cells and eight vertical cells). Set the animation property Speed to 60.

With these objects added, you can now set up the corresponding events. First, create a new event with the condition Koala - On collision with another object (Coin), and add these three actions: Koala - Instance variables: Add to (add 1 to Coins), Coin - Spawn another object (Sparkle, on layer "Main"), and Coin - Destroy. Create another event with the condition Sparkle - Animation: On any finished, and add the action Sparkle - Destroy. Finally, create an event with the condition System - Every tick, and add the action TextCoins - Set Text (Koala.Coins). When finished, these events should appear as in Figure 13-16.

A434545_1_En_13_Fig16_HTML.jpg
Figure 13-16. Events related to the coin-collecting mechanic

Keys and Locked Blocks

A feature common in many genres of games are locked doors, which are obstacles in the level that require the player to obtain a key in order to pass. Locks temporarily block further progress and can be used to help guide the player through a level, motivating the player to more fully explore a level to locate and obtain the necessary key. In this game, the locked doors will be solid-colored blocks (with a keyhole), and if the player obtains the correspondingly colored key, these blocks will unlock (disappear) on contact. There will be an icon in the user interface whose appearance changes once the player has obtained the key. To keep track of whether the player has collected a key (or any other objects), one often uses a variable, but for simplicity in this project, you will use the UI icon animation name for this purpose. As with the coins earlier, you will also create another colored sparkle effect to provide visual feedback when the player has collected the key.

To begin, create a new sprite named KeyBlue with the image key-blue.png. (For organizational purposes, you will find this image, as well as the other key-related images, in the key folder.) Close the image editor, change the size to 32,32, and position the key somewhere easily accessible in your layout. Create a new sprite named LockBlue with the image lock-blue.png. Just as you did for the Brick objects earlier (and for the same reasons), you need to adjust the collision polygon of the LockBlue object so that it is set to the bounding box. Once this is done, close the image editor, and change the brick size to 32,32. Add the behaviors Solid and Fade, and change the properties Active at start to No and Fade out time to 0.25. Create a new sprite named IconKeyBlue with the image key-blue-icon-0.png; this will be the default image displayed on the user interface. Add another animation named Collected, with the image key-blue-icon-1.png; this will be shown after the key is collected. Make sure that IconKeyBlue is on the UI layer, and position it in the layout near the upper-right area of the window bounds (indicated by a dashed line, shown in Figure 13-18). Finally, add a new animation to the Sparkle object named Blue using the spritesheet sparkle-blue.png and using the same settings as when you created the original sparkle animation.

You will set up two events for this mechanic, one for collecting the key and the other for removing the locks. First, create a new event with the condition Koala - On collision with (KeyBlue). Although only two actions are strictly necessary (destroying the key and updating the corresponding icon image), you will implement additional actions for visual feedback and to draw the player’s attention to the changed state of the UI icon. Add the following actions:

  • KeyBlue - Spawn another object (Sparkle on layer "Main")

  • Sparkle - Set animation ("Blue")

  • KeyBlue - Destroy

  • System - Wait (1 second)

  • IconKeyBlue - Spawn another object (Sparkle on layer "UI")

  • Sparkle - Set animation ("Blue")

  • IconKeyBlue - Set animation ("Collected")

Create another event with the condition Koala - On collision with another object (LockBlue) and the condition IconKeyBlue - Animation: Is playing ("Collected"); add the action LockBlue - Start Fade and the action LockBlue - Solid: Set enabled (Disabled). When you are finished, these two events should appear as shown in Figure 13-17.

A434545_1_En_13_Fig17_HTML.jpg
Figure 13-17. Events related to the key and lock mechanic

If you want, you can create additional colored locks and keys, where each key unlocks the blocks of the same color, using the same setup as described earlier. Additional images for this purpose (keys, locks, icons, and sparkle effects) are included in the graphics collection for this chapter.

Enemies

In this section, you will implement two different types of enemy creatures to provide a more active challenge for the player. The first enemy will be an airborne creature named Fly that flies (as the name implies) back and forth between two locations using the waypoint-style mechanics used in the Spell Shooter and Airplane Assault games, but with no randomness included. The second enemy will be a ground-based creature named Slime that is subject to gravity (just as the koala is) and moves across the ground until encountering a wall, at which point it turns around and moves in the opposite direction. Both types of enemy have many features in common: they will use an instance variable to keep track of their current travel direction, they can both be destroyed if the koala jumps on top of them, and they both damage the koala if he collides with them in any other manner.

Before implementing the enemies themselves, you will set up the health mechanic for the player. Select the Koala object, and add a new instance variable named Health with an initial value of 3. To display this value on the user interface, create a new Text object named TextHealth with Text set to 3, and change the font to Arial, bold, size 36. Change the font color to red. As before with the coins, you will add an icon to the user interface instead of displaying the word Health. Create a new sprite named IconHeart with the image icon-heart.png. Make sure that TextHealth and IconHeart are both on the UI layer , and position them in the upper-central area of the layout, between the coin and key display. At this point, the user interface is complete and should resemble Figure 13-18. Add the Flash behavior to the koala; this will be used for a temporary invincibility mechanic when the koala is damaged, similar to the setup for the plane in the Airplane Assault game. Finally, in the event with the condition System - Every tick, add the action TextHealth - Set text (Koala.Health).

A434545_1_En_13_Fig18_HTML.jpg
Figure 13-18. The final layout of icons and text in the user interface area

Next, you will implement the fly enemy. Create a new sprite named Fly, and in the image editor Animation frames window, load the spritesheet fly.png (two horizontal cells and one vertical cell). Set the animation properties Speed to 8 and Loop to Yes. Close the image editor. Add the Bullet behavior, set Speed to 100, and set Set angle to No. Add an instance variable named Direction, of type Text, with an initial value of Left and description Left or Right. Next, create a new sprite named FlyPoint, using the image editor tools to fill in the background, draw the letter F, and change the size to 32-by-32 pixels. Add an instance variable to this object named Move, of type Text, with an initial value of Left and a description of Used to set Fly Direction to Left or Right. Change the property Initial visibility to Invisible. In the layout, create another instance of the FlyPoint object, and change its Move value to Right. In the layout, arrange the Fly object and the two FlyPoint objects in a horizontal line. The FlyPoint object with Move set to Right should be on the left, the Fly object should be in the center, the FlyPoint object with Move set to Left should be on the right, and about 100 pixels of space should separate each of these objects.

Now you will set up the events for fly movement, which are based on logic similar to waypoints from earlier chapters. The idea is that if Direction is set to Left, then the sprite image should face to the left and the angle of motion should be set to 180; corresponding actions occur when Direction is set to Right. Whenever a Fly object collides with a FlyPoint object, the Fly’s Direction variable should be set to the FlyPoint’s Move variable. (This is why the FlyPoint on the left side has its Move variable set to Right, because that is the new direction that the Fly should begin moving in after it collides with the FlyPoint.) In turn, the angle of motion of the Fly object will be set according to the value of its Move variable. To keep your events organized, start by creating a new group named Enemies; the events in this section should be added as subevents to this group unless stated otherwise. Create a new event with the condition Fly - Compare instance variable, and check whether Direction is equal to "Left". Add the action Fly - Appearance: Set Mirrored (Mirrored), and add the action Fly - Bullet: Set angle of motion (180). Create another new event with the same set of conditions and actions, but change the parameters to check whether Direction is equal to "Right", set the mirroring to Not mirrored, and set the angle of motion to 0. Figure 13-19 shows these events.

A434545_1_En_13_Fig19_HTML.jpg
Figure 13-19. Events related to the Fly enemy

There are two events needed for interaction between the Fly and Koala objects . If the koala lands on top of the fly, the fly should be destroyed, and the koala bounces off by a small amount. Any other collision between the koala and fly will damage the koala, causing the koala to lose one health point and to flash for two seconds, during which period the koala cannot take additional damage. Create a new event with the condition Below - On collision with another object (Fly) and the condition Koala - Platform: Is falling. Add the action Fly - Destroy and the action Koala - Platform: Set Vector Y (-400). Create another new event with the condition Koala - On collision with another object (Fly), and add the inverted condition Koala - Is flashing. Add the action Koala - Instance variables: Subtract from (subtract 1 from Health) and the action Koala - Flash (change Duration to 2 seconds). These events are also shown in Figure 13-19.

Next, you will set up the Slime enemy. Create a new sprite named Slime, and in the image editor Animation frames window, load the spritesheet slime.png (two horizontal cells and one vertical cell). Set the animation property Speed to 4 and Loop to Yes. Close the image editor. Add the Platform behavior, and set Max speed to 60 and Default controls to No. Add an instance variable named Direction, of type Text, with an initial value of Left and a description of Left or Right. Since the Platform behavior has conditions that check for walls to the left or right, it is not necessary to create an object analogous to the FlyPoint object to detect when the slime needs to change direction.

The slime movement events are analogous to the fly movement events, except that instead of setting the bullet angle of motion, you will simulate the platform control in the corresponding direction. Changing the value of the Direction variable will occur when the slime is next to a wall. The events that result in the slime being destroyed or the koala taking damage are identical to the corresponding events for the fly, except that the references to the Fly object are replaced with the Slime object. To begin implementing these features, create a new event with the condition Slime - Compare instance variable, and check whether Direction is equal to "Left". Add the action Slime - Appearance: Set Mirrored (Mirrored), and add the action Slime - Platform: Simulate control (Left). Create another new event with the same set of conditions and actions, but change the parameters to check whether Direction is equal to "Right", set the mirroring to Not mirrored, and set the simulated control to Right. Next, create an event with the condition Slime - Platform: Is by wall (left), add the action Slime - Instance variables: Set value, and set Direction to "Right". Create another event with the same condition and action, but change the parameters to check whether there is a wall to the right, in which case the value of Direction should be set to "Left".

Finally, you will create the events that handle interaction between the koala and the slime. Since these events are so similar to the events for the Fly object, the quickest way to create them is to copy and paste a new copy of each of the corresponding fly-related events. Select the new copies of the events (clicking the area to the left of the condition to ensure all the conditions and actions are selected), right-click to bring up a menu, and select the Replace object; select Fly in the first window that appears, and select Slime in the next window that appears. You should see that all the references to the fly have been replaced by references to the slime. When you are finished, these events should appear as in Figure 13-20 .

A434545_1_En_13_Fig20_HTML.jpg
Figure 13-20. Events related to the Slime enemy

Finally, there needs to be a “game over” message that appears when the koala’s health reaches 0. Create a new sprite named MessageGameOver using the image message-game-over.png. Set its Layer to UI, set Initial visibility to Invisible, and center it within the window bounds, as you did for the MessageComplete object earlier in the chapter. Then add the event Koala - Compare instance variable to check whether Health is less or equal than 0, and add the action Koala - Destroy and the action MessageGameOver - Set visibility (Visible). This event is shown in Figure 13-21.

A434545_1_En_13_Fig21_HTML.jpg
Figure 13-21. Event to display the “game over ” message

At this point, you now have a complete platformer game, with a great variety of obstacles, enemies, and win and lose conditions. This is the longest and most complex project you have encountered in this book thus far, so congratulations for reaching this point!

Side Quests

With the number of features you have added to this project, the first improvement you may want to consider is designing an interesting level, combining the features in various ways. You could create a mazelike level where the player has to search for a key to unlock a group of blocks surrounding the goal flag. You could add difficult jumps requiring great precision or many enemies for an extra challenge. You could add scenic elements (such as clouds and bushes) to the level, similar to the recommendation from the Racecar 500 game.

Pits are a feature that many platform games add; pits are holes in the ground that cause the player to lose if they fall through. Your instinct may be to add the Destroy outside layout behavior to the koala. However, this would have the unfortunate side effect of also destroying the player if they jumped above the top edge of the layout, which could easily happen, depending on your particular level design. If you want to implement this gameplay mechanic, one approach is to a new sprite named Pit, resizing it to be longer than the entire map and placing it in the margins of the layout, about 100 pixels below the bottom edge of the level. Create a corresponding event that checks whether the koala has collided with the Pit sprite and, if so, sets the koala’s health to 0. At that point, the “game over” event will handle displaying the MessageGameOver object.

Another item you could add is a heart item that adds one to the koala’s health when it is collected. You could set up a heartbeat-like pulsing animation with the Sine behavior set to change the size of the object. A few heart items could be strategically placed around the level in difficult-to-reach locations, or they could be occasionally spawned when an enemy is destroyed, similar to the item-spawning mechanic from the Rectangle Destroyer game. Locate the event where an enemy is destroyed, and create a subevent with a condition that compares a randomly generated number to a fixed number.

Currently, only enemies cause the koala to lose health points. You could add an environmental hazard, such as spikes, that damage the player on collision. Since you don’t want the player to be able to walk through the spikes, you probably want to add the Solid behavior to the sprite. However, to stop the player from simply walking across the spikes damage-free after the first collision, you may instead want to replace the collision condition with checking for overlap with the Below sprite (which is sufficient if the spikes can only be fallen onto from above).

To add a sense of tension, you may want to consider adding a countdown timer, analogous to the timer you added in the Racecar 500 game; if the time reaches 0, then the player instantly loses the game. With this addition, you could also consider adding a Clock item, which adds to the total time remaining, thus making it easier to complete the level in time. The Clock item also opens up a possibility for a particularly challenging level design: you could design a level and initially set the timer to an amount that is insufficient to complete the level, thus forcing the player to pick up one or more Clock items along the way.

Finally, a common feature in many platform-style games are item blocks, which typically contain coins (or could contain other items such as hearts, keys, clocks, etc.) that are spawned when the block is hit from below. The blocks typically have two animations: a flashing animation, such as the one generated by the spritesheet shown on the left side of Figure 13-22, and an empty image, as shown on the right side of Figure 13-22. The event condition to set up is similar to the condition for breaking bricks: the Above sprite should collide with the item block, and you will also need to add the condition that checks whether the flashing animation is playing. The associated actions would be for the system to spawn an object directly above the item box (similar to the paddle spawning a ball in the Rectangle Destroyer game), and the item box should set its animation to the blank image. To be able to spawn different types of items, additional item block objects could be created (using the same animations, so as to not give away anything to the player), or if you want to have only one item block object, a random number could be generated to determine what is spawned, or an instance variable could be used to determine which time of item to spawn.

A434545_1_En_13_Fig22_HTML.jpg
Figure 13-22. Item block graphics : a flashing block animation (left) and an empty block image (right)

These are just a few ideas to get you started; many more possibilities exist. Feel free to experiment and test your creations. Most important, have fun!

Summary

In this chapter, you created the platform-style game Jumping Jack. This game built on concepts and skills from most of the previous projects. Two new behaviors were introduced: Platform for standard platform controls and Jump-Thru for solidlike objects that characters can move or jump through from underneath. The Function object was introduced to reduce repeated code, and the Particle object was introduced to create an animated effect based on a single small image. Ladder-climbing mechanics were implemented, and many interactive objects were added to the level. Enemies with different movement patterns were also created to add an active challenge for the player. Finally, a great number of ideas for additional features were suggested in the “Side Quests” section.

In the next chapter, you will create the final game project in this book: Treasure Quest, a top-down perspective adventure game, inspired by the classic console game The Legend of Zelda.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset