Introduction

In Space Rocks, the player controls a spaceship, whose goal is to fly around and shoot lasers to destroy asteroids that are floating across the screen. The player must also take care that the spaceship does not get hit by asteroids, as they can damage or destroy the spaceship. The game world space uses wraparound, which means that when an object moves past one edge of the screen, it reappears on the other side. The player uses the keyboard to control the spaceship, which may turn left or right, move forward in the direction it is currently facing,¹ and fire lasers. The spaceship also has the ability to teleport to a random location on the screen, which can be useful to escape from an imminent collision with an asteroid but also involves a certain amount of risk, as it is possible that the spaceship will appear in the path of another asteroid (or even worse, appear within an asteroid). This game also features animations and visual special effects, such as rocket thruster fire and explosions. As extra optional features, you will learn how to add shields to provide limited protection to the ship and to add UFOs that randomly spawn and present another obstacle for the player to avoid.

This chapter assumes you have mastered the material in the previous chapter. In particular, you should be able to change layout and project properties, add layers to a layout, add sprites and adjust their properties, add behaviors to a sprite, and create events with given conditions and actions. In this chapter, you will learn about some new behaviors, animations, and functions for events.

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, set Size to 800, 600, and set up the three layers named Background, Main, and UI as you did for the Starfish Collector game. In the project properties, change the window Size to 800, 600 (and change the Name and Author properties as you like). In the layout area, create a sprite named OuterSpace, using the image space.jpg, and position and resize the sprite so that it covers the entire layout area. Change the Layer property so that the OuterSpace sprite is on the Background layer. Your layout should look like Figure 3-2: an image of outer space.

Figure 3-2. Layout with the outer space background sprite added

Spaceship Movement

The next step is to add the player’s character: the spaceship. To begin, change the active layer in the layer panel to Main. Create a sprite named Spaceship using the image file spaceship.png. Position it near the center of the layout. Your first goal is to set up events for spaceship movement, as described in the introduction of the chapter. However, unlike the situation for the Starfish Collector game, there are no preconfigured behaviors that will create the precise style of movement for this game. Therefore, in this section, you will set up some events for customized movement.

Right-click in the layout area and select Insert New Object. In the window that appears, underneath the Input heading, select Keyboard and press the Insert button (you do not need to rename the Keyboard object). The Keyboard object provides you with the ability to check any keyboard key and determine whether it was just pressed, whether it is currently being held down, and whether it was just released. (You didn’t need to add a Keyboard object in the previous project because the 8-Direction behavior automatically checks for keyboard input.)

The first event you will add will be, informally, “If the left arrow key is held down, then turn the spaceship counterclockwise 2 degrees.” There are two subtle points to this event that are worth noting before you continue. First, the condition checks whether the key is being held down; this will be true (and the event action will repeat) as long as the player is holding down the key (in contrast to on key pressed, which registers as true only at the first instant when a particular key is pressed). Second, the action of rotating by 2 degrees will take place 60 times per second,² so the rate of rotation is actually 120 degrees per second; since there are 360 degrees in a full rotation, the spaceship will be able to spin around completely once every 3 seconds.

To add the event, click the Event Sheet tab, and click Add Event. In the window that appears, select the Keyboard object and then select the condition Key is down, as shown on the left side of Figure 3-3. A new window will appear containing a button labeled <click to choose>. Click this button, and another window will appear, asking you to press a key. Press the left arrow key on your keyboard, and the name of the key pressed will appear in a text box in this window. When you are finished, click the OK button, and you will be returned to the previous window, where you can click the Done button. Then, in the event sheet, click Add Action next to the condition you just created. Select the Spaceship object and then select the action Rotate Counter-Clockwise from the Angle group, as shown on the right side of Figure 3-3. A window will appear where you can type the number of degrees to rotate; enter 2 and then click the Done button. This completes the event that will enable the player to rotate the spaceship to the left .

Figure 3-3. The lists of conditions and actions for rotating the spaceship

