Introduction

In Rectangle Destroyer, the player controls a paddle that moves from side to side, which is used to bounce balls into rectangular “bricks” and thereby destroy them. The goal is to destroy all the rectangles on the screen. Occasionally, a destroyed brick will release an item that may either aid or hinder the player by changing parts of the gameplay, such as paddle size, ball speed, and so forth. If the ball falls past the paddle and below the bottom edge of the screen, then the ball is lost. The player has multiple balls in reserve; once these run out, the game is over.

The controls and user interface are simple and minimalistic. The paddle is controlled by moving the mouse left and right, and items are collected by “catching” them, which happens when they collide with the paddle. The user interface displays the player’s score and the number of balls left in reserve. Some of the powerup items will also cause a change in appearance of the ball or the paddle.

The main material that will be required from earlier chapters includes the Sprite, TiledBackground, and Mouse objects; the Solid, Bullet, Fade, and Pin behaviors; the random function; and global variables. You will use animations to store the different images corresponding to the different types of items and for the different appearances of the ball and paddle. You will learn about the choose function, which makes it easy to randomly select a word (or a number) from the given inputs.

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. Set the layout’s Active layer to Background. Add a TiledBackground object named Background using the image background.png, and resize it so it covers the entire layout area. Lock the layer when you are finished and then set the layout’s Active layer to Main.

Paddle , Walls, Bricks, and Balls

In this section, you will create most of the game objects and the events that describe how they interact.

Add a new sprite named Paddle with the image paddle.png, and position it near the bottom of the layout. Add the behaviors Solid and Bound to the layout. In most breakout games, hitting the ball with the left side of the paddle causes the ball to bounce to the left, and hitting the ball with the right side causes it to bounce to the right; therefore, you need to adjust the collision polygon of the paddle object so that it resembles a dome shape, as shown in Figure 8-2. Next, add a Mouse object to the project (which will be used for controlling the paddle). In the event sheet, create a new event with the condition System: Every tick, add the action Paddle: Set X, and enter Mouse.X. The event will appear as in Figure 8-3.

Figure 8-2. The collision polygon for paddle (dome)

Figure 8-3. Basic events for paddle, ball, and bricks

Next, create a TiledBackground object named Wall with the image white-pixels.png. Add the Solid behavior. Create two more instances of the Wall object, and position the three wall instances so that they border the left, right, and top edges of the layout, as shown earlier in Figure 8-1. In particular, you will want to make the top Wall instance thick enough so that there is room to display text on it later .

Add a sprite called Brick using the image brick-red.png (located in the Bricks folder of the assets archive), and in the Animations window, rename the animation to red. Create a new animation named blue, using the image brick-blue.png. Repeat this process as many times you like to add as many different brick colors as desired (eight different-colored brick images are provided with the downloads for this chapter; additional brick colors can easily be created with graphics editing software). When you are finished, close the image editor windows. Next, add the Solid and Fade behaviors. In the Properties panel, change the fade property Active at start to No, and change Fade out time to 0.25. You will no doubt want to create many new instances of the Brick object (since a game with only one brick to destroy would be far too short), but before you do, you may want to activate the grid options in Construct, as you did when creating the Cleanup Challenge game in Chapter 4. To do so, in the View tab, select the Snap to grid and Show grid check boxes; you should also change the grid width and height to 8, as this will create a finer grid and allow for more precise adjustment. Finally, create some new instances of the Brick object, and align them in rows near the top of the layout. You can change the colors of the individual bricks by typing in the animation names (that you set up previously) in the Properties panel, next to Initial animation.

Add a sprite called Ball using the image ball-normal.png. Add the behaviors Bullet (changing the properties Speed to 300, Gravity to 8, and Bounce off solids to Yes), Solid, and Destroy outside layout. Position the ball right above the paddle, and set the property Angle to 280 so that the ball initially moves upward and slightly to the right, toward the bricks. Create a new event with the condition Ball - On collision with, and select Brick. Then add the actions Brick - Fade: Start fade and Brick - Solid: Set enabled, and select Disabled. This event is shown in Figure 8-3.

