How to Create a Tower Defense Game in AS3 – Part 3
Part 3: Adding Enemies
Welcome back. In this part of the tutorial, we are going to add enemies to the field and we’re going to program them to move through the paths.
Let us begin by first creating an Enemy class. Do this by creating a new external ActionScript file saved as “Enemy.as” and adding the following code to it:
package{
//imports
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.*;
//defining the class
public class Enemy extends MovieClip{
private var _root:MovieClip;
public var xSpeed:int;//how fast it's going horizontally
public var ySpeed:int;//how fast it's going vertically
public var maxSpeed:int = 3;//how fast it can possibly go
public function Enemy(){
this.addEventListener(Event.ADDED, beginClass);
this.addEventListener(Event.ENTER_FRAME, eFrameEvents);
}
private function beginClass(e:Event):void{
_root = MovieClip(root);//defining the root
//checking what the start direction is
if(_root.startDir == 'UP'){//if it's starting up
this.y = 300;//set the y value off the field
this.x = _root.startCoord;//make the x value where it should be
this.xSpeed = 0;//make it not move horizontally
this.ySpeed = -maxSpeed;//make it move upwards
} else if(_root.startDir == 'RIGHT'){//and so on for other directions
this.x = -25;
this.y = _root.startCoord;
this.xSpeed = maxSpeed;
this.ySpeed = 0;
} else if(_root.startDir == 'DOWN'){
this.y = -25;
this.x = _root.startCoord;
this.xSpeed = 0;
this.ySpeed = maxSpeed;
} else if(_root.startDir == 'LEFT'){
this.x = 550;
this.y = _root.startCoord;
this.xSpeed = -maxSpeed;
this.ySpeed = 0;
}
//draw the actual enemy, it's just a red ball
this.graphics.beginFill(0xFF0000);
this.graphics.drawCircle(12.5,12.5,5);
this.graphics.endFill();
}
private function eFrameEvents(e:Event):void{
//move it based on x and y value
this.x += xSpeed;
this.y += ySpeed;
//checking what direction it goes when finishing the path
if(_root.finDir == 'UP'){//if it finishes at the top
if(this.y <= -25){//if the y value is too high
destroyThis();//then remove this guy from the field
}
} else if(_root.finDir == 'RIGHT'){//and so on for other directions
if(this.x >= 550){
destroyThis();
}
} else if(_root.finDir == 'DOWN'){
if(this.y >= 300){
destroyThis();
}
} else if(_root.startDir == 'LEFT'){
if(this.x <= 0){
destroyThis();
}
}
//remove this from stage when game is over
if(_root.gameOver){
destroyThis();
}
}
public function destroyThis():void{
//this function will make it easier to remove this from stage
this.removeEventListener(Event.ENTER_FRAME, eFrameEvents);
this.parent.removeChild(this);
}
}
}
Now that's a lot of code. The next thing we have to do is to add a function in the main "source.fla" that will add these guys to the field. But, let's first create a bunch of variables that'll help with the process. It'll be simple. Just define them variable where all others are defined:
var currentEnemy:int = 0;//the current enemy that we're creating from the array
var enemyTime:int = 0;//how many frames have elapsed since the last enemy was created
var enemyLimit:int = 12;//how many frames are allowed before another enemy is created
var enemyArray:Array = new Array();//this array will tell the function when to create an enemy
var enemiesLeft:int;//how many enemies are left on the field
enemyArray = [//defining the array
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//1's will just represent an enemy to be created
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//another row means another level
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
Sweet. Now we can add an enterFrame function that'll create the enemies for us. Add this to the bottom of your code:
addEventListener(Event.ENTER_FRAME, eFrame);//adding an eFrame function
function eFrame(e:Event):void{
makeEnemies();//we'll just make some enemies
}
function makeEnemies():void{//this function will add enemies to the field
if(enemyTime < enemyLimit){//if it isn't time to make them yet
enemyTime ++;//then keep on waiting
} else {//otherwise
var theCode:int = enemyArray[currentLvl-1][currentEnemy];//get the code from the array
if(theCode == 1){//if it's set as 1
var newEnemy:Enemy = new Enemy();//then create a new enemy
enemyHolder.addChild(newEnemy);//and add it to the enemyholder
}
currentEnemy ++;//move on to the next enemy
enemyTime = 0;//and reset the time
}
}
Also, we have to create an enemyHolder. We should do this after the road is put down, so all the enemies will appear on top of it. Add this code right after we run the makeRoad() function:
var enemyHolder:Sprite = new Sprite();
addChild(enemyHolder);
Next, we have to count the amount of enemies that are going to be created. Add this code to the startGame() function:
for(var i:int=0;i
Now, there is one final thing to do in order to make these enemies work. Find the "DirectBlock.as" file for me, would you? Add this code to the beginClass() function:
if(directType == 'START'){
if(directType == 'START'){//if this is a start block
//then define the startDir and StartCoord based on it's coordinates
if(this.x == 0){
_root.startDir = 'RIGHT';
_root.startCoord = this.y;
} else if (this.y == 0){
_root.startDir = 'DOWN';
_root.startCoord = this.x;
} else if (this.x == 525){
_root.startDir = 'LEFT';
_root.startCoord = this.y;
} else if (this.y == 275){
_root.startDir = 'UP';
_root.startCoord = this.x;
} else {
//this level won't work if not any of these values
}
} else if (directType == 'FINISH'){//if this is a finish block
//then define the finDir based on it's coordinates
if(this.x == 0){
_root.finDir = 'LEFT';
} else if (this.y == 0){
_root.finDir = 'UP';
} else if (this.x == 525){
_root.finDir = 'RIGHT';
} else if (this.y == 275){
_root.finDir = 'DOWN';
} else {
//this level won't work if not any of these values
}
}
Next, add this code to the eFrame() function:
if(directType != 'START' && directType != 'FINISH'){//if this isn't a start of finish block
//then it'll act as a directioning block
for(var i:int = 0;i<_root.enemyHolder.numChildren;i++){//create a loop
var enTarget = _root.enemyHolder.getChildAt(i);//this will hold a certain enemy
//if the enTarget's coordinates are too close to this block
if(this.x >= enTarget.x - enTarget.width*.5 && this.x <= enTarget.x + enTarget.width*.5
&& this.y >= enTarget.y - enTarget.height*.5 && this.y <= enTarget.y + enTarget.height*.5){
//then move the enemy's direction based on what direction this block points to
if(directType == 'UP'){
enTarget.xSpeed = 0;
enTarget.ySpeed = -enTarget.maxSpeed;
} else if(directType == 'RIGHT'){
enTarget.xSpeed = enTarget.maxSpeed;
enTarget.ySpeed = 0;
} else if(directType == 'DOWN'){
enTarget.xSpeed = 0;
enTarget.ySpeed = enTarget.maxSpeed;
} else if(directType == 'LEFT'){
enTarget.xSpeed = enTarget.maxSpeed;
enTarget.ySpeed = 0;
}
}
}
}
Phew! That was a lot of code, wasn't it? Well, what these snippets of code do is simply direct the enemies to where they should start and where they should go.
That's all for this part of the tutorial. Next time, we'll make the turret detect and attack the enemies!
Subscribe!
Awesome Tutorials