Next, you will add an event that lets the player turn the ship to the right; informally, this event is “If the right arrow key is held down, then turn the spaceship clockwise 2 degrees.” The steps for adding this event are nearly identical to those listed earlier, with only two differences: first, when selecting the key in the condition, you should press the right arrow key, and second, when creating the spaceship action, you should select Rotate Clockwise from the list of actions. When completed, these two events should look like Figure 3-4.

Figure 3-4. Completed events for rotating the spaceship left and right

Now that your spaceship can turn left and right, the next step is to create events to handle forward motion. While creating actions in the past, you may have noticed some actions in the Size & Position group that may be applicable, such as Move Forward and Move at Angle. However, in this game, the movement is more subtle: when the player presses the key to activate the spaceship’s thrusters, this should cause the spaceship to accelerate forward, in other words, to slowly increase its speed up to some maximum value. Furthermore, when the player releases this key, the spaceship does not immediately stop; instead, it continues to drift in the same direction, at the same speed. This makes sense in this context because in outerspace there are no opposing forces (such as friction) to slow down the spaceship. The only way for the player to reduce the speed of the spaceship is to rotate the spaceship in the opposite direction and activate the thrusters to counteract the acceleration .

To accomplish this style of movement, you will create the event “If the up arrow key is held down, then accelerate the spaceship at a rate³ of 100, in the direction that the spaceship is facing.” Acceleration is not a property available to sprite objects by default, so to create this action, you will first add a behavior that provides this functionality. Select the Spaceship object in the layout, and add the behavior called Custom Movement. Then, in the event sheet, create a new event, selecting the Keyboard object and the condition Key is down, and select the Up arrow key. Next, add an action to this event, selecting the Spaceship object and the action Accelerate toward angle in the group Custom Movement: Velocity. A window will appear where you can enter values for this action. In the Acceleration text box, enter 100. In the Angle text box, enter Spaceship.Angle. In particular, do not forget the period between the words Spaceship and Angle; the period indicates that the program should use the value of the Angle property that belongs to the Spaceship object (as opposed to the Angle property of other game objects). When finished, your event should appear as in Figure 3-5.

Figure 3-5. The completed event for accelerating the spaceship forward

Another gameplay mechanic that you can easily add at this time is wraparound; when the spaceship moves past one edge of the screen, it should reenter the screen at the opposite edge, as if the edges were connected. To implement this feature, select the Spaceship object, and add the Wrap behavior.

Now is a good time to save and test your project. After saving (as usual, a single .capx file is the preferred format), click the Run layout button in the title bar of the Construct window. Make sure that the left and right arrow keys rotate the spaceship left and right, respectively, and that the up arrow key accelerates the spaceship forward in whatever direction it is currently facing. As you are testing the controls, you might notice that you can continue to accelerate the spaceship to ludicrous speeds, which could cause the spaceship to flicker or move so quickly it appears to be in multiple places at once. We will address this issue by creating an event that forces the spaceship speed to be less than a certain amount .

The next event will cap the spaceship speed at 200 pixels per second and can be phrased as “If the spaceship’s speed is greater than 200, then set the spaceship’s speed to 200.” In the event sheet, add a new event. Select the Spaceship object and the condition Compare Speed from the group Custom Movement; in the parameters window that appears, change Comparison to Greater Than, and change the value of Speed to 200. Add an action to this event, selecting the Spaceship object and the action Set Speed from the group Custom Movement: Velocity; in the parameters window that appears, change the value of Speed to 200, and click the Done button. When you are finished, the event should appear as in Figure 3-6. Save and test your project to verify that the event is working as expected.

Figure 3-6. The completed event for capping the spaceship’s speed

Lasers and Rocks

In this section, you will create additional game objects for the Space Rocks game: lasers that the spaceship can fire and asteroids that the player will attempt to shoot with the lasers.

In the layout area, insert a new object: a sprite that you name Laser. Position it above the layout, in the gray margin area (off-screen), and use the image file named laser.png; adjust the size if necessary. As it turns out, most of the functionality of the Laser object can be implemented by behaviors. First, add the behavior named Bullet. The Bullet behavior makes objects move in a straight line. After this behavior is added, you will see in the Properties panel that the default speed is 400 pixels per second; you may adjust this value later if you want. Also, add the Wrap behavior since a laser that moves past one edge of the screen should reappear on the opposite side, as is the case with the spaceship. Next, add the behavior named Fade. The Fade behavior makes objects fade in or fade out after an optional time delay and can be set to automatically destroy objects after they have faded out. You want to use this behavior, because otherwise the lasers will cycle around the screen forever until they hit something. In the Properties panel underneath the Fade group, change Wait Time to 1, change Fade Out Time to 0.5, and leave Destroy set to After Fade Out .