Finally, you will add some basic scorekeeping functionality to the project. In the layout, create a new Text object named TextScore with the Text property set to Score: 0 and with a large, easily readable font. Set its Layer to UI and position the Text object above the Wall object in the top-left area of the layout. In the event sheet, create a new global variable named Score with an initial value of 0. In the event sheet, create an event with the condition Brick - On destroyed; then add the action System - Variable: Add to, adding 100 to Score. Locate the event with the condition System - Every tick, and add the action TextScore - Set text, setting it to "Score: " & Score. These events are also shown in Figure 8-3. When you are finished, be sure to save and test your project, making sure that the paddle moves with the mouse; the ball bounces off the paddle, walls, and bricks; the bricks fade out when hit; and the score increases each time. Now is a good time to save and test your project .

Game Start and End

Currently, when the game loads, the ball immediately launches into the air and gameplay begins. The next addition to this game will be to add functionality to avoid this sudden start and give the player a chance to aim the ball before it is released. First, add a sprite named MessageStart with the image message-start.png. Set the layer to UI and center it on the layout. Add the behavior Pin to the Ball object. In the event sheet, add a new event with the condition System - On start of layout, add the action Ball - Pin to object, and select Paddle with mode Position Only. Also add another action called Ball - Bullet: Set enabled, and select Disabled. Add another event with two conditions: Mouse - On any click and MessageStart - Is Visible. Then add these three actions: Ball - Unpin, Ball - Bullet: Set enabled (select Enabled), and MessageStart - Set Visible (select Invisible). The events will appear as in Figure 8-4. Save and test your project. When the game starts, the ball should move with the paddle, and when a mouse button is clicked, the ball should be released and launch up toward the bricks.

Figure 8-4. Events for launching the ball at the beginning of the game

Now that you’ve improved the beginning of the game, it’s time to pay similar attention to when a ball is lost (when it falls off-screen) and the ending of the game. Add two new sprites: one named MessageEnd with the image message-end.png and the other named MessageWin with the image message-win.png. Position both of these objects in the center of the layout, set their layers to UI, and set Initial Visibility to Invisible. Also, create a new Text object named TextReserve with Text set to Balls left: 2, the same font settings as the TextScore object, and positioned in the top-right area of the layout. In the event sheet, create a new global variable named Reserve with an initial value of 2. Next, locate the event with the condition Every tick, and to this event add the action TextReserve - Text: Set text to "Balls left: " & Reserve.

Next, you need to create the events that handle what happens when there are no balls on the screen. You will use the condition Ball.Count = 0 rather than Ball - On destroyed in case there are multiple balls on the screen (as may happen with a multiball powerup, discussed later); the following actions should take place only when there are no balls left on the screen. When this occurs, there are two possibilities to handle, each of which has different corresponding actions. Either there are balls left in reserve, in which case a new ball needs to be spawned, positioned correctly, and so on, or there are no balls left in reserve, in which case the “game over” message should become visible. There are at least three ways to set up the events for these conditions; we’ll discuss each of these in turn.

The first possible arrangement is to have two separate events: the first with conditions Ball.Count = 0 and Reserve > 0 and the second with conditions Ball.Count = 0 and Reserve = 0. This approach feels slightly redundant because of the repeated condition Ball.Count = 0. To eliminate the repetition, you can use a feature in Construct called subevents. A subevent is an event that appears indented underneath another event (which is called its parent event); the subevent conditions are checked only if their parent event’s conditions are true. Therefore, another (and somewhat better) possible arrangement is to have an event with the condition Ball.Count = 0, and then two subevents, one with the condition Reserve > 0 and the other with the condition Reserve = 0. However, for this particular game, this approach will have another issue, which is that the actions associated to Reserve > 0 include decreasing the Reserve count by 1, so if the value of Reserve was initially 1, then both of the subevents would activate, and the game would end (which should not be the case). To avoid this scenario, you will use another feature in Construct, and that is a System condition called Else. An event with the Else condition will be true and run its actions only if the condition of the previous event was false. (For those familiar with traditional programming languages, this is similar to if-else statements.) Thus, the final arrangement of events that will be considered (and the one that you will implement) is to use subevents and replace the Reserve = 0 condition with an Else condition.

At this point, you will now create the conditions for the events in the style described earlier and add the actions afterward. In the event sheet, create a new event with the condition System - Compare two values, setting it to check whether Ball.Count is equal to 0. To create a subevent, right-click the area in the event to the left of the condition, and from the pop-up menu that appears, select Add and then Add sub-event (or use the keyboard shortcut key S). The add condition window will appear; add the condition System - Compare variable, and set it to check whether Reserve is greater than 0. Once again, right-click the Ball.Count = 0 event to create another subevent, this time with the condition System - Else. For the subevent with the condition Reserve > 0, add the following actions:

