In this chapter, you will create a game called Plane Dodger, an endless side-scrolling game, inspired by the modern smartphone game Flappy Bird, shown in Figure 6-1.
Figure 6-1. The Plane Dodger game
In Plane Dodger, the player controls a green plane (which we will simply refer to as “the plane”), whose goal is to collect stars that fly across the sky while dodging the red enemy planes that periodically appear. The stars and enemies appear at random heights in the sky, traveling across the screen from right to left. As time passes, the rate at which the enemies are spawned, as well as the speed of the enemies, will gradually increase, up to a certain limit. Since this game is endless, the player’s goal is to collect as many stars as possible before crashing into another plane, which ends the game.
The player controls the plane by pressing a single key, which gives the plane a boost of speed upward. However, gravity is constantly pulling the plane downward. While it appears that the plane is flying from left to right, this is actually a visual illusion created by scrolling backgrounds (explained in the next section); in reality, the player’s movement is restricted to a single column. The user interface is designed to be simple and minimal, so as to not distract the player from the fast-paced action of the game itself.
As usual, this game relies upon material from the previous chapters. In particular, you should be familiar with using the Bullet behavior, creating animations, creating (global) variables, and using Text objects. Topics such as creating menus, adding sound effects, and using alternative control systems are also useful for adding polish to your game, but since these features are not part of the core mechanics, they will appear in the “Side Quests” section (but that does not make them any less important). The new material introduced in this chapter includes topics such as adding scrolling backgrounds and parallax, using gravity, and creating difficulty ramps.
To begin, download the zip file containing the graphics for this chapter from the book web site. In the layout properties, set the layout Name to Main, and set Size to 600, 800. As you have in previous projects, set up three layers named Background, Main, and UI. In the project properties, change the window Size to 600, 800 (and change the Name and Author properties as you like).
Background Effects
In this section, you will set up an “infinite scrolling” effect with background images. Since image files cannot actually have infinite size, there is a technique used to create the illusion of an infinite background. The idea is to use a seamless image for the background so that when two copies of the image are placed side by side, the image appears continuous. Both images will scroll to the left at the same rate, and once one moves off-screen to the left, it will be shifted to the right, on the opposite side of the layout, as illustrated in Figure 6-2.
Figure 6-2. Two copies of a background image (dashed border), moving past layout (solid border)
First, you will create the background objects. In the layout properties, change Active layer to Background. Add a new sprite called Sky, using the image sky.png. Its size should be 600 by 800 pixels, the same size as the layout. This object needs to be precisely centered on the layout, so using the Properties panel, set the position to 300,400. Add the Bullet behavior, change Speed to 50, and change Set angle to No (because this object should not be rotated). Unfortunately, the angle of motion for the Bullet behavior cannot be set via the Properties panel, so this will be specified by an event instead. In the event sheet, create a new event with the condition System - Start & End: On Start of Layout, add the action Sky - Bullet: Set angle of motion, and set Angle to 180. Create a duplicate of the Sky instance, and in the Properties panel, set Position to 900,400 so that it is precisely aligned to the right of the previously created Sky object.
Next, you will create the event that causes a Sky object to shift to the right after it moves off-screen to the left. Create another event with the condition Sky - Size & Position: Is on-screen. When finished, right-click this condition in the event sheet and select Invert from the menu that appears. Right-click the condition again, select Add another condition, and create the condition Sky - Size & Position: Compare X, changing Comparison to less than and the X coordinate to 0. Finally, add the action Sky - Size & Position: Move at angle, with Angle set to 0 and Distance set to 2 * Sky.Width. When you are finished, these events should appear as in Figure 6-3. Save and test your project; the background image should appear to scroll forever, with no noticeable gap between the two images.
Figure 6-3. Sky initialization and scrolling events
Once the Sky sprites are configured, the next task is to set up the ground sprites, which follows the same procedure as before. Create a new sprite named Ground, using the image ground.png, which has size 600 by 80 pixels. Position it at 300,760. Add the Bullet behavior, change Speed to 200, and change Set angle to No. Duplicate the Ground object, and position the second one at 900,760. At this point, your layout should appear as in Figure 6-4; in particular, one of the Sky and one of the Ground objects will be positioned in the margin area, directly to the right of the layout, whose boundaries are indicated by a black border .
Figure 6-4. The layout with Sky and Ground objects added
In the event with the condition On start of layout, add a second action to set the Ground object’s angle of motion to 180. Finally, create a new event that causes the Ground object to shift after it moves off-screen, just as you did previously for the Sky object. When completed, these events will appear as shown in Figure 6-5. Save and test to verify that the ground scrolls as expected. By setting the distant scenery (the clouds and mountains) to scroll more slowly than the nearby scenery (the ground), it creates an illusion of depth referred to as parallax.
Figure 6-5. Ground initialization and scrolling events
The Player’s Plane
In this section, you will set up the plane that the player controls. In the layout, change Active layer to Main so that newly added objects are placed on this layer. Create a new sprite named Player. This object has an animation whose images are stored in separate files, so in the Animation frames window, right-click, select Import Frames, and then select From Files. Use the images planeGreen0.png, planeGreen1.png, and planeGreen2.png, and delete the initial blank animation frame. For the animation properties, set Speed to 8, Loop to Yes, and Ping-pong to Yes. Position the Player object at 100,300. This plane will only move up and down; a boost of speed upward will be applied when the player taps a key, and the force of gravity will constantly be pulling the plane downward, both of which can be achieved using the Bullet behavior. Add the Bullet behavior to the Player object, and set Speed to 0, set Gravity to 600, and change Set angle to No, as the plane should always face to the right, regardless of whether it is moving up or down. Also, add the behavior Bound to Layout; this will stop the plane from moving off-screen.
Next, the plane needs to be stopped from passing through the ground. Your first instinct might be to add the Solid behavior to the Ground object, but unfortunately this won’t work. By default, objects with the Bullet behavior pass through objects with the Solid behavior, unless the property Bounce off solids is set to Yes, in which case it bounces, which is also not the desired effect. (Presumably, the Bullet behavior was designed this way because in real life, projectiles either bounce or are destroyed upon impact with a wall.) Also, it is not enough to set the plane’s speed to zero on collision with the ground because gravity will still apply and will eventually pull the plane through. The simplest solution is to disable the Bullet behavior when the plane hits the ground and then re-activate (or enable) the behavior when the player taps a key. When tapping a key, the plane will be moved upward, by setting the angle of motion to 270 degrees with a speed of 300. To begin, add a Keyboard object to your project. Then, in the event sheet, create a new event with the condition Keyboard - Keyboard: On Key Pressed, and select the Space key. Then, add the following three Player - Bullet actions to this event: add Set angle of motion, and set Angle to 270; add Set speed, and set Speed to 300; and add Set Enabled, and set State to Enabled. Create another event, with the condition Player - Collisions: On Collision with another object, and select Ground. To this event, add the action Player - Bullet: Set Enabled, and set State to Disabled. When finished, these events should appear as in Figure 6-6. Save and test your game; check that pressing the spacebar moves the plane upward and that the plane stops moving at the top of the screen and when it touches the ground.
Figure 6-6. Events for controlling player plane movement
Stars and Score
In this section, you will add stars to the game for the player to collect, a global variable to keep track of the number of stars collected, and a Text object to display this information. To begin, in the event sheet, right-click and add a global variable; set Name to Score , Type to Number, Initial Value to 0, and Description to Number of stars collected.
Next, in the layout, add a new sprite named Star with the image star.png. Add the Bullet behavior, with Speed set to 200 (to match the Ground speed) and Set angle set to No. Also, to draw the player’s attention to these objects (so they aren’t considered as part of the scenery), you will set up some value-based animations. Add the behavior Rotate, with Speed set to 30. Also add the Sine behavior, with Movement set to Size, Period set to 1, and Magnitude set to 8. While in the layout, add a Text object named TextScore. Set its Text property to 0, showing the initial score. Also, set its Layer to UI, make the text box large, set the alignment properties so that the text is centered, and change the font size so that it is easy to read (such as Arial, size 48). Optionally, to make the text appear to “pop out” of the screen, there is a simple way to create a drop shadow effect. Make sure that the Text color is set to black and then duplicate the Text object. Change the color of this new text object to white, and position it so that it is a few pixels above and to the left of the black text. Since the black text was created before the white text, it will appear underneath the white text, creating a nice effect, as shown in Figure 6-7.
Figure 6-7. Drop shadow effect created with a duplicated Text object
Now you will set up three events related to Star objects: one event to generate the stars, one event for when the player collects a star, and one event for when the player misses a star and it moves off-screen to the left.
First, create a new event with the condition System - Time: Every X seconds, and set Interval to 2. Add a second condition to this event called Player - Size & Position: Is on-screen; the purpose of this second condition is to stop the stars from spawning once the player has lost the game and been destroyed. Next, you will add an action that spawns additional instances of the Star sprite beyond the right edge of the layout. Sprites can be spawned from other sprites, or they can be spawned from the System object; the latter is the approach you will take here. In this event, add the action System - General: Create Object. In the parameters window, set Object to create to Star, set Layer to "Main" (with the quotation marks), set X to 700, and set Y to random(100,700). Recall that angles of motion need to be set by actions, so add another action called Star - Bullet: Set angle of motion, and set Angle to 180 .
Next, you will create the event that handles what happens when the player collides with a star, which is that the star is destroyed, a point is added to the Score variable, and the Text object displaying the score value is updated. Create a new event with condition Player - Collisions: On collision with another object, and select Star. Add three actions to this event.
Add Star - Misc: Destroy.
Add System - Global & local variables: Add to, and set Variable to Score and Value to 1.
Add TextScore - Text: Set Text, and next to Text, enter Score (without quotation marks so that the value of the variable is displayed, not the word itself).
Finally, you will create the event that destroys a star once it moves off-screen to the left. It is important to specify the side since stars are created off-screen to the right and you don’t want them destroyed in that situation. Create a new event with the condition Star - Size & Position: Is on-screen, and invert the condition on the event sheet. Also add the condition Star - Size & Position: Compare X, change Comparison to Less Than, and set the X coordinate to 0. Finally, add the action Star - Misc: Destroy.
When you have completed these three events, they should appear as in Figure 6-8. Save and test your game to verify that stars do in fact appear onscreen every 2 seconds and travel to the left and that when the player collides with a star, the star disappears and the score display is updated correctly.
Figure 6-8. Events related to Star objects
Enemy Planes
In this section, you will add enemy planes to introduce an element of challenge. As an added level of sophistication, you will also create a set of variables that causes the overall difficulty to increase as time passes. The rate at which enemies spawn and their movement speed will both slowly increase. This is known as a difficulty ramp and is useful in keeping players challenged and interested in the game; as they play more and their skills increase, they will be able to play the game for longer periods of time and attain higher scores. To begin, in the event sheet, create a global variable; set Name to SpawnRate, set Type to Number, set Initial value to 2, and for Description enter Seconds until next enemy spawns. Next, create another global variable; set Name to EnemySpeed, set Type to Number, set Initial value to 300, and for Description enter Used when setting speed of newly created enemy planes.
In the layout, create a new sprite named Enemy. Setting up its graphics is completely analogous to the process used for the player plane. In the Animation frames window, import the image files for the red, left-facing plane, and set the animation properties Speed to 8, Loop to Yes, and Ping-pong to Yes. Position the Enemy plane off-screen, in the margin area above the layout. Add the Bullet behavior, and change Set angle to No.
Next, you will add a total of five enemy-related events to the event sheet. Three of these events will be quite similar to the star-related events you previously created: an event to spawn new instances, an event to handle collision with the player, and an event to destroy objects that pass beyond the left edge of the screen. Every time a new enemy is spawned, the values of the variables SpawnRate and EnemySpeed will be adjusted; the remaining two events will guarantee that the values of these variables stay within a reasonable range.
In the event sheet, create a new event with the condition System - Time: Every X seconds, and set Interval to SpawnRate. Add another condition called Player - Size & Position: Is on-screen. When the game is over and the player is destroyed, this event will no longer activate. Next, add the following actions:
Add System - General: Create object, and in the parameters window, set Object to create to Enemy, set Layer to "Main", set X to 700, and set Y to random(100,700).
Add Enemy - Bullet: Set angle of motion, and set Angle to 180.
Add Enemy - Bullet: Set speed, and set Speed to EnemySpeed.
Updating the associated variable values requires two more actions to be added to this event.
Add System - Global & local variables: Add to. For Variable, select EnemySpeed, and for Value, enter 10.
Add System - Global & local variables: Subtract from. For Variable, select SpawnRate, and for Value, enter 0.05.
Next, you will create two new events even more similar to the previous star-related events. Create a new event with a condition that checks whether the player has collided with an enemy and a corresponding action that destroys the player object. Create another new event with two conditions that check whether the enemy is not onscreen and that compare the x value to check whether it is less than zero; also add a corresponding action that destroys the enemy object .
Finally, you need to set reasonable limits on the values of the variables. You previously implemented a similar feature in the Space Rocks game in an event that checked the speed of the player’s spaceship; if the speed was greater than 200, the speed was set equal to 200, which effectively became a speed limit for the spaceship. You will create two similar events in your current game. The first of these events will set a bound on how quickly enemy planes can spawn; if the value of SpawnRate gets too close to 0, then there will be a near-continuous stream of enemy planes appearing, which would be impossible to dodge (thus making the game unfair and frustrating for the player). To solve this problem, you will set a lower limit of 0.5 for SpawnRate. To accomplish this, create a new event with the condition System - Global & local: Compare variable, changing Variable to SpawnRate, Comparison to less than and Value to 0.5. Then create the action System: Global and local variables: Set value, changing Variable to SpawnRate and Value to 0.5. Once you are finished, create a similar event that checks whether the EnemySpeed variable is greater than 800 and, if it is, then sets the value of EnemySpeed to 800.
When you are finished, the enemy-related events should appear as in Figure 6-9. Save and test your game, making sure that the enemies become faster and appear more frequently as time goes on .
Figure 6-9. Events related to Enemy objects
When you have reached this point, congratulations! You have implemented the core mechanics of the Plane Dodger game .
Side Quests
There are many features you could consider to add polish to this project. For example, you could add the following:
Animated effects for when stars are collected or the player’s plane is destroyed (two spritesheets you could use for this purpose, sparkle.png and explosion.png, are included)
Background music
Sound effects that play when a star is collected or when the player’s plane explodes
Alternative controls, allowing the player to use a mouse button click instead of (or in addition to) a keyboard press to control the plane
Another layout that serves as a start menu
Objects that appear when the player is destroyed, such as a “game over” message and a button that restarts the layout so that the player can play again
At a more advanced level, you might want to experiment with different gameplay mechanics. The following are some ideas:
Replace the Player object’s Bullet behavior with the 8-Direction behavior.
Add a Sine behavior (with vertical displacement) to the Enemy objects to produce a more complex movement pattern.
Add some form of shield or barrier object to the Player object (similar to the Space Rocks game) so that the Player object can withstand multiple hits.
Similar to the star objects, create different collectible objects with different amounts of points (such objects could have greater speed or different movement patterns).
Implement an item (such as an “electromagnetic pulse”) that can be used once to destroy all enemy planes on the screen as an emergency measure .
Summary
In this chapter, you learned how to create an “endless” game, using scrolling backgrounds to create the illusion of continuous movement. Since this was your first game with a side-view perspective, you used the gravity property of the bullet behavior. To keep the gameplay from becoming monotonous, you also implemented a difficulty ramp to make the game more challenging as time progresses. Finally, you were presented with a great variety of aesthetic and gameplay modifications to consider in the “Side Quests” section.
In the next chapter, you will return to a top-down perspective as you create a car-racing game, Racecar 500.