Level Setup

In this section, you will set up the level and create a path for the enemies to follow. First, create a TiledBackground named BackgroundUI, with the image white-pixels.png. Change its size to 192,608, and position it on the left side of the layout. Then, in the Background layer, create a TiledBackground named BackgroundDirt, with the image dirt.png; change its size to 608,608, and position it on the right side of the screen so that it fills the remaining area in the layout. Finally, create a TiledBackground named Road with the image road.png; this object will be used to create the path along which the enemies will move. Create multiple instances of the Road object and position them to form a road from the top edge of the dirt area to another edge; make sure the road is 64 pixels (2 squares) wide at all times. Figure 11-2 shows one possible road configuration.

Figure 11-2. Setup for the background graphics and the road

Next, you’ll need to configure the spawn point and waypoints that the enemy objects will follow. Set the layout’s active layer to Main. Create a new sprite named SpawnPoint; draw any image you like in the image editor (as it won’t be visible while the game is being played), resize it to 32,32, and place it in the margin of the layout by the beginning of the road. Create a new sprite named Waypoint (again, with a drawn image), and create an instance variable with Name set to ID, Type set to Number, Initial value set to 0, and Description set to Unique identification number. Create additional instances of this object, place one in the center of each corner of the road, and place one beyond the end of the road in the margins of the layout. Change the values of the instance variables of the Waypoint objects so that they start at 0 and increase by 1 at each corner. When finished, change the size of the Waypoint objects to 8,8. Figure 11-3 illustrates the placement and numbering of the waypoints for the road configuration in Figure 11-2.

Figure 11-3. Waypoint positions and numbering

Enemy Movement

In this section, you will add enemies that will follow the path indicated by the waypoints. In contrast to previous chapters, when the enemy arrives at a waypoint, its current Target value will be increased by 1 (rather than by a random value). In addition, a new enemy will spawn every second. Also, as each enemy is created, its angle should be adjusted to move downward.

First, create a new sprite named Enemy, with the image truck.png, and change the name of the animation to Truck. Close the image editor window and change the property Angle to 90. Place it above the SpawnPoint object in the margin of the layout. Add the Bullet behavior, and change Speed to 200. Add an instance variable named Target, set Type to Number, set Initial value to 0, and set Description to ID of the Waypoint to move towards.

Movement along the waypoints is handled by two events. First, create an event, add the condition System - For Each, and select Enemy. Then add the condition Waypoint - Compare instance variable, and check whether ID is equal to Enemy.Target. Add the action Enemy - Rotate toward position, set Degrees to 15, set X to Waypoint.X, and set Y to Waypoint.Y. Second, create another event, and first add the condition Enemy - On collision with another object, and select Waypoint. Then add the condition Waypoint - Compare instance variable, and again check whether ID is equal to Enemy.Target. Add the action Enemy - Variables: Add to, select Target, and enter 1. Finally, to periodically spawn enemies, create another event with the condition System - Every X seconds, and for Interval, enter 5. Add the action SpawnPoint - Spawn another object, and select Enemy. In addition, add the action Enemy - Set angle, and set Angle to 90 degrees. When you are finished, the enemy-related events should appear as in Figure 11-4. Save and test your project, making sure that the enemies spawn and move along the path until the end and then move outside the layout. Once you have verified that everything works as expected, click the Waypoint object in the object panel (so that all instances are selected) and set Initial visibility to Invisible. Note that the enemies aren’t automatically destroyed when they move off-screen; this will be addressed later in the chapter when you add the player’s base.

Figure 11-4. Events for enemy movement and spawning

Cannons and Bullets

You are now ready to implement cannons, most of whose functionality will be handled by the Turret behavior. Add a new Sprite object named Cannon with the image turret-light.png. Rename the animation to Light. Adjust the collision polygon to form a box around the base of the Cannon object, and adjust the origin image point so that it is in the middle of the base, as shown in Figure 11-5.