• Add System - Variables: Subtract from, subtracting 1 from Reserve.

• Add System - Create Object, creating a Ball object on the Main layer, with X coordinate Paddle.X and Y coordinate Paddle.Y - 24 (the coordinates position the ball directly above the center of the paddle).

• Add Ball - Angle: Set angle, and set it to 280 degrees.

• Add MessageStart - Set visible, and set it to Visible.

• Add Ball - Pin to object, and select Paddle with mode Position Only.

• Add Ball - Bullet: Set enabled, and select Disabled.

In particular, notice that these last two actions are the same that appear in the layout start event, which effectively attaches the ball to the paddle and freezes it in place until the player clicks a mouse button. For the event with the condition System - Else, add the action MessageEnd - Set Visible, and select Visible. In contrast, to congratulate the user upon destroying all bricks, create a new event with the condition System - Compare two values, and set it to check whether Brick.Count is equal to 0; add the action MessageWin - Set Visible, and select Visible. In addition, you need to make sure that the win and lose messages cannot appear on the screen at the same time; to the Else condition, add the inverted condition MessageWin - Is visible, and to the Brick.Count equals 0 condition, add the inverted condition MessageLose - Is visible. These events and subevents should appear as shown in Figure 8-5; notice in particular that the subevents appear indented underneath their parent event. Also add an action to the Every tick event that sets the text of TextReserve to Balls left: " & Reserve. Save and test your work; let the balls fall past the paddle and check whether the reserve ball functionality works as expected.

Figure 8-5. Event and subevents for when balls are lost and winning the game

Items

In this section, we will discuss a variety of items that are randomly released when bricks are destroyed. These items move downward toward the bottom of the screen, and if caught by the player, they can affect gameplay in a variety of ways. Some items will increase the size of the paddle or the speed of the ball. Other items will give game objects abilities. For example, the ball may be able to cause explosions that destroy nearby bricks, or the paddle may be able to fire laser beams (for a limited time) that destroy individual bricks. Other standard items spawn additional balls on the screen or add extra reserve balls. Having a great variety of gameplay-changing items is important in a game such as this, because without them, the gameplay would quickly become monotonous and dull.

In what follows, you will implement the items listed earlier; additional item ideas will be discussed in the “Side Quests” section later in this chapter. To begin, create a new sprite called Item with the image item-blank.png (from the Items folder in the assets archive). Change the size to 48,48, position the sprite outside the layout, add the behaviors Destroy outside layout and Bullet, and change the Bullet properties Speed to 200 and Set angle to No. For each type of item you create, a new animation will be added to the Item sprite. When an item is generated, one of the animations will be randomly selected, and when the paddle collides with an Item sprite, the name of the animation will be used to determine the effect the item will have. In the event sheet, locate the event with the condition Brick - On destroyed, and create a subevent for this event with the condition System - Compare two values, checking whether random(0, 100) is less than 50. Add the actions Brick - Spawn another object, spawning an Item object on the Main layer, and Item - Bullet: Set angle of motion, setting it to 90 degrees (this is in the downward direction). Later, after you have added item types, you will add one more action to this event that will randomly set the animation. Create a new event with condition Paddle - On collision with, and select Item; add the action Item - Destroy. For each new item type you add to the game, you will add a subevent to this event, which determines how gameplay is affected.

Items Affecting the Ball

First, you will implement a variety of items that affect the ball, in order of increasing complexity. The corresponding events will be shown in Figure 8-6 at the end of this section.

Figure 8-6. Events for items that affect the ball

The simplest ball-related item adds 1 to the reserve ball count variable. Add a new animation to the Item object named BallExtra, using the image ball-extra.png. In the subevent that spawns items (under Brick - On destroyed), add the action Item - Set animation, and enter "BallExtra". Then, in the event with the condition where the Paddle collides with an Item, add a subevent with the condition Item - Animation: Is playing, and for the animation name, enter "BallExtra" (remembering that the spelling and capitalization has to match the animation name exactly). Then add the action System - Variables: Add to and add 1 to Reserve. Save and run your game; when a brick is destroyed, there will be a 50 percent chance that an item is spawned, and when you collect it, you should see in the user interface that the reserve ball count has increased by 1. You have now created your first item!