Next, you will add an event to shoot lasers: “If the spacebar is pressed, then the spaceship creates a laser.” To begin, add a new event to the event sheet. For the condition, select the Keyboard object and the condition On Key Pressed. As with the previous keyboard conditions, you need to specify a key; following the same procedure as before, select the space bar key. This condition will be true only when the key is first pressed; every time the spacebar is pressed, only one laser should be fired.⁴ Next, add an action to this event; select the Spaceship object, and select the action Spawn Another Object. (In game development, creating an object during gameplay is called spawning an object.) In the parameters window that appears, click the button labeled <click to choose> and select the Laser object; in the Layer text box, enter "Main" (including the quotes). Click the Done button, and your event is complete; it should appear as shown in Figure 3-7. It is worth noting that you did not need to set the position or angle of the spawned laser because these values are automatically set to match the values of the object that does the spawning (in this case, the spaceship). Now is another good time to save and test your game. In particular, when playing your game, make sure that pressing the spacebar fires one laser, and verify that the laser wraps around the screen and fades out after a short interval. If any of these features aren’t working as expected, double-check that the correct behaviors have been added, that any property values discussed have been set correctly, and that the events appear exactly as shown in this section.

Figure 3-7. The completed event to shoot lasers

Now that you have lasers to shoot, it is time to add something to shoot at: asteroids. To begin, in the layout area, insert a new object: a sprite that you name Asteroid. Position it anywhere on the screen, and use the image file named rock.png; adjust the size if necessary. As was the case with the laser, most of the functionality of the rocks can be implemented by behaviors. First, add the Solid behavior. Next, add the Bullet behavior; in the Properties panel, change Speed to 100 and change Bounce Off Solids to Yes; this will make the asteroids bounce off each other as they move across the screen (later, you will create additional instances of asteroids, after these properties are set). Next, add the Wrap behavior to be consistent with the spaceship and lasers. Finally, you want the asteroids to appear as though they are spinning around in space. To this end, add the Rotate behavior. You will now also need to change the bullet behavior property Set Angle to No. If set to Yes, the bullet behavior moves the object in the direction of the sprite’s angle. However, you want the bullet motion to be independent of the sprite angle (the asteroid is traveling in a straight line while the image spins), so you must change the Set Angle value to No. After all these behaviors are added and the properties are changed, duplicate the Asteroid object a few times and position the copies around the screen, far away from the spaceship. To add some variety to their appearances, you can make small adjustments to the size or angle for individual instances. When you are finished, your layout should appear similar to Figure 3-8. Save and test your project, and make sure that the rocks move as expected.

Figure 3-8. The Space Rocks layout after adding rocks

To add interactivity between the game objects, you will now create some additional events. In particular, the spaceship should be destroyed when it is hit by an asteroid, and an asteroid should be destroyed when it is hit by a laser. The first event can be expressed as “If an asteroid collides with the spaceship, destroy the spaceship.” To implement this, add a new event. Select the Asteroid object and the condition On Collision with Another Object; in the parameters window, select the Spaceship object. Add an action to this event; select the Spaceship object and the action Destroy. When completed, your event should appear as shown at the top of Figure 3-9. The second event is “If a laser collides with an asteroid, then destroy the asteroid and destroy the laser.” Implementing this is similar to the previous event. One change is that the condition is between a laser and an asteroid. The slightly trickier difference is that there are two actions associated to this event. After adding the first action (to destroy the asteroid), click Add action under the previous action. This enables you to add a second action to the event; when the condition is true, both actions will occur. When completed, this event should appear as shown at the bottom of Figure 3-9. As usual (after adding new events), now is a good time to save and test your game. You may find that you need to adjust the position, angle, size, or speed of the rocks to achieve good gameplay balance; ideally, the game should be challenging but winnable.

