Make a Tower Defense Game in AS3: Aim and Fire

Hey Flash developers! In this tutorial series we are going to go through the process of developing a very basic Tower Defense game. In this first part of the series, we’ll learn how to deploy turrets on the game field, give them the ability to aim at an object (in this case, the mouse) and make them fire particles.

---

Final Result Preview

Once we complete this tutorial, we are going to have this:

Click a circle to mount a turret on it. Notice how all the turrets rotate so that they point towards the mouse cursor. Click, and all mounted turrets will fire a particle towards the cursor.

---

Step 1: What is a Tower Defense Game?

Wikipedia’s definition sums it up nicely:

The goal of tower defense games is to try to stop enemies from crossing a map by building towers which shoot at them as they pass.

That is essentially what we will be developing in this tutorial series. Remember that we refer to the towers as turrets in this tutorial.

Cursed Treasure is a great example of a TD game, if you’re still unsure.

---

Step 2: Setup – IDE

Before we start developing the game, we need to setup the project on our IDE. I’ll be using FlashDevelop here. If you want to read about how to setup the project on Flash Develop, please have a read Steps 1 and 2 of this tutorial, or this full guide to FlashDevelop.

So now you should have a main class, Main.as, with the following code:

package
{
 import flash.display.Sprite;

 public class Main extends Sprite
 {
  public function Main():void
  {
  }
 }
}

---

Step 3: Understand the Game Elements

For this part, our game will have following game elements:

1. Game Field: The area where all game elements will be placed.
2. Turret Placeholder: This is a place on the game field, defined to hold a turret.
3. Turret: Our weapon in the game that can be placed on turret placeholders.
4. Bullet: And finally, the particles that the turrets fire.

All the above elements will be created in the Main.as except the turrets which will be a separate Turret class.

Lets start coding now!

---

Step 4: Creating the Placeholders

First we’ll create a function called createTurretPlaceholder() which will create and return us a placeholder sprite. Add the following to the Main class:

private function createTurretPlaceholder():Sprite {
 var placeholder:Sprite = new Sprite();

 // draw the graphics
 var g:Graphics = placeholder.graphics;
 g.beginFill(0xCE7822);
 g.drawCircle(0, 0, 20);
 g.endFill();

 return placeholder;
}

This function is simply creating a Sprite variable placeholder. Then using Actionscript drawing API we create the graphic, which is a simple circle. Finally it returns that sprite.

---

Step 5: Adding Some Placeholders

Now we’ll create three placeholders using the previous function and put them at different positions on the field. Add the following code in the Main() constructor:

var placeholder1:Sprite = createTurretPlaceholder();

In the above statement we create a variable placeholder1 of type Sprite which receives a placeholder from the above createTurretPlaceholder() function.

placeholder1.x = 200; placeholder1.y = 60;

We position the placeholder on the field.

addChild(placeholder1);

And then we add the placeholder to the stage.

Using the same code, we’ll add two more placeholders to the field – so your Main() function should look like this:

public function Main() {
 var placeholder1:Sprite = createTurretPlaceholder();
 placeholder1.x = 200; placeholder1.y = 60;

 var placeholder2:Sprite = createTurretPlaceholder();
 placeholder2.x = 60; placeholder2.y = 260;

 var placeholder3:Sprite = createTurretPlaceholder();
 placeholder3.x = 350; placeholder3.y = 260;

 addChild(placeholder1);
 addChild(placeholder2);
 addChild(placeholder3);
}

---

Step 6: Turret – Creating the Class

As I mentioned before, the turret is going to be a separate class. This is because turrets need to have specific properties and methods of their own, and to be extended in future to create different type of turrets. This makes them a perfect candidate to be defined in a separate class.

Go on and create a new class called Turret, derived from Sprite, in a file named Turret.as. It should have the following basic code:

package
{
 import flash.display.Sprite;

 public class Turret extends Sprite
 {

  public function Turret()
  {
  }
 }
}

---

Step 7: Turret – The Graphics

Now that we have base structure of the Turret class, the next step is to give the turret some graphics. For that we create a new function called draw() in the class. So put the following function just below the constructor:

private function draw():void {
 var g:Graphics = this.graphics;
 g.beginFill(0xD7D700);
 g.drawCircle(0, 0, 20);
 g.beginFill(0x800000);
 g.drawRect(0, -5, 25, 10);
 g.endFill();
}

As you might have noticed in the code, we draw a circle and a rectangle on it. That’s how our turret is going to look. Now we call this function from the constructor itself [...]

Read more: Make a Tower Defense Game in AS3: Aim and Fire