Figure 11-5. Collision polygon for the Cannon sprite

When you are finished, close the image editor windows. Position the cannon on the dirt, near a corner of the road. Add the behavior Turret. The Turret behavior will give the cannon the ability to aim at enemies and shoot bullets, which need to be set up now as well. Create another new sprite named Missile with the image message.png, add the behavior Bullet and the behavior Destroy outside layout, and position the sprite in the margin area. Select the Cannon object again. The Turret behavior properties that you need to adjust are explained and their new values are given in the following list:

• Range: This is how close enemies must be to be detected. Set this to 100.

• Rotate Speed: This is how quickly the cannon can rotate (in degrees per second) toward its target. Set this to 360.

• Predictive aim: When set to No, the turret will rotate toward the target’s current position; when set to Yes, the turret will rotate to a position ahead of the current target, taking into account the speed of the turret projectile and the speed and direction of the target. (However, the turret may still miss its intended target if the target changes direction suddenly.) Set this to Yes.

• Projectile speed: This value is used as described earlier when Predictive aim is set to Yes. In general, this should be set to the speed of the projectile objects that the turret will spawn. Set this to 400.

You will now set up instance variables to add health to enemies and a power level (which indicates the amount of damage inflicted on contact) to the missiles, which will be set by the cannons. Select the Enemy object, add an instance variable named HP, set Type to Number, set Initial value to 2, and set Description to Enemy health points. Then select the Cannon object, add an instance variable named Power, set Type to Number, set Initial value to 1, and set Description to Used to set Missile Power. Then, select the Missile object, add an instance variable named Power, set Type to Number, set Initial value to 1, and set Description to Value to subtract from enemy HP.

The objects that the cannon will target and the projectiles that the cannon will fire are specified with events. Create a new event with the condition System - On start of layout, add the action Cannon - Turret: Add object to target, and select Enemy. Add another event with the condition Cannon - Turret: On shoot, add the action Cannon - Spawn another object (select Missile), add the action Missile - Instance variables: Set value, and set Power to Cannon.Power. These events, as well as the following events described in this section, should appear as shown in Figure 11-6.

Figure 11-6. Events for cannon setup and enemy health

To make it easier for the player to see when an enemy has been damaged, you will add an animated explosion effect. Add a new sprite named Explosion; in the Animation frames window, import animation frames from the sprite strip named explosion.png, which consists of six rows and six columns. Set the animation property Speed to 60 and Loop to No. Close the image editor and position the explosion sprite in the layout margins.

To make the missiles damage the enemies as described earlier, create a new event with the condition Missile - On collision with another object, and select Enemy. Then add the following actions:

• Add Enemy - Variables: Subtract from, select HP, and for Value enter Missile.Power.

• Add Missile - Spawn another object, and select Explosion.

• Add Explosion - Set size, and set both Width and Height to 32.

• Add Missile - Destroy.

To destroy enemies whose health has reached 0, create a new event with the condition Enemy - Compare instance variable, and check whether HP is less than or equal to 0. Then add the following actions:

• Add Enemy - Spawn another object, and select Explosion.

• Add Explosion - Set size, and set both Width and Height to 64.

• Add Enemy - Destroy.

Finally, two more events will complete this section. First, explosions whose animations are complete should be removed from the layout, so create an event with the condition Explosion - On any animation finished and the action Explosion - Destroy. Second, missiles should not appear in the area of the layout corresponding to the user interface, so create an event with the condition Missile - On collision with another object, select BackgroundUI, and add the action Missile - Destroy. Figure 11-6 shows the events described in this section.

Earning Cash