Figure 3-9. Collision events

Thrusters and Explosions

At this point, you have implemented the fundamental game mechanics of the Space Rocks game. This section is dedicated to visual feedback, which is important in providing a quality gameplay experience for the player. The two features you will implement include a thruster effect, which will be visible whenever the spaceship is accelerating, and an animated explosion, which will appear whenever an object is destroyed.

First, you’ll add the thruster effect. In the layout area, add a new sprite named Fire using the image fire.png. Position and resize this sprite so it appears to be coming from the spaceship, as shown in Figure 3-10. Add the Pin behavior. The Pin behavior is used to “attach” one sprite to another; when a sprite moves or rotates, any sprites pinned to it will move or rotate in the same way, as if the sprites were a single unit.

Figure 3-10. Relative position of the spaceship and fire sprites

To specify the object to which the fire should be pinned, you need to set up an event. This event needs to take place exactly once, as soon as the game starts, as in “If the layout just started, then the Fire object will pin itself to the spaceship.” In the event sheet, add a new event. Select the System object and the condition On Start of Layout (which was designed to be used for exactly such a situation). Add an action, select the Fire object, and select the action Pin to Object; in the parameters window that appears, select the Spaceship object. The fire should exist only as long as the spaceship exists, so you also need to add an action to the event where an asteroid collides with the spaceship; in this case, the fire also needs to be destroyed. When you are finished, these events should appear as shown in Figure 3-11. Save and test your game; the Fire object and Spaceship object should move around the screen as a single unit. However, the Fire object is currently always visible, while the desired effect is that the fire be visible only when the spaceship is accelerating. This issue will be fixed next.

Figure 3-11. The added action Destroy and completed event to activate the pin behavior

The Fire object should not be visible when the game starts, and thus you should select the Fire object in the layout and set the property Initial Visibility to Invisible. Next, you need to set up a pair of events to control the visibility of the fire: when accelerating, the fire should be visible, and when not accelerating, the fire should be invisible. Recall that acceleration occurs when the up arrow key is being held down, and there is already an event in place with this condition. Therefore, you only need add a new action to this particular preexisting event, so click Add action directly underneath the spaceship acceleration action. In the window that appears, select the Fire object, and the Set Visible action from the Appearance group. In the parameters window that appears, leave the visibility set to the default value of Visible, and click the Done button. With this addition, the event will now appear as in the top part of Figure 3-12.

Figure 3-12. Events for setting the visibility of the Fire object

To make the fire invisible, the event should be “If it is not true that the up arrow key is held down, then the Fire object will set its visibility to invisible.” You may have observed that, in general, conditions in Construct are phrased in a positive manner; they each check whether some condition is happening rather than if some condition is not happening. In cases such as these when the negation of a condition needs to be checked, Construct provides you with the ability to invert any given condition. An inverted condition is true exactly when the original condition is not true. Thus, to implement the event described earlier, begin by creating a new event with the Keyboard condition Key is Down, and via the parameters window, select Up arrow key, as you have before. When you are finished and the condition is displayed in the event sheet, right-click the condition and a list of options will appear. From this list, select Invert, and a red X will appear in the condition, indicating that it has been inverted. Inverting can be thought of as inserting the phrase “It is not the case that…” into the description of the condition. Then, add an action to this event; select the Fire object and the Set Visible action, and in the parameters window, change the setting to Invisible. When you are finished, the event will appear as in the bottom part of Figure 3-12. As usual, save and test your game; make sure that the fire is visible only when you are pressing the up arrow.

Next, you will add a visual explosion effect that will appear when certain objects are destroyed. Unlike the value-based animations from the previous chapter, which involved objects rotating or changing their size, this will be your first image-based animation, which rapidly displays a sequence of images, similar to the way a movie works. In particular, you will be using the image file explosion.png, shown in Figure 3-13, which actually contains a series of smaller images (referred to as the frames of the animation) arranged in a rectangular grid. Such an image is referred to as a sprite sheet or a sprite strip. If these particular images are displayed one after the other, then it will appear as an explosion that starts out bright, changes color from yellow to orange to red, and finally darkens and fades out as smoke.

