Tutorial: Create a Tower Defense Game in AS3
Categories: AS3, Advanced Tutorials, All Tutorials, Flash, Game Development
Table of Contents
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 have to create two classes. In order to do this, simply create two external ActionScript files by selecting File -> New -> ActionScript File, twice. The first class we’ll create is one for an empty block that towers can be placed in. Add the following code to it:
package{ //importing required classes for this to work import flash.display.MovieClip; import flash.events.*; public class EmptyBlock extends MovieClip{//defining the class as EmptyBlock private var _root:MovieClip;//creating a _root variable to access root easily public function EmptyBlock(){//this function will always run once EmptyBlock is called this.addEventListener(Event.ADDED, beginClass);//create a function that will run once this.addEventListener(Event.ENTER_FRAME, eFrameEvents);//create a enterFrame function } private function beginClass(e:Event):void{ _root = MovieClip(root);//setting the _root as the root level this.buttonMode = true;//make this act like a button this.addEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);//adding function for mouseOver this.addEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);//adding function for mouseOut this.addEventListener(MouseEvent.CLICK, thisClick);//adding function for clicking } private function eFrameEvents(e:Event):void{ if(_root.gameOver){//remove this and listeners if game is over this.removeEventListener(Event.ENTER_FRAME, eFrameEvents); this.removeEventListener(MouseEvent.MOUSE_OVER, thisMouseOver); this.removeEventListener(MouseEvent.MOUSE_OUT, thisMouseOut); this.removeEventListener(MouseEvent.CLICK, thisClick); MovieClip(this.parent).removeChild(this); } } private function thisMouseOver(e:MouseEvent):void{ //changing the background so the user know's it's clickable this.graphics.drawRect(0,0,25,25); this.graphics.endFill(); } private function thisMouseOut(e:MouseEvent):void{ //changing the background back this.graphics.beginFill(0x333333); this.graphics.drawRect(0,0,25,25); this.graphics.endFill(); } private function thisClick(e:MouseEvent):void{ //we'll add code that'll make a turret be made later } } }
I’ve commented the code extensively if you need any explanation. Now, save this file as “EmptyBlock.as” in the same folder as your source .fla file. Now, take the second external ActionScript file. We will turn this into a special block which will act as a marker for the road. There are going to be 6 types of this special block, the four different directional notifiers, and the start and finish block. They won’t look any different than any other block, but they will be very important later. Add this code to that second class:
package{ //imports import flash.display.*; import flash.events.*; import flash.geom.*; public class DirectBlock extends MovieClip{//we'll call it a DirectBlock private var _root:MovieClip;//again, defining a _root private var directType:String;//what kind of special block is this //this time, we have to accept some values to make it easier to place, like the type and coordinates public function DirectBlock(type:String,xVal:int,yVal:int){ directType = type;//set the directType so that all other functions can use it //add the required event listeners this.addEventListener(Event.ADDED, beginClass); this.addEventListener(Event.ENTER_FRAME, eFrame); //setting the coordinates this.x = xVal; this.y = yVal; } private function beginClass(e:Event):void{ _root = MovieClip(root);//setting the _root again //making this into a 25x25 square this.graphics.beginFill(0x111111); this.graphics.drawRect(0,0,25,25); this.graphics.endFill(); } private function eFrame(e:Event):void{ if(_root.gameOver == true){//destroy this if the game's over this.removeEventListener(Event.ENTER_FRAME, eFrame); MovieClip(this.parent).removeChild(this); } //we'll add more code to this later } } }
This will just set up the blocks. Now, we must return back to the main .fla file. Create a new layer to place actions in, and add the following code:
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:int;//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:int = 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 } var roadHolder:Sprite = new Sprite();//create an object that will hold all parts of the road addChild(roadHolder);//add it to the stage function makeRoad():void{ var row:int = 0;//the current row we're working on var block;//this will act as the block that we're placing down for(var i:int=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 block = new EmptyBlock();//create a gray empty block block.graphics.beginFill(0x333333); block.graphics.drawRect(0,0,25,25); block.graphics.endFill(); addChild(block); //and set the coordinates to be relative to the place in the array block.x= (i-row*22)*25; block.y = row*25; } else if(lvlArray[i] == 1){//if there is supposed to be a row //just add a box that will be a darker color and won't have any actions block = new Shape(); block.graphics.beginFill(0x111111); block.graphics.drawRect(0,0,25,25); block.graphics.endFill(); block.x= (i-row*22)*25; block.y = row*25; roadHolder.addChild(block);//add it to the roadHolder } else if(lvlArray[i] is String){//if it's a string, meaning a special block //then create a special block block = new DirectBlock(lvlArray[i],(i-row*22)*25,row*25); addChild(block); } for(var c:int = 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();
Now, if you test out your game, you’ll see nice little road set up for you. However, we need to keep that empty space in the bottom so we can add stats and other cool stuff.
Well, that concludes this first part of the tutorial. Next time we’ll make it so you can add turrets!





you explained on what to do but NOT HOW this is a good yet bad tutorial
March 2nd, 2009 at 5:34 pm
Explain to me what you mean when you say “how”. You can’t teach a person “how” to code, you can only teach them what to do and hope that they can learn.
March 2nd, 2009 at 5:56 pm
yes,that’s true that you can not teach person “how to code”,but you can explain code in more detail….
I’m not comparing you with anybody but if you will see the tutorial at asgamer.com ,it’s really cool, students like me can easily understand that….
Btw your work is wonderful and i appreciate it…………
thanks for your tutorial and keep it up……
March 4th, 2009 at 1:31 am
For example in this tutorial lvlArray and its use in code is difficult to understand ,it would be great if u can explain them or u can give link for explanation of that stuff
thank you
March 4th, 2009 at 1:34 am
Yeah, hiren is right, if I hadn’t read other tutorials including arrays I would be confused as hell!
Anyway, except that there could be *slightly* more explanation, it is an amazing tutorial.
Keep up the good work :D
March 10th, 2009 at 5:23 pm
So I created the main flash file, and the 2 AS files Empty/DirectBlock.as files, when I go to test them, I get an error
1013: The private attribute may be used only on class property definitions. It is referencing the code of –private function eFrame(e:Event):void{–
Any ideas as to why this is happening?
March 12th, 2009 at 3:48 pm
(line 31, DirectBlock.as) 1013: The private attribute may be used only on class property definitions.
March 30th, 2009 at 4:22 pm
Andrew, I can see you are having the same problem,unfortunately this problem extends beyond what I understand. Have you found the problem?
March 30th, 2009 at 4:25 pm
Can you make a tower defense tutorial for AS2? I have flash 8, but I really want to make a TD game. Email me if you decide to do so.
April 5th, 2009 at 4:11 pm
To Jim and Andrew, if you copied the code exactly, on line 29 of your DirectBlock.as there will be a } that shouldn’t be there. Deleting it will solve your problem.
April 8th, 2009 at 11:39 pm
hey mrsun. thanks for all your help. as an experienced programmer, i find your tutorials a good starting step in learning flash actionscripts. and i like how you seperated as3 and as2. keep up the good work and produce more tutorials please.
April 12th, 2009 at 3:07 am
private function beginClass(e:Event):void{
_root = MovieClip(root);//setting the _root again
//making this into a 25×25 square
this.graphics.beginFill(0×111111);
this.graphics.drawRect(0,0,25,25);
this.graphics.endFill();
} <—**** ERROR REMOVE THIS TO MAKE WORK ****
}
I don’t care much for these other QQ’rs how want you to teach them what an array is. TD games are not for beginner coders and even this one allow isn’t a very complex TD. On that not I like the tutorial so far… being I am at the end of the first page, but I did have to debug the code also. Your source files are correct, but your examples posted here are bugged.
Nice Start, lets see what we can make of this.
April 13th, 2009 at 3:22 pm
Make a video tutorial with audio, good tutorial but i dont have eyes cant read it.
April 17th, 2009 at 9:29 pm
If you don’t have eyes then what the hell are you doing making visual programs?
April 23rd, 2009 at 8:25 pm
2 classes, DirectBlock and EmptyBlock, are defined.
In the main timeline (the .fla file), an array is defined containing level information.
Then a loop is entered, which generates blocks (either a DirectBlock or a EmptyBlock) based on the value at each position in the array. The loop also generates coordinates.
QUIZ :
1) Where is the code that causes the color of a non-path block to change?
2) Modify the level so that the path is a straight line.
3) What type of object is roadHolder?
//should help the new ppl at this
///This is an outstanding set of tutorials mr sun
April 26th, 2009 at 5:34 pm
I found this tutorial incredibly useful for my project. I’m not sure what the others are talking about with needing more information. I’ve successfully used this tutorial to help me finish one of my projects which is developed in C++… it’s nice, generic enough to transcend other languages, and nicely structured.
Keep up the awesome work :)
April 27th, 2009 at 7:14 pm
Fantastic tutorials! Keep up the great work!
May 4th, 2009 at 12:30 pm
Oh man, that’s great! thank you!
May 11th, 2009 at 8:24 pm
mine says there is “a call to an undifined emptyblock” and “a call to an undifined directblock” how do you fix that?
May 15th, 2009 at 10:52 pm
Look like a mix of as2 and as3 maybe you should consider using MovieClip(parent) more than _root? and still other few buildup functions with as2
June 2nd, 2009 at 1:53 pm
Hi, great stuff. I have used the source and reconstructed a version using entirely .as files because I have just started using FlashDevelop and I can’t figure out how to use .fla files.
look here http://www.eldwick.org.uk/?q=node/62
June 6th, 2009 at 1:20 pm
So i am currently trying to rework the tower defense tutorial setup here so i can learn the code and whatnot, but i cant get my little guys to turn left, guess they just arnt ambi-turners, but is there any reason why this is happening in the code, if you could email some help it be much appreciated
January 8th, 2010 at 9:44 pm