The next simplest items to implement change the speed of the ball. Add two new animations to the Item object: one named BallSpeedUp, using the image ball-speed-up.png, and the other named BallSpeedDown, using the image ball-speed-down.png. Now there are a total of three animations to choose from when an item is spawned. To randomly choose one of the animations, you will use the choose function, which can take any number of inputs and which randomly selects one of them. Double-click the action that sets the Item animation to edit the action, and replace the text with choose("BallExtra", "BallSpeedUp", "BallSpeedDown"). Now, each time an item is spawned, one of these three animations will be randomly selected and set for the item object.¹ In the Paddle collision with Item event, add a subevent with the condition Item - Animation: Is playing, and for the animation name, enter "BallSpeedUp". Next add the action Ball - Bullet: Set speed, and enter Ball.Bullet.Speed * 1.25. This will cause the ball to speed up by 25 percent. Add another subevent that checks whether the Item animation BallSpeedDown is playing, and as before, add an action that changes the ball’s speed, this time entering Ball.Bullet.Speed * 0.80, which reduces the speed of the ball by 20 percent (which cancels out a 25 percent increase from a BallSpeedUp item). As usual, save and test your game to verify that these new powerups work as intended.

Next, you will add the MultiBall item, which creates an additional ball on screen. Add a new animation to the Item object called MultiBall, with the image ball-spawn.png. Adjust the action that sets the Item animation so that the MultiBall animation may be selected. In the Paddle collision with Item event, add a subevent that checks whether the Item animation MultiBall is playing, and add the action Ball - Spawn another object, and select Ball. This will have the effect that every ball that is currently on the screen will spawn another ball, effectively doubling the number of balls currently in play. This can rapidly lead to many balls on screen, and too many balls may cause the game to lag. For this reason, or for other gameplay considerations, you may want to add a second condition to this subevent called System - Pick random instance, and select the Ball object. This will cause the action to apply to only one of the balls onscreen, and thus the total number of balls would increase only by 1 when this item is collected .

Finally, you will implement the ability for the ball to create explosions that destroy multiple bricks. When the ball has this ability, it will be indicated by changing the color of the ball to orange; similarly, other ball abilities could be indicated by using additional colors. Add a new animation to the Ball object named Orange with the image ball-orange.png. Add a new sprite named Explosion with the image explosion.png. Add the behavior Fade, change the property Fade out time to 0.25, and move the Explosion object into the margin area of the layout. Add a new animation to the Item object called FireBall, with the image ball-fire.png. Edit the action that sets the Item animation so that the FireBall animation may be selected. In the Paddle collision with Item event, add a subevent that checks whether the Item animation FireBall is playing, and add the action Ball - Set animation to "Orange". Finally, you will need two new events to activate the effect. First, create an event with two conditions; specifically, add Ball - On collision with, selecting Brick, and then add Ball - Animation: Is playing, entering "Orange". To this event, add the action Brick - Spawn another object, and select Explosion on layer Main. Second, create an event with condition Explosion - Is overlapping another object, select Brick, and add the action Brick - Destroy.

When you are finished adding all the content described in this section, the corresponding events should appear as shown in Figure 8-6.

Items Affecting the Paddle

Here, you will implement a variety of items that affect the paddle. As in the previous section, the corresponding events will be shown at the end, in Figure 8-7.

Figure 8-7. Events for items that affect the paddle

The simplest paddle-related items change the size of the paddle and are quite similar to the items that change the speed of the ball. Add two new animations to the Item object: one named PaddleExpand, using the image paddle-expand.png, the other named PaddleShrink, with the image named paddle-shrink.png. Adjust the action that sets the Item animation so that these new animations may be selected. In the Paddle collision with Item event, you will add two new subevents. The first subevent should check whether the Item animation PaddleExpand is playing and that the associated action is Paddle - Set width set to Paddle.Width * 1.25. The second subevent should check whether the Item animation PaddleShrink is playing and that the associated action is Paddle - Set width set to Paddle.Width * 0.80.