Figure 3-13. Spritesheet used for an explosion special effect

To begin, add a new sprite named Explosion to the main layer of the layout. When the set of image editor windows appear, instead of using the large main Edit Image window, you will focus on the window called Animation frames. Right-click in this window, and in the menu that appears, hover over the selection Import Frames and then click the option From Sprite Strip. Select the image explosion.png, and then a window will appear titled Import Sprite Strip. This window is used to specify how many subimages are contained in the sprite strip image. In this case, the grid of images contains six images in each row, so enter 6 for the number of horizontal images, and there are six rows total, so enter 6 for the number of vertical images. Also, select the Replace Entire Existing Animation check box, as you do not want to save the default blank image provided by the image editor. Click the OK button, and when the confirmation dialog appears, click OK; you really do want to replace the current animation. After a moment, you should see the individual frames appear in the Animation f rames window (you may need to use the scroll bar to see them all), as shown in Figure 3-14. Frames can be rearranged by using the mouse to drag and drop, and individual frames can be deleted by right-clicking the frame and selecting Delete; however, you do not need to do either of these at this time. To preview the animation, locate the image editor window titled Animations; this contains a list of animations stored for this object and should currently contain only one item, named Default. Right-click the name of the animation and select Preview, and a small window will appear and display what will appear to be a very slow and choppy animation. To remedy this, click the name of the animation, and the Properties panel should display a short list of animation-related properties. The property Speed represents how many frames are displayed each second; change this value to 20 and then watch the preview again to see a smoother and faster animation. When you are finished, close the image editor windows.

Figure 3-14. The Animation frames window after importing a sprite strip

Next, in the layout, position the Explosion sprite so that it is in the gray margin area. This is so that the initial explosion occurs off-screen and is not visible to the player.⁵ Next, you will add actions to preexisting events where explosions should occur. In the event sheet, you will add another action to the event involving the spaceship being destroyed. Click Add Action directly below this action, select the Spaceship object, select the action Spawn Another Object, and in the parameters window choose the Explosion object and spawn it on the Main layer. Similarly, add yet another action to the event involving an asteroid being destroyed: click Add Action, select the Asteroid object, select the Spawn action, choose the Explosion object, and set it to appear on the Main layer. Finally, you need to add an event that removes the Explosion sprite from the layout after its animation is finished. Otherwise, all the explosions that are spawned will remain in computer memory (even though they are invisible), potentially resulting in a slower frame rate as the game progresses. Add a new event, selecting the Explosion object and the condition On Any Finished from the Animation group. For the corresponding action, select the Explosion object and the Destroy action. When you are finished, the updated events and the new event should appear as in Figure 3-15. Save and test your game, and watch the explosions appear when the lasers collide with the asteroids (or when an asteroid collides with the spaceship).

Figure 3-15. Events related to explosions

Teleportation

Another game mechanic mentioned at the beginning of this chapter is the ability of the spaceship to teleport to a random location on the screen, a potentially risky method of escape from imminent collision with an asteroid. You will also provide visual feedback in the form of an animated special effect that appears at the original position and the new position of the spaceship, as shown in Figure 3-16 .

Figure 3-16. Warp effects appearing after ship teleportation

First, you will create an animated sprite representing the special effect. In the layout, create a new sprite named Warp, positioned in the margins of the layout area. Since you are creating an animated sprite, the following process will be similar to the process for creating the explosion animation. When the image editor windows open, right-click in the Animation f rames window, and select Import from sprite strip. Select the image file warp.png, and in the window that appears, enter 8 for horizontal cells, 4 for vertical cells, and check the box to replace the existing animation. Click Default in the window titled Animation, and in the Properties panel, change Speed to 16 and change Loop to Yes; this means the animation frames will be displayed in a cycle, returning to the first frame after the last frame is displayed. When completed, also add the Fade behavior to the Warp sprite. This will fade out the Warp sprite over the course of one second, and because the Fade property Destroy is set to After Fade Out by default, you don’t need to add an event to destroy it as you did with the Explosion sprite.