Next, you will begin to implement the cash mechanic that will be used for purchasing additional cannons later, which will become important as the enemy spawn rate increases (which will be implemented later). To begin, in the event sheet, create a new global variable named Cash with initial value 0, and for Description enter Used to buy cannons. To help distinguish the user interface area from the gameplay area, you will add a decorative logo. Create a new sprite named Logo with the image tower-defenders-title.png, set its size to 192,32, and position it on top of BackgroundUI, in the top-left area of the layout, as shown in Figure 11-1. Then create a new Text object named TextCash, and set its position to 0, 96. Change its default text to Cash: $0; set the font to Arial, bold, size 22; and set the font color to green. Also set both the Horizontal alignment and Vertical alignment properties to Center.

Select the Enemy object, add an instance variable named Cash, set Type to Number, set Initial value to 4, and set Description to Cash added when destroyed. In the event sheet, locate the Enemy.HP <= 0 event, and add the action System - Variables: Add to, adding the value Enemy.Cash to the Cash variable. Create a new event with the condition System - Every tick and action TextCash - Set text to "Cash: $" & Cash. The events in this section should appear as shown in Figure 11-7.

Figure 11-7. Events for earning and displaying cash

Cannon Purchase and Placement

In this section, you will add a shoplike mechanic to enable the player to purchase additional cannons. You will add a button-style object to the user interface, which the player clicks to make a purchase. You will also implement drag-and-drop functionality that allows the player to select a position for the cannon after it is purchased. At the same time, you will also create events that prevent the player from placing a newly purchased cannon in a prohibited area (overlapping the road, another cannon, or the user interface itself).

The purchasing buttons will created from a combination of a Sprite object and a Text object to avoid having to create new sprite images with prerendered text for each individual button. Add a new sprite named PurchaseButton with the image button.png. Position it in the center of the BackgroundUI, and set its size to 160,128. Add two instance variables, one named Type (with Type set to Text, Initial value set to Light, and Description set to Cannon animation name) and the other named Price (with Type set to Number, Initial value set to 15, and Description set to Cash needed to purchase cannon). Next, add a new Text object named TextPrice, and position it on the purchase button. Change its default text to Light Cannon $15; set the font to Arial, bold, size 16; and set its font color to green. Also set both the Horizontal alignment and Vertical alignment properties to Center. You may want to resize the Text object so that each word appears on a separate line. The user interface should appear in the layout as shown in Figure 11-8.

Figure 11-8. Adding a button to the user interface

The next mechanic to implement is cannon spawning and placement. The cannon being dragged will be set to the position of the mouse (similar to the paddle movement in the Rectangle Destroyer game), but because there are typically multiple cannons onscreen, the correct one needs to be uniquely identified. For this purpose, select the Cannon object, and add a new instance variable named Dragging, set Type to Number, set Initial value to 0, and set Description to 0 = Fixed in place, 1 = Dragging.

You will next set up a translucent circle that appears when a cannon is purchased, which serves two purposes: the size of the circle indicates the range of the cannon, and the color of the circle indicates whether the cannon may be placed at the current mouse position (green for “yes” and red for “no”). Create a new sprite named Circle with the image circle-green.png, and change the name of the animation to Green. Add a new animation named Red, using the image circle-red.png. Close the image editor, and set the properties Layer to UI, Opacity to 50, and Initial visibility to Invisible. Since the circle indicator will be visible only while the player is in the process of placing the cannon, the circle’s visibility can be used in one of the conditions that check whether the player is currently able to purchase a cannon (the player cannot purchase another cannon while in the process of placing one).

With these steps completed, you are now ready to create the event that enables the player to purchase a cannon. To begin, add the Mouse object to the project. In the event sheet, create a new event with the following conditions:

• Add Mouse - On object clicked, and select PurchaseButton.

• Add Global and Local Variables - Compare variable, and check whether Cash is greater than or equal to PurchaseButton.Price.

• Add Circle - Is Visible; this condition needs to be inverted.

Next, add the following actions to the event:

• Add System - Variables: Subtract from, select Cash, and for Value enter PurchaseButton.Price.

• Add PurchaseButton - Spawn another object, select Cannon, and set Layer to "UI".

