Tutorial: Create a Tower Defense Game in AS2


Written By Mr Sun at 8:01 am - Saturday, April 25th, 2009
Categories: AS2, Advanced Tutorials, All Tutorials, Flash, Game Development

Table of Contents

  1. Setting up Level
  2. Adding Turrets
  3. Adding Enemies
  4. Making Turrets Attack Enemies
  5. Winning/Losing the Game
  6. Expanding on the Game
  7. Finishing Touches

Step 1: Setting Up a Level

The tower defense genre is one that has become extremely popular over the years. Although they can become quite complicated to develop, they are almost always very fun to play. I am here to walk you through the creation of one of these games. Let us begin, shall we?

In this section of the tutorial, we’re going to set up the roads and stuff onto the stage. However, the first thing we need to do is create a blank flash document with a black background with the frames per second set at 24.

Now, we can dive into some code. Let’s first create some code that will lay down the track for the enemies to go through. Create a new layer called “actions” and add the following code to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

stop();
 
//setting vars to step in for turns and special blocks
var S:String = 'START';
var F:String = 'FINISH';
var U:String = 'UP';
var R:String = 'RIGHT';
var D:String = 'DOWN';
var L:String = 'LEFT';
 
var startDir:String;//the direction the enemies go when they enter
var finDir:String;//the direction the enemies go when they exit
var startCoord:Number;//the coordinates of the beginning of the road
var lvlArray:Array = new Array();//this array will hold the formatting of the roads
 
lvlArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,R,1,1,D,0,0,R,1,1,D,0,0,R,1,1,D,0,0,
			0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
			0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
			S,D,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,R,1,F,
			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,
			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,
			0,R,1,1,U,0,0,R,1,1,U,0,0,R,1,1,U,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
			];
 
//the names of these variables explain what they do
var currentLvl:Number = 1;
var gameOver:Boolean = false;
 
function startGame():Void{//we'll run this function every time a new level begins
	//right now we don't have any code
}
 
_root.createEmptyMovieClip('roadHolder',_root.getNextHighestDepth());//add a MovieClip to hold the road
function makeRoad():Void{
	var row:Number = 0;//the current row we're working on
	var block;//this will act as the block that we're placing down
	for(i=0;i<lvlArray.length;i++){//creating a loop that'll go through the level array
		if(lvlArray[i] == 0){//if the current index is set to 0 
			/////*****EMPTY BLOCK*****/////
			_root.createEmptyMovieClip('block'+i,_root.getNextHighestDepth());//create a gray empty block
			_root['block'+i].beginFill(0x333333);
			_root['block'+i].lineTo(0,0);
			_root['block'+i].lineTo(0,25);
			_root['block'+i].lineTo(25,25);
			_root['block'+i].lineTo(25,0);
			_root['block'+i].endFill();
			//and set the coordinates to be relative to the place in the array
			_root['block'+i]._x= (i-row*22)*25;
			_root['block'+i]._y = row*25;
		} else if(lvlArray[i] == 1){//if there is supposed to be a row
			/////*****EMPTY ROAD*****/////
			//just add a box that will be a darker color and won't have any actions
			roadHolder.createEmptyMovieClip('block'+i,roadHolder.getNextHighestDepth());
			roadHolder['block'+i].beginFill(0x111111);
			roadHolder['block'+i].lineTo(0,0);
			roadHolder['block'+i].lineTo(0,25);
			roadHolder['block'+i].lineTo(25,25);
			roadHolder['block'+i].lineTo(25,0);
			roadHolder['block'+i].endFill();
			roadHolder['block'+i]._x= (i-row*22)*25;
			roadHolder['block'+i]._y = row*25;
		} else if(String(lvlArray[i])){//if it's a string, meaning a special block
			/////*****SPECIAL DIRECTIONAL ROAD PIECE*****/////
			roadHolder.createEmptyMovieClip('block'+i,roadHolder.getNextHighestDepth());
			roadHolder['block'+i].beginFill(0x111111);
			roadHolder['block'+i].lineTo(0,0);
			roadHolder['block'+i].lineTo(0,25);
			roadHolder['block'+i].lineTo(25,25);
			roadHolder['block'+i].lineTo(25,0);
			roadHolder['block'+i].endFill();
			roadHolder['block'+i]._x= (i-row*22)*25;
			roadHolder['block'+i]._y = row*25;
		}
		for(var c:Number = 1;c<=16;c++){
			if(i == c*22-1){
				//if 22 columns have gone by, then we move onto the next row
				row++;
			}
		}
	}
}
//run these functions at the start
makeRoad();
startGame();

That’s a lot of code, ain’t it? Hopefully, I’ve given you enough instructions in the comments. If you test out our game, a nice little path should be shown which the enemies will travel through, along with some blank gray boxes where we’ll be able to place some turrets.

Before I end this part of the tutorial, I want to give these empty boxes some rollOver and rollOut effects. Find where I added the comment saying /////*****EMPTY BLOCK*****///// (lines 44-54). Add this code to the bottom of that section of the if statement:

_root['block'+i].onRollOver = function(){
	//Change the color to green
	var newColor = new Color(this);
	newColor.setRGB(0x006600);
}
_root['block'+i].onRollOut = function(){
	//Change this color back to gray
	var newColor = new Color(this);
	newColor.setRGB(0x333333);
}

Final Product

Source Files (Zipped)

Have you Learned a Lot from this Tutorial? Check out the others!

3 Comments

Erc.:

Really cool!


May 14th, 2009 at 10:15 am
Micheal:

Hello, I’ve been following this tutorial exactly how it is written and everything and when I go to test my game the level will not show up. All I see is the black background and the script has no errors. I’m using this tutorial with Macromedia Flash MX Professional 2004, is this the problem?


July 16th, 2009 at 10:54 pm
Patrick:

I do believe this code is set for the adobe cs3 version of flash, I followed the tutorial and see the end result so far. That may be the problem.


January 1st, 2010 at 6:22 am

Leave a Comment

«
»