The event that you will create next is “If the X key is pressed, then the spaceship will spawn a Warp object, the spaceship will move to a random position, and the spaceship will spawn a (second) Warp object.” To begin, create a new event with the keyboard condition On Key Pressed. In the parameter window, press the X key (or any other unused key of your choice). Add an action to this event, selecting the Spaceship object, select the action Spawn Another Object, and select the Warp object. Then add a second action to this event, selecting the Spaceship object and the action Set Position in the Size & Position group. In the parameters window that appears, there are text boxes where you can specify the x and y coordinates of the spaceship. However, you don’t want to enter just a number in these areas because then the spaceship would always move to that particular location and the teleporting would not be random.

Fortunately, the Construct game engine does not limit you to just entering numbers; you can enter expressions, which are combinations of values, operations, and functions. In particular, functions are used to transform input values into output values according to a built-in formula or procedure. When entering functions into Construct, the name of the function is written first, followed by parentheses; the input appears between the parentheses, and if there are multiple input values, they are separated by commas. Here’s an example:

• The round function transforms the number 3.8 into the number 4; this would be entered as round(3.8).

• The sqrt (“square root”) function transforms the number 25 into the number 5; this would be entered as sqrt(25).

• The max (“maximum”) function takes two numbers as inputs and yields the larger of the two input values as the output value. For example, max(9, 7) would be equal to 9.

• The random function takes two numbers as inputs and yields as output a randomly generated decimal value between these values. Unlike most other functions, every time this function is used, you could get a different number. For instance, random(10, 20) could yield the output value 14.5337, but the next time it is used, it could yield 19.0042.

For this game, it is the last of these functions mentioned that you will use. Since the layout size is 800 pixels wide, the value of X could be anything between 0 and 800. Returning your attention to the parameters window, enter the expression random(0, 800) in the X text box. Similarly, since the height of the layout is 600 pixels, enter random(0, 600) in the text box next to Y, and click the Done button. Finally, add a third action to this event, identical to the first: select the Spaceship object, select the Spawn Another Object action, and select the Warp object. Since actions are activated in sequence, from top to bottom, the second Warp object will be created by the spaceship after it has moved to its new position on the layout. When you are finished, the event will appear as in Figure 3-17. Save your game, play it to test the teleportation mechanic , and verify that it sends the spaceship to random positions and that the Warp objects appear as expected.

Figure 3-17. Event for the teleport game mechanic

Winning or Losing the Game

Finally, you will implement some messages that inform the player that the game is over and whether they have won or lost the game. It is important to provide a sense of closure, as discussed in the previous chapter. The events will also be similar to those in the previous chapter: if there are no asteroids left, then a Congratulations! message appears; if there is no spaceship left, then a Game Over message appears.

To begin, create a sprite named MessageWin using the image file message-win.png. Position it in the center of the layout, change its Layer property to UI, and change its Initial Visibility property to Invisible. Repeat this process to create a sprite named MessageLose using the image file message-lose.png. Like before, center it in the layout, set its layer to UI, and make it invisible. Next, add an event with the System condition Compare Two Values; in the parameters window, enter Asteroid.Count as the first value, Equal to as the comparison, and 0 as the second value. Add an action for this event, selecting the MessageWin object and the Set Visible action, with the parameter Visible. Finally, add one more event with the System condition Compare Two Values; in the parameters window, enter Spaceship.Count for the first value, Equal to for the comparison, and 0 for the second value. Add an action to this event that sets the MessageLose object’s visibility to visible. When you are finished, your events should appear as in Figure 3-18. Save and test your game, and verify that you can both win and lose and that the correct message appears in each situation, as shown on the left and right sides of Figure 3-19. If so, congratulations!

Figure 3-18. Events for displaying the win and lose messages

Figure 3-19. Winning the game (left) and losing the game (right)

Side Quests

At this point, you have finished implementing the core mechanics for the Space Rocks game: the controls work as desired; the spaceship, asteroids, and lasers interact with each other; there are some special effects to give visual feedback to the player; the spaceship is able to teleport at random; and there are win and lose conditions for the game. This section will explain how to implement some optional features to improve the gameplay experience. First, in the current version of the game, the spaceship is destroyed after a single collision; to add some balance to the game, you will add protective shields around the spaceship, which enable it to withstand multiple hits. Second, you will create some unpredictability by adding some enemy characters in the form of unidentified flying objects (UFOs), which will appear periodically at random locations and move across the screen in a wave pattern, adding some extra challenge.