Finally, you will add the ability for the paddle to shoot lasers that can destroy bricks; however, since this ability will make the game easy, the ability will be active for only 5 seconds. First, add a new animation to the Item object named PaddleLaser with the image paddle-laser.png. Then, add a new Sprite object to the game named Laser with the image laser-red.png, change its size to 90,30, position it off-screen, and add the behaviors Bullet and Destroy outside layout. Next, add a new animation to the Paddle object named Red using the image paddle-red.png, and apply the same collision polygon settings as you did for the original paddle image. Now you are ready to set up the events that implement this ability. Adjust the action that sets the Item animation so that this new animation may be selected. In Paddle collision with Item event, add a subevent that checks whether the Item animation PaddleLaser is playing, and add the following three actions :

• Add the action Paddle - Set animation to "Red".

• Add the action System - Wait, and enter 5 seconds.

• Add the action Paddle - Set animation to "Default".

The System - Wait action is particularly useful here because it sets up a delay until the next action in the event is performed (but there is no effect on other events). Create a new event with two conditions: first add Mouse - On any click and then add Paddle - Animation: Is playing, entering "Red". Add the action Paddle - Spawn another object, and select Laser on layer Main. Next, add the action Laser - Z Order: Move to bottom (so it appears underneath the paddle and behind the walls). Next, add the action Laser - Bullet: Set angle of motion, setting it to -90 degrees (this is in the upward direction). Finally, create an event with the condition Laser - On collision with another object, select Brick, and add these actions: Brick - Start fade; Brick - Solid: Set enabled (select Disabled); and Laser - Destroy.

When you are finished adding all the content described in this section, the corresponding events should appear as shown in Figure 8-7. As usual, save and test your project to verify that the newly added item types work as expected.

At this point, you have implemented all the basic mechanics for Rectangle Destroyer. Congratulations!

Side Quests

As usual, many of the standard features should be added to the game at this point: menus, audio, pause functionality, and so on. You could change the layout of the bricks to an interesting geometric pattern or even make the level resemble pixel art! You could also implement multiple levels; once all the bricks in a level are destroyed, the next level could be loaded. You could add a timer to the game, displayed in the user interface, and award the players a bonus at the end of the level depending on how quickly they destroy all the bricks. You could add a difficulty ramp, adding a small value to the ball speed every tick, so that the balls speed up slightly over time. You could add solid nonbrick obstacles to the level; you might even consider adding movement to these objects, with either the Sine or Rotate behavior. You might want to reset the ball to its original animation after a certain amount of time to limit the power of the fireball item. You will also probably want to adjust the drop rate of the items (as 50 percent is rather high).

Most interestingly from a gameplay perspective, you could create even more types of items. Here, we list some ideas for you to consider, of varying difficulty to implement. Most of these will require you to design and create your own item graphic; you can use the image file item-blank.png as a starting point .

• Gain additional points.

• Destroy a random brick. The simplest way to do this is by using the System condition Pick random instance.

• Change the size of the ball, either smaller or larger. This is probably easiest to accomplish by adding new small and large animation images to the Ball object.

• Make the ball “heavy” for 10 seconds. To do so, you could set the ball gravity to 200, use the System - Wait action, and then set the ball gravity back to 8.

• “Freeze” the paddle for 5 seconds. To implement this, add a new animation image (named Freeze) to the paddle, and then to the paddle movement event add the condition Paddle - Animation: Is playing, enter "Freeze", and invert the condition.

• Give the paddle free movement for 10 seconds. To implement this, add another new animation image to the Paddle (named Free). Then add an event that checks whether this animation is playing and, if so, sets the position of the paddle to Mouse.X and Mouse.Y. After the System - Wait action, be sure to include an action that sets the Y position of the paddle back to its original value.

• Add a “safety net” along the bottom edge of the screen in the form of a solid object that is destroyed after it is hit; such an object will save a ball from falling off-screen once .

• Lose all reserve balls and destroy the paddle (thus causing the player to lose the game).

Summary

In this chapter, you created the game Rectangle Destroyer. You used animations to create multiple versions of objects (the Item object) and to indicate the current state or abilities of objects (the Ball and Paddle objects). Most important from a game design perspective, you spent a significant amount of time implementing items that alter the gameplay, which keeps the player experience changing and interesting.

In the next chapter, instead of destroying bricks with balls, you will destroy creatures with spells, as you create the top-down game Spell Shooter.