Tutorial: Create a Tower Defense Game in AS2


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

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)

17 Comments

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?


Antony:

what’s AS2 im a noob but im here to learn :O
xD


Anonymous:

wow me too im using mx what a coincidence! i see just black stuff and nothing


Seanny:

Hey. I’m having problems with the onRollOver mouse square color change. I keep getting 3 errors.

} else if(lvlArray[i] == 1){//if there is supposed to be a row
function makeRoad():Void{
startGame();

I’ve been adding the scrip into line 45 of the code, just after your comment about Empty Blocks, and the errors come as i press CTRL+Enter to see the Movie.

Thanks :D


Brian:

I don’t program in Flash but just looking over the code i think you need another For loop after
for(i=0;i<lvlArray.length;i++)
you seem to be only rendering i row and not going through the entire array


karl:

hi the piece of code for the rollover didnt work
can i ask what flash you are using?


Anonymous:

Awesome ty


Xerkses:

A good tip to check your code is to use /* */ between blocks of the code and copy the above code into your own actionscript – sometimes it’s just something simple like typing 1 for l or vise versa


RNGbladetuts:

I can’t see the rollOver and rollOut stuff on my SWF file, please help


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.


Sal:

These errors come in AS:
Clipboard Actions: Line 34: ‘{‘ expected
function startGame():Void{//we’ll run this function every time a new level begins

Clipboard Actions: Line 39: ‘{‘ expected
function makeRoad():Void{

Clipboard Actions: Line 86: Unexpected ‘}’ encountered
}


Ryan:

Im using macromedia flash 8 and this 1st part has worked fine on my version


John:

Hi I am making a game for a class and want to alterter this game i was wondering how I would go about instead of having a grey box having a white one


help please:

i dont get where it says “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”


thor:

i have the same problem as micheal but i am useing flash CS4


aaron:

doesn’t work on mine either…I used flash mx…


«
»