Shields

To begin, create a new sprite named Shields, using the image file shields.png. Add the Pin behavior and the Solid behavior. Position the shield sprite so that it is centered on the spaceship. Just as with the Fire object previously, you need to configure the Pin behavior, attaching the sprite to another object, using an event. In the event sheet, locate the event you previously created with the System condition On Start of Layout. Add another action to this event, selecting the Shields object and the Pin action, and in the parameters window, select the Spaceship object. Collision with the shields should also stop the spaceship from moving. To implement this feature, create a new event. Specifically, for the condition, select the Asteroid object and the condition On collision with. In the parameters window, select the Shields object; for the action, select the Spaceship object and the action Stop from the Custom Movement: Velocity group. When you are finished, the modified event and new event should appear as shown in Figure 3-20. Save and run your game, and you should see that as you move the spaceship around, the asteroids bounce right off the shields, and since the shield sprite is larger and completely surrounds the spaceship sprite, this prevents any asteroids from hitting the spaceship at all.

Figure 3-20. Events involving the shield sprite

At this point, the shields are overpowered, in the sense that it is impossible for the player to lose (unless they randomly teleport into an asteroid). What the game needs now is a way to “damage” the shields: after a certain number of collisions, the shields should be destroyed, and furthermore, it is desirable for the player to have visual feedback indicating that the shields have been damaged.

One way to accomplish both of these goals simultaneously is to use the opacity of the shields as a measure of the “health” of the shields.⁶ The initial value of the opacity is 100; every time there is a collision, this value will decrease by a fixed amount. If the value becomes zero, then the shields will be destroyed, and the ship may be destroyed on collision with an asteroid .

To set this up, find the event you previously created with the condition that an asteroid collides with the shields. Add an action to this event, selecting the Shields object and the Set Opacity action; in the parameters window, enter Shields.Opacity - 25. This will set the new value of the shield’s opacity to the previous value of the shield’s opacity minus 25. Thus, after four collisions, the opacity will be zero. At this time, you must specify that the shield object should be destroyed (otherwise it will continue to cause asteroids to bounce off, even though it can’t be seen). To accomplish this, add a new event. For the condition, select the Shields object and the Compare opacity condition; in the parameters window, change the comparison to less or equal, and the value to 0. For the action, select the Shields object and the Destroy action. When you are finished, the events should appear as in Figure 3-21. Save and test your game to verify the shields work as expected.

Figure 3-21. Events for damaging and destroying the shields

UFOs

In this side quest, you will add a regularly spawning enemy. This enemy will be passive. It won’t react to the player in any way; it has no abilities other than moving across the screen. The enemy will spawn at a random location beyond the left side of the layout and move to the right in a wave pattern. This movement style will add an extra challenge to the game because it will be more difficult to avoid and shoot these objects. When adding a new character or object to a game, there are many aspects that you will need to decide on. In addition to movement patterns, you also need to decide whether the character has any abilities, how the character interacts with every other object in the game, how the character could affect the win/lose conditions, and what happens to the character when the game is over. In what follows, each of these issues will be addressed.

First, add a new sprite called UFO with the image ufo.png, and place it in the margin area beyond the right edge of the layout. Add the Bullet behavior to the UFO sprite, and in the Properties panel, change Speed to 125. Also add the Sine behavior, set Movement to Vertical, set Period to 1, and set Magnitude to 25. This will cause the UFO to move as described earlier, in a wavelike pattern.

Next, you will add functionality for causing UFOs to spawn on the left side of the screen and self-destruct beyond the right side. Add a new sprite named SpawnPoint; this will be placed off-screen and will be used to spawn new instances of the UFO sprite. The image you use for the SpawnPoint sprite is irrelevant since this object will never be seen by the player, so use the image editor tools such as the paintbrush or bucket to draw or fill in the image area with a solid color of your choice. Since you don’t really need a 250-by-250-pixel image for this sprite, use the Resize tool in the image editor to change the size of the image to 32-by-32 pixels. When you are finished, close the image editor window and position the sprite in the margin area directly to the left of the layout. Your layout (including margins) should appear similar to Figure 3-22 .

Figure 3-22. Layout area with UFO and SpawnPoint placed in margins

In the event sheet, create a new event. For the condition, select the System object, and from the Time group, select the Every X Seconds condition. In the parameters window, enter 5 for the interval, and click the Done button. This condition will be true exactly once every 5 seconds. Next, you will add some actions to randomly reposition the SpawnPoint object and have it spawn a UFO. Click Add action next to the condition, select the SpawnPoint object, and from the Size & Position group select Set Y. In the parameters window, enter random(100, 500). This is similar to what you entered previously when creating the teleportation events, except you are changing only the Y coordinate (the vertical position) because SpawnPoint needs to remain to the left of the layout. Also, the random number will be between 100 and 500 (rather than spanning the full range of the height, between 0 to 600) so that the UFO doesn’t spawn too close to the top or bottom edge of the layout. Add another action to this event, once again selecting the SpawnPoint object. From the list of actions, select Spawn another object, and in the parameters window , select the UFO object. Finally, you need another event that will remove the UFOs from the game once they have passed beyond the right edge of the layout. Add a new event, selecting the UFO object, and from the list of conditions, select Compare X from the Size & Position group. In the parameters window, change Comparison to Greater Than, and change X to 900. Add an action to this event, select the UFO object, and select Destroy from the list of actions. When you are finished, these events should appear as in Figure 3-23. Save and test your game, making sure that UFOs spawn as frequently as expected and move across the screen as described earlier .

Figure 3-23. Events for spawning and destroying the UFOs

Next, you have to determine how UFOs will interact with each of the onscreen objects. Here is one possible set of interactions:

• When a UFO collides with an asteroid, the UFO is destroyed.

• When a UFO collides with a laser, both the laser and the UFO are destroyed.

• When a UFO collides with the spaceship, both the spaceship and the UFO are destroyed.

• When a UFO collides with the shields, the UFO is destroyed, and the shield opacity decreases by 25.

In addition, whenever a UFO is destroyed, an explosion effect will be spawned at the location of the UFO. These events are similar to those you have created before. Try to create these events on your own (rereading the process from earlier to refresh your memory, if necessary). When you are finished, the events should appear as in Figure 3-24.

Figure 3-24. Events related to UFO collisions

Finally, you need to consider what happens to the UFOs at the end of the game, planning for all possible circumstances. In particular, with the addition of the UFO objects, it is actually possible to trigger both the win and lose conditions at the same time! For example, the player may have lost their shields and then destroyed all the asteroids while a UFO is still on the screen, and then the spaceship might crash into the UFO. To avoid this possibility, the SpawnPoint and UFO objects should be destroyed if the player wins the game. (This isn’t as important if the player loses the game, but you could also set up similar events for that situation as well, if you choose.) In addition, you will have the UFOs spawn warp effects so that they don’t just suddenly vanish.

In the event sheet, locate the event that contains the win condition: when the asteroid count is equal to 0. Add a series of actions to this event: the SpawnPoint should be destroyed, UFOs should spawn Warp objects, and UFOs should be destroyed. When you are finished, this modified event should appear as in Figure 3-25. If there are no UFOs on the screen at the end of the game, then this action will simply have no effect. Similarly, after destroying the SpawnPoint object, the previously created event that spawns UFOs every 5 seconds will no longer have any effect.

Figure 3-25. Modified “you win” event

Congratulations on completing the side quests! Your game now includes the core mechanics as well as some extra features that will make it even more enjoyable for players.

Summary

In this chapter, you learned about some new behaviors (Wrap, Custom Movement, Bullet, and Pin). You created image-based animations from spritesheets. It is important to provide visual feedback to the player, and you saw many ways this can be done (in this game, with the Explosion, Fire, and Warp effects). You also used the random function in events to add a bit of unpredictability to your game.

In the next chapter, you will continue to build upon these skills and create a top-down collection game called Cleanup Challenge.