Ok so Tower Defence games are really popular so I thought I’d jump on the bandwagon and have a go at coding one from scratch, this is the journey from start to finish of the game.This will be a series of tutorials separated into the main objects of the game, done in a reasonably logical manner.
Ok so the first thing to consider is how to get your creeps route finding. They have to walk round a series of paths from one end of the map to the end. The easiest way I have found is to use a tweening engine. I use tweenfilterlite by greensock, you can download the class files here. The version I am using has slightly different syntax and is not the latest version.
The easiest way to create a map is to draw a path and then put down markers like the one below, I use a circle movieclip and duplicate it round the path, calling them marker1, marker2, marker3 etc.

As you can see there are 9 markers on the map. The creep will start at 1 and end at 9.
So lets create a creep(who is a panda). All the create function does is take 3 parameters startx, starty and speed.
var pCount:Number = 0;
function createPanda(startX, startY,speed) {
pCount++;
var nPandas = "pandas" + pCount;
this.attachMovie("pandaClip", nPandas, this.getNextHighestDepth(),{_x:startX,_y:startY});
this[nPandas].moves = 0;this[nPandas].speed = 50;this[nPandas].destX = this["marker"+this[nPandas].moves]._x;
this[nPandas].destY = this["marker"+this[nPandas].moves]._y;
// start the panda moving
newPandaMove(this[nPandas]);
}
Obviously this is just setting up where the panda will start, and how fast it will move. The speed is not a real value of speed, just an abitary value. We also record which move the panda is on and where it is meant to walk to, that’s panda.move panada.destX and pandaDestY. The panda won’t do anything so we call newPandMove() to get him up and running.
function newPandaMove(whichPanda){
whichPanda.moves++;
whichPanda.destX = _root["marker"+whichPanda.moves]._x;
whichPanda.destY = _root["marker"+whichPanda.moves]._y;
var time = calcDistance(whichPanda,whichPanda.speed);
if (whichPanda.moves < 9){
TweenFilterLite.to(whichPanda, time, {_x:whichPanda.destX, _y:whichPanda.destY, ease:None.easeNone, onComplete:newPandaMove, onCompleteParams:[whichPanda]});
}
else{whichPanda.gotoAndPlay("dead");}
}
function calcDistance(object,speed){
var distY = object._y - object.destY;
var distX = object._x - object.destX;
var distance = Math.sqrt(distX*distX + distY*distY);
var time = distance / speed;
return(time);
}
So firstly newPandaMove() increments the panda’s move attribute, he is now on move 1 and we want him to move towards marker 1. So we set his destX and destY to the _x and _y of the marker he is aiming to. We first though need to calculate the distance he has to walk using calcDistance(). calcDistance() takes in the object and the objects speed and then works out using a bit of pythagoras thorem how long it will take to walk the path section, should probably bcalled calcTime.
That gets fed into tweenfilterlite which says the panda should tween from where he is to the next marker over the time we have calculated. Then we use onComplete:newPandaMove, onCompleteParams:[whichPanda] to call the same function again when he has reached his destination.
We do a check to see if the marker he it at is the last one and if it is we tell the panda to gotoAndPlay(”dead”), which runs the last animation and deletes him from the stage.
var pandaInterval:Number = 200;
var frameCounter:Number = 0;
// MAIN GAME LOOP
onEnterFrame=function(){
frameCounter++;
if (frameCounter % pandaInterval == 1){
pandasOut++;
createPanda(marker0._x,marker0._y,50);
}
}
The last thing to do is the main game loop, we create 2 variables, a counter and a number for the interval between pandas, then we increment frameCounter each frame, and then test if frameCounter is a modulus of the interval, which means every 200 frames call createPanda and create a panda at the first marker with a speed of 50.
Hope that all makes sense, you can download the sourcecode.
Next installment is creating a tower.