• Add Cannon - Set animation, and enter PurchaseButton.Type.

• Add Cannon - Variables: Set value, select Dragging, and for Value enter 1.

• Add Cannon - Turret: Set enabled, and select Disabled.

• Add Circle - Set size, and set both Width and Height to Cannon.Turret.Range * 2.

• Add Circle - Set visible, set to Visible.

This event appears in Figure 11-9.

Figure 11-9. Event for purchasing cannons

The next event to create implements the drag mechanic, which sets the purchased cannon (and the indicator circle) to the position of the mouse. While this is happening, the color of the circle needs to change depending on whether the cannon can be placed in the current position. The cannon may not be placed if it overlaps the road, the user interface, or another cannon. The first two of these conditions are straightforward to check, but the third is not, because of the way conditions “filter” the set of instances under consideration. It may seem like you should be able to simply check this with a pair of conditions: Cannon - Compare instance variable (check whether Dragging equals 1) and Cannon - Is overlapping another object (select Cannon). However, after the first condition is evaluated, only those cannons whose Dragging variable equals 1 will be considered when checking the second condition, which is not what you need to happen. To avoid these complexities, a new sprite will be introduced to indicate the areas currently occupied by cannons.

Create a new sprite named Taken, fill in the sprite with any color, close the image editor, and set Initial visibility to Invisible. Resize and position the sprite so that it exactly covers the cannon currently placed on the layout. In the event sheet, create a new event with the condition Cannon - Compare instance variable (and check whether Dragging equals 1). Add the action Cannon - Set position, setting X and Y to Mouse.X and Mouse.Y, respectively, and add the action Circle - Set position to another object, selecting Cannon. To this event, add a subevent with the condition Cannon - Is overlapping another object, select BackgroundUI, add the action Circle - Set animation, and enter "Red". Next, you could create additional events with similar conditions to check the other overlap cases, but since each one of these events would contain the same action, it is more efficient to use an “or” block, in which case only one of the listed conditions needs to be true to activate the actions. To make this event an “or” block, right-click the area in the event to the left of the condition, and from the pop-up menu that appears, select Make 'Or' block. Add the condition Cannon - Is overlapping another object, and select Road; then add the condition Cannon - Is overlapping another object, and select Taken. You will notice that the word or appears between the conditions you have added. Finally, add a second subevent to this event, with the condition System - Else. Then add the action Circle - Set animation, and enter "Green". This event should appear as in Figure 11-10.

Figure 11-10. Event for dragging cannons and updating the circular placement indicator

Finally, you need to implement the drop mechanic. Thanks to your previous work, this step is relatively straightforward since the color of the circle indicates whether the cannon may be placed. There are a few actions that you need to remember: enable the Turret behavior, and then set the Dragging variable to 0, make the Circle invisible, and spawn a Taken instance to mark the selected location as unavailable in future cannon placements. Create a new event with the following conditions:

• Add Mouse - On click (keep the default properties).

• Add Cannon - Variables: Compare value, set to check whether Dragging is equal to 1.

• Add Circle - Animation: Is playing, set to check whether Green is playing.

Then add the following actions:

• Add Cannon - Move to layer, and enter "Main".

• Add Cannon - Variables: Set value, select Dragging, and for Value enter 0.

• Add Cannon - Turret: Set enabled, and select Enabled.

• Add Cannon - Spawn another object, and select Taken.

• Add Circle - Set visible, set to Invisible.

This event should appear as shown in Figure 11-11.

Figure 11-11. Event for placing cannons

To add a bit of polish, you can change the mouse cursor when it is hovering over a button to a different icon, which will help the player notice that the objects can be clicked. To add this feature, create a new event with the condition Mouse - Cursor is over object, and select the PurchaseButton. Add the action Mouse - Set cursor style, and select Hand. Create another event with the condition System - Else, add the action Mouse - Set cursor style, and select Normal. When you are finished, the cursor style events should appear as shown in Figure 11-12.

Figure 11-12. Events for setting mouse cursor style

At this point, if you haven’t done so recently, you should certainly save your game and test the purchasing mechanic and the drag-and-drop functionality. To speed up the testing project, you should change the initial value of the global variable Cash to a large number (so that you don’t have to wait to earn money to make purchases); just remember to set it back to the original value when you’re done testing!

Game Ending and Difficulty Ramp

In this section, you will add the Base object that the player will defend from incoming enemies. The base will be placed at the end of the road path and will have a limited number of health points, which will be displayed in the user interface. Every enemy that reaches the base will reduce the base’s health by 1, and when its health reaches 0, the game is over. To keep the game challenging, a difficulty ramp will be added to increase the enemy spawning rate, similar to the implementation from the Plane Dodger game.

To begin, in the layout, add a new Sprite object named Base with the image base.png, and position it at the end of the path made by the road. To the Base object, add an instance variable named HP, set Type to Number, set Initial value to 10, and set Description to Health points. Next, add a new Text object named TextBaseHP, and set its position to 0, 64. Change its default text to Base HP: 10; set the font to Arial, bold, size 22; set the font color to red, and set the Horizontal alignment to Center. Add another new sprite named GameOver with the image game-over.png. Position it in the center of the game area, set its Layer to UI, and set Initial Visibility to Invisible. Next, in the event sheet, locate the Every tick event and add the action TextBaseHP - Set text to "Base HP: " & Base.HP. Then, create a new event with the condition Enemy - On collision with another object, and select Base. Then add the following actions:

• Add Enemy - Spawn another object, and select Explosion.

• Add Explosion - Set size, set to a Width of 64 and Height of 64.

• Add Enemy - Destroy.

• Add Base - Spawn another object, and select Explosion.

• Add Explosion - Set size, set to a Width of 128 and Height of 128.

• Add Base - Variables: Subtract from, select HP, and for Value enter 1.

To destroy the base when it runs out of health, create a new event with the condition Base - Compare instance variable, and check whether HP is less than or equal to 0. Then add the following actions:

• Add GameOver - Set visible, set to Visible.

• Add SpawnPoint - Destroy.

• Add Base - Destroy.

When you are finished, the base-related and “game over” events should appear as shown in Figure 11-13. Save and test your project. Make sure that enemies damage the base and that when the base runs out of health, the game ends.

Figure 11-13. Events for “game over”

As the game stands, enemies spawn at a constant interval, and this game is trivially easy once a few turrets are in place. To increase the challenge, you will create and use a global variable named SpawnRate to adjust this rate. First, in the event sheet, create a new global variable named SpawnRate with an initial value of 5, and for Description, enter Seconds until next enemy spawns. Locate the Every 1 seconds event, double-click its condition, and change Interval to SpawnRate. Then, create a new event with the condition System - Every X seconds, and for Interval enter 5. Add the condition System - Variables: Compare variable, set to check whether SpawnRate is greater than or equal to 0.50. Then add the action System - Variables: Subtract from. For Variable select SpawnRate, and set Value to 0.25. The difficulty ramp events should appear as shown in Figure 11-14. Save and test your project. Make sure that enemies spawn at a gradual and increasing rate, and notice the game’s new difficulty.

Figure 11-14. Events for difficulty ramp

Congratulations! You have now finished implementing the core mechanics of the Tower Defenders game.

Side Quests

In this optional section, you will add an additional, stronger enemy type for more variation and game difficulty. To give the player the element of choice, you will add a new, more expensive yet powerful cannon type to assist the player in dire situations. You will also implement time speed control buttons in the user interface to enable players to pause, play, and fast-forward gameplay. You will also explore other suggested features.

Additional Enemy Types

Currently, the enemies are all similar in appearance and health. In this section, you will create an additional Tank enemy type. To accomplish this, you will add a new animation to the existing Enemy object. The new Tank enemy will have a one in five chance of appearing. As soon it does, its health instance variable will be adjusted to have an extra health point, its Cash variable will be set to 6 for a higher reward, and its speed will be a bit slower than the average enemy truck.

First, in the layout, to the Enemy sprite, create a new animation named Tank, using the image tank.png. Then in the event sheet, locate the event where enemies are spawned. To this event, add a subevent with the condition System - Compare two values, set to check whether random(0, 100) is less than or equal to 20. Then add the following actions:

• Add Enemy - Set animation, and enter "Tank".

• Add Enemy - Variables: Set value, select HP, and for Value enter 3.

• Add Enemy - Variables: Set value, select Cash, and for Value enter 6.

• Enemy - Bullet: Set speed, and enter 180.

When you are finished, these events should appear as in Figure 11-15. Save and test your project. Make sure that every once in a while, a slower and stronger enemy Tank appears, rewarding you with more cash upon its destruction.

Figure 11-15. Events for adding a Tank enemy type

Additional Cannon Types

In the game’s current state, the player has one choice in terms of cannon purchase. In this section, you will add a new Heavy cannon choice that will be more expensive, will be stronger, and will have more range than the current Light cannon. Create another instance of the PurchaseButton object, position it below the original, set its Type variable to Heavy, and set its Price variable to 20. Then create another instance of the TextPrice object, change its default text to Heavy Cannon $20, and position it on the new PurchaseButton. At this point, your user interface should resemble the one shown at this beginning of this chapter, in Figure 11-1. Next, double-click the Cannon sprite, and create a new animation named Heavy, using the image turret-heavy.png. When you are finished, close the image editor windows.

The purchase event must be adjusted to coordinate the values and properties of the cannon based on its type. In particular, you will increase the power of the heavy cannon type (which is reasonable, given its higher cost). Locate the event containing the condition where the PurchaseButton is clicked, and add a subevent with the condition Cannon - Animation: Is playing, set to check whether Heavy is playing. Then, add the action Cannon - Variables: Set value, select Power, and for Value enter 2. When you are finished, the subevent should appear as in Figure 11-16. Save and test your project; you should now be able purchase and place stronger “heavy cannons” for a cost of $20.

Figure 11-16. Subevent for configuring the heavy cannon type

Time Speed Control

In this section, you will implement time speed control buttons that enable players to pause or speed up the game. These buttons will all be created in similar fashion to the buttons created in Chapter 5. To begin, in the layout, create three new sprites, with the names ButtonPlay, ButtonPause, and ButtonFast, using the images button-play.png, button-pause.png, and button-fast.png, respectively. Change the size of each of these sprites to 60, 60 and arrange them near the bottom of the BackgroundUI object. Then, in the event sheet, create a new event with the condition Mouse - On object clicked, and select the ButtonPause. Add the action System - Set time scale, and enter 0. Create two more similar events, but for clicking the ButtonPlay and ButtonFast objects and setting the timescales to 1 and 1.5, respectively. When you are finished, the time speed control events should appear as in Figure 11-17. Save and test your project. You should be able to pause, play, and speed up the game. Notice during speedup, enemies spawn faster, which adds a layer of difficulty.

Figure 11-17. Events for time speed control

Summary

In this chapter, you created the game Tower Defenders. You were introduced to the Turret behavior to implement dynamic aiming and firing cannon objects. You then learned how to create a game economy, which fueled a shoplike mechanic for purchasing additional cannons. In doing this, you learned how to add buttons and how to implement drag-and-drop mechanics to place cannons on the playing field. You also learned how to use the “or” block feature to reduce event redundancy. The “Side Quests” section discussed potential game additions including implementing more enemy types, more turret types, and speed control buttons for the user interface.

In the next chapter, instead of destroying enemies that travel across the screen, you will focus on avoiding enemies as you run around a maze while collecting coins, as you create a game called Maze Runman.