We’re back with another lesson in the never ending saga to create the perfect tower defense game. This is part 4 of the the series, you would be well advised to consult the first 3 tutorials in the series, How to build a tower defense flash game – Part 3 - Rotation and Realism before attempting this section.

Once again all the source code for this tutorial can be downloaded by clicking here.

Today we are going to charge right into the newest section in the series - “Starting the tower attack!” This is one of the most important components in a tower defense game and will ultimately be one of the most enjoyable to program. I will definitely not get to all the cooler aspects of attacking towers in this one section, but I promise that we will create all sorts of fun towers soon. You will however, at the end of this particular tutorial, have enough knowledge to make any cool towers you can think of. I’ve tried to make the codes robustness enough for that!

So swf file below is what we’ll have at the end of the day - Place a couple of towers around and see what happens

Pretty cool huh. The creeps are still indestructable, but you can shoot the hell out of them.

Ok, so to make things a little easier this time around, I’ll layout exactly what has changed from Part3 before I dive directly into the code.

1. We’ve created two new symbols - “CannonBallProjectile” and “CannonBallExplosion”
2. We’ve created a new function called “Fire” in the main time lines action script code
3. We’ve created a new function called “Explosion” in the main time lines action script code
4. We’ve added a call to “Fire” within the onEnterFrame of the “creeps” time line.

Pretty straight forward, I hope.

The two symbols “CannonBallProjectile” and “CannonBallExplosion” are shown in the picture below next to each other (right below the tower). The symbols were given the instance names of “projectile_cannonball” and “projectile_cannonball_explosions” respectively.

The symbol highlighted will act as our tower projectile or bullet. A new projectile will be created every time the tower fires and will be destroyed after it comes within proximity of the creep it is tracking. The explosion symbol would be considered “shrapnel” in the situation - If we had an area of effect, we could look into damaging the creeps around it. For now it’s just looks like the bullet is ricocheting pieces off the side of the creep.

Now that we’ve gotten the symbols down and listed as to what they do, lets jump to the code. We’ll start with the “Fire” procedure that is located in the main time line:

For now, the fire function takes in as a parameter the tower that is doing the firing, the creep being fired on, the starting speed of the projectile, the acceleration, the max speed of the projectile and the projectile clip itself.

We use the information to duplicate the projectile, in this case “CannonBallProjectile” is being passed in and all the parameters are mapped to the object being duplicated.

So here is where most of the heavy lifting is done - It is the onEnterFrame for our projectile. In essence what we expect our projectile do do are as follows:

1. Recalculate your target every frame - if the target exists
2. Find the direction of the target based
3. move the projectile forward based on the direction and speed
4. Increase the speed of the projectile until it hits max velocity
5. If we come within a range of 10 of the creep, explode and remove the movie clip
6. Lastly, we have a specific range of projectiles - anymore than our max threshhold on the screen at one time and we start to lose projectiles.

That’s it, that’s all the code does.

We made the call to Fire(…) in the “GunTowerPlacement” symbol’s action script code. Here were the parameters I used: _root.fire(this, creep, 10, 1, 10, “projectile_cannonball”);

Looking at the code, the great thing is that most of this code has been dealt with already - Think tower rotation and creep rotation and moving the creeps from one waypoint to the next. The only new things is the call to Explosions which passes the “movieclip” name and the current x and y coordinate and the acceleration that gets added to the speed every round until it hits max speed.

We will revisit this function later in the series when we intend to add special abilities to the individual projectiles, but for now lets keep it simple.

Holy cow that looks complicated! Well if by complicated you mean long, you’re right. However, code wise, there is nothing we haven’t seen before so it’s pretty simple.

1. We use a for loops to generate all the little pieces of debris in the explosions - We use 1 to 10 for now
2. We use our trusty “duplicateMovieclip” to make our 10 copies
3. We set some location information and some random directions
4. We set our onEnterFrame to handle moving in one direction for a time

Of all that the only thing we haven’t really seen before is the reducing the alpha on the debris so that every frame it gets more and more transparent. Once the alpha gets to 0 we remove the movie clip. We also give the debris an initial speed and slowly reduce it making it seems like the explosion was pretty powerful.

The _root.explosionCount is just there to make sure we don’t put too much on the screen at any one time - We will play around with these “count” variables as we go more into the tower defense tutorials/series. For now any more than 100 on the screen and we overwrite them.

Ok what have we learned:

We now how fully loaded Towers!
The towers themselves now have mini explosions when they hit their targets

We have almost all we need for a full game - Then we can add more polish to the different towers (like slow/air/area of effect/poison/etc). I almost can’t wait to start, however, first we need to do bring a little information into the tower defense game. We can give some information and lets finally handle creep kill’in and multiple waves. It’ll be great!

You can click here to go back to the introduction

How to build a tower defense flash game – Part 5 - Wave after Wave of Creep Kill’in!