How to Create a Tower Defense Game in AS3 – Part 1
Part 1: Setting Up 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
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!
Subscribe!
Awesome Tutorials
