Here are just a few examples of games we have worked on in the social space - we have a couple in the works right now, so stay tuned!

Fifty States
Monster Truck Curfew
Shuffle Snake Bites
MTV Show Quizzes
Backchannel

Having a win/lose condition at this point is no good if you don’t know how anything else works. Therefore, If you haven’t read How to build a tower defense flash game – Part 9 - Scores and Wave Timeline! you should go back and read it before you continue.

As always the source code for this tutorial can be downloaded by clicking here

Man, I have to admit, that I am pretty excited about this one, because this is the first time I can say that we have a complete and working game. You can win and lose and it’s all up to the player to prove his worth.

To accomplish all we needed to have a win/lose ending, we needed to introduce a few new variables:

• _root.health = 20;

We use this variable to keep track of the players current health.

• _root.hasGameFinished = false;

We use this variable when the game is over and use it to add to “tower” explosions when you win or lose - We also

• _root.currentNumberOfCreeps = 0;

We need a new way to keep track of the current creeps on the map at any time - unfortunately, _root.creepCount doesn’t fit for us since it is used to not only keep track of the total creeps that have ever existed, but we use it for create the movieclips and therefore we can use it.

We’ve added new code to leak() to now account for the removal of health. We now remove one point of health for each creep that the player lets through. Once the health value falls to “0″ we see if the _root.hasGameFinished is still false and we tell the user that he lost then we set _root.hasGameFinished to true so it doesn’t get run again. Pretty neat huh!

We add an additional line to the UpdateInfoBar function to account for the new “health” field. We didn’t need to add any additional calls to the function though since we have it called enough - Whenever the creeps make it through the defense this will be updated with the new correct health value.

For a winning condition to to take place we need to keep track of how many creeps are around and what level we are on. This is the function we use to keep track of that fact. When a creep is created we increase _root.currentCreepCount by one and when a creep is killed we remove one from it as well. Once we hit level 35 (that is currently the last level) we reallly start to pay attention to that value and when it is zero we know that the game is over.

Whether the game is won or lost by the player, we do the same animation - we blow up all the towers. It’s a cool effect and all we need to do to make it happen is to loop through all the towers and call “Explosion” for the x/y coordinates of the given tower. Originally it was only done for lose condition, but I liked it so much I remove the check and made it happen for the win condition as well.

Well, it’s a quick one, but we have a complete game - Don’t you fret though, while it is a complete game we still have more work to do… Until next time… You can click here to go back to the introduction

1. Multiple Waves of creeps at the same time.
2. Creation of a time line for creep releasing.
3. Start tracking a users score in a full game.

Before we begin, if you haven’t read How to build a tower defense flash game – Part 8 - Poison Tower and Basic Startup! you may become overwhelmed at the scope and content and should consider going back and read the earlier articles which may answer some questions if you came here first.

As always the source code for this tutorial can be downloaded by clicking here

So, it’s looking pretty good so far, we obviously have come a long way since setting way points and following basic paths. Some of the things we are setting up now are to add a little excitement and competition to the game and what better way then add the concept of scoring to the mix. Why does a game need scoring? A game needs scoring to keep it fresh, otherwise the game is just about getting through it once. Sure you might once in a while play a game twice, because a specific section was especially challenging, but for the most part without a method to make competition a part of the game - even on a great game - the game life will be shorter on games without scores.

SIDE NOTE: Community Features

When you add a personal high score the game is giving you a personal benchmark to achieve. The game could be terrible, but it isn’t about it being bad as much as it is now a

challenge to the player himself (”I know I can beat that” or “Just one more time and I can do it”). The personal benchmark takes on a new meaning when introduced into a half decent game, dare I say, a game the player actually enjoys. Another level of achievement is had when you add a leader board to the mix - now you’ve taken the concept of a personal high score and introduced the world. Now it isn’t as much as achieving your own personal goal, but get into the mix of beating everyone around you. There are different types of leader boards, but I believe the “daily”, “weekly”, “monthly” and “all time” are pretty good starts. If you can add “Easy”, “Medium” and “Hard” settings to the mix all the better - Have leader boards for each other them and I guarantee that people will play your games longer than they would normally. Just remember, these “community” features will add life to your games, but it it only helps magnifying glass for the game - if the game is terrible, it might make it just playable - HOWEVER - if the game is great, it will make it immortal.

END SIDE NOTE

So for the most part this tutorial will go over adding the scoring element and some features to distiguish the good players from the great. Ok, so to that end we obviously need to do a little setup. For one thing we are going to need to move code around a little and make some new variables. In fact most of the code change relating to score will all take place in the actionscript layer in the main timeline (We try to group code when we can). So lets get right to it.

We’ve created a new varaible, surprise surprise, it’s “_root.score” which will contain the players current score as they progress through the game.

The next item is more interesting, it is a new function called “executeCallback” - I’m really unoriginal with my names, but at least you can be fairly certain how this function will be called. We will call this function everytime we want to start a new level or when it’s not progressing to the next level it’s increasing the “_root.count” by 1. In fact you will soon see that this will be called every second when we put in a timeline! This function will serve as the progress bar counting down the time until the next wave release.

This is the meat and potatoes of the score function. You will need to put “updateScore()” into the following function calls to make sure they give score updates at the appropriate time:

• When the function newLevel() is called.
• When a creep is killed.
• When a tower is upgraded.

What the code does is first put the current gold amount in a temporary variable “a” and then loop through all the towers and check to see which are still active and add the cost of that tower to variable as well. At the end we take that temporary variable and store its value back into _root.score. As you can imagine if you have a lot of towers or if you save a lot of gold, you can score a bunch of points, however, only a good plan will determine whether saving money or spending it pays out in the end.

This is the last real update to the actionscript code in the main timeline. This might be lost in the code change, so I felt it was important to point out. This function originally only updated the “gold” amount when the player was killing creeps. Now that we have a score though, it has taken on the expanded role of updating the score as well. I haven’t changed the functions that called it since the last tutorial, because any time we are increasing or decreasing gold, we are also updating the score as well.

Just to keep you informed - This does mean that you will need to create a new text field in the movie clip “InfoBar” with the instance name of “ScoreAmount”, but that shouldn’t be too hard for a tower defense master like yourself.

Now to the Timeline

So what’s a “wave” time line you ask. Well, it’s easy, instead of just having a level end when the towers are all destroyed or a timer has been reached, we give the player the control over when the next wave takes place. We also give an added incentive that you score more points if we release the wave before the next wave is scheduled to be released. Again, you can see how we re tapping into the users desire to get bigger scores (It doesn’t hurt that the average end score can be like 100,000 points - my best was 534,680 points).

So to do this we need to make a “timeline” you can see the code below:

Basically we just do a simple mask for a large line of colorful rectangles that *eventually* will be different types of creeps. The distance of each rectangle is such, that when the timer starts the full rectangle will move off the screen as the next wave is released. The action script code is setup to align “programmatically” so the first rectangle is in the correct position when the game loads for the first time.

This is where all the fun happens.

When this code is first run, we create a timer interval that runs every 1 second and calls our function above “executeCallback”. The function does nothing while the game has not yet been started. When the game is started, the player can click on the timeline and it will automatically set the “nextLevel” in motion - giving an interest on money saved, resetting the “Count” variable and sending the next wave. This has the awesome benefit that we can get multiple creep waves on the same screen for a crazy experience.

You can now get a whole new experience then before with this type of functionality. Don’t mind my non descriptive art, you could lable the timeline’s rectangles with whatever you want. A red rectangle could be a flying creep, a blue a strong creep, green a groups of closely knit creeps, etc. Try it out and post some feedback with your scores… I’d love to see if you can beat my score.

That’s it for now - How about checking out the next part while were on a roll -
How to build a tower defense flash game – Part 10 - Win or Lose!

You can click here to go back to the introduction

We are now at Part 8! You should be pretty up on your tower defense games at this point in the series. However, before we begin you should make sure you have reviewed the previous tutorials if you came here directly from a link. If this is the first time you’re viewing the page you may want to start at the beginning by clicking here or you can go to the previous tutorial Part 7 by clicking the below link:
How to build a tower defense flash game – Part 7 - Gold and Upgrades!

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

Ok, so this is the meat and potatoes that handles the “poison” functionality. We need to dole out damage consistently for a period of time. To do this properly, I’ve decided to have just a time that runs for the express purpose of doing “creep events”. This doesn’t just mean poison, but it works for my purposes now. So we setup a timer for the given function.

• _root["creepEventInterval"] = setInterval(_root, “creepEvent”, 500);

This just runs the function “creepEvent” every 1/2 second continuously until the game ends -

The “fire” function is now changed:

• function fire(from, to, speed, acc, maxspeed, projectile, damage, splash, slow, poison);

We’ve included a “poison” parameter which acts as the % amount to deduct from enemies help have 1/2 second. The change is are relatively simple - The first one just asking - if the projectile that hit the enemy creep has the poison parameter set the poison attribute to the creep.

and later in the same “fire” function and given out when a tower causes splash damage.

We want the poison damage we set to be set by the distance from one enemy to another - so if they are far enough away the poison they take is less.

Finally, the last thing we set the “marker” movie clip to contain a clause that once we click on a “valid” spot of the green area and place a tower, we finally call the “newLevel” function and start the creeps moving and remove the instruction screen.

So we close yet another chapter - We have covered a bunch of new subjects and improved what towers can now do. We can now interchange some new towers - splash, poison and slow. We’ve only concentrated on the specific types of towers, but the true power comes from mixing them together.

Think of it a tower with poison/high damage/small range/splash! Wow, I can’t wait to start really making stuff now! You can now move on to How to build a tower defense flash game – Part 9 - Scores and Wave Timeline!

Or you can click here to go back to the introduction

How to build a tower defense flash game – Part 6 - Tower Powers!

Anyway so you’ve read from the beginning lets get started! You can’t get something for nothing. That’s what my family always said, so why should tower defense games be any different. You need to make people work for it. That means you need to pay your towers for hire and the better the towers, the more they should cost. Don’t worry we won’t make anything too expensive, but keep in mind that this is “level balancing” and it is a hugely important step. If you give too much gold or make the towers too inexpensive then the game will be too easy, but if you make them cost too much people may not play your game long enough to buy them.

So you’ll find out that this specific tutorial we more about designing that complicated math or real programming - They’ll be plenty of programming, but nothing we can’t handle. It’s a tricky balance, that usually can only be helped by play testing - lots of play testing, but hey, it’s your game your making it’ll be fun.

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

So you want to keep your gold pretty consistent across the board, you don’t want to give out different amounts of gold for each creep, it makes it hard for the user to make a plan with their tower strategy - What you usually see if a steady increase in the amount of gold given out on a per wave basis rise every 5 or 10 waves, starting at 1 or 2 gold with a wave comprising of about 10 or 20 creeps attacking at a time.

If you decide to have fewer (for say boss levels) then adjust your gold accordingly. You could even setup some form of equation based on hit-points of the creeps.

I will stick with the the trusty multiple of two golds for every 10 levels(ish). To make it interesting I usually give a boss level every 5th level and I give a a multiplier of 2.5 times. We’ll also give the play 80 to play around with as well. Obviously this is a general guide line not a strict rule.

So to recap the gold per level:

• Level 1 - 5: 1 gold per creep
• Level 6: Boss enemy of a specific type (25 gold)
• Level 7 - 11: 1 gold per creep
• Level 12: Another Boss… (50 gold)
• Level 13 - 18: 2 gold per creep

and so on…

We can also give an interest rate for each level - You can make things interesting in the later levels forcing the user to decide between building a new tower and collecting interesting on the money saved.

Next we need to determine how much to charge for each tower. Well this is a little more specific, but it must be tied to the amount of money brought in. Don’t make a tower that cost so much you need to save 25 levels for it, because you still need to give it upgrades.

The above graphic labels where the upgrade window shows up when you click on a tower (Labeled as 1) and the info box that currently only lets the user know how much gold he has (Labeled as 2).

Starting at label 1. There is almost nothing hard to create here in terms of programming - We have a button “upgrade” that when clicked calls _root.upgrade(). That code is listed below:

The only thing that isn’t listed here is an multi-dim array within each of the towers. This multi-dim array just has enough information to upgrade “description”, “cost in gold”, “damage”, “range”, “rate”, “splash percentage”, “slow percentage”. Such as that listed below.

• ["Damage: 40rRange: 120rSplash:NorSlow:No", 20, 40, 120, 5, 0, 0]

At the point in the above code - We have a tower selected and we just check to see if the gold the user has is enough to purchase the upgrade - if the player has the gold we upgrade the current tower levels to that of the new upgrade (we keep track of which upgrade we are on with the “level” variable). We then call “towerInfo” to display the now upgraded levels to the player and deduct the gold for that upgrade cost. Viola, you have a new upgrade tower - easy wasn’t it…

Lets quickly talk about “towerInfo”, this function was created before, but now we are using the function is not just draw the range of the tower anymore. Now we are going to display the upgrade information and the towers current level information.

If a tower is selected - then we display all the information we know about the tower - if no tower is selected then we show nothing. To sum this up, we you click on a tower make this information visible, otherwise don’t.

Right now this function is just for displaying “gold” levels for the player so he doesn’t have to guess how much gold he/she currently has. We are going to use it more when we want to give a score or have a “status” of what creeps might next be coming up .

Wow, we’ve done a lot of polish in this one - Not so much code was changed seriously, much more in design then anything else, but that’s ‘ok’ it means we are really making this into something special.

That’s it! We still have so much to do, but we’ve really hit a mile stone! You still can’t die, but it really feels like a complete game now.

How to build a tower defense flash game – Part 8 - Poison Tower and Basic Startup!

If you haven’t already read the last tutorial - How to build a tower defense flash game – Part 5 - Wave after Wave of Creep Kill’in! you should seriously consider giving it a go.

So this is what we will build today - Select the different towers and play around. The black tower is our default “damage only” tower. The red tower is an area of effect tower that does a tad less damage but it is spread across a larger area. The blue has a small area of effect and slows enemies by 25% and does minimal damage.

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

So if you start to look at the code, you may also have noticed that “tower powers” wasn’t the only thing I added. We’ll your right, I did a little clean up - I also added a health bar for all the creeps. I reorganized the tower onEnterFrame, well maybe you didn’t realize that but I did and it was all for a good cause.

The micro changes were:
The creeps now have health bars over their heads. This is mainly so you can see the splash damage at work, but we needed to have one created anyway - After creating the health bar symbols (health_bar > bar) I put the following code in the creeps onEnterFrame:

• this.health_bar.health._width = 30 / this.maxHealth * this.health;

We now have a health bar.

Next, I changed the spawn function code so now it uses the local variable “level” instead of “_root.wave”. I did this because _root.level is global and level is local. When we spawn a new enemy we need to check the level of the spawn object not the current level (_root["spawned" + level] == 0). This comes into play if you want the user to be able to spawn multiple waves at the same time.

Another change was to the tower code itself, I reorganized the onEnterFrame because it was redundant in some places - For example I checked for “target=0″ in multiple places. I just condensed the code and put the fire function in the right place.

Even with some of the micro changes I did - All the main changes were to support these 6 new symbols:

We now have a “Fire” and a “Water” tower! The firing code is almost exactly the same, and could be if I didn’t want the towers to actually function differently. Since I did want them to do different things we had to change the fire function, which now takes two additional parameters.

These parameters are:

“splash” - This value is actually the range around projectile when it hit the creep. It does more damage to those creeps that are closer to the target creep in the blast radius.

“slow” - This value is a number from 1 - 100 and it is the actual percentage that a given creep will be slowed down by when hit by the projectile.

So without further ado, lets jump right into the code.

Ok you see the two new parameters in the fire code - I also added a little extra at the start as well, that would be considered a micro change if it wasn’t so obviously necessary. The new code above positions the “projectile” symbol we just duplicated at the tip of the tower. What this means is that when the tower fires the projectile will appear at the tip of the gun. If you look at Part 4, you will notice the projectiles were being spawned in the center of the tower. This wasn’t too obvious when the bullets were small, but if you replace the code with what was there before:

r._x = from._x;
r._y = from._y;

The fire and water towers look all wrong. So I fixed it by taking in the towers rotation into account and then once we have the correct radians, we added half the width (because the tower was centered in the symbol) and half the height to the x and y coordinates.

Now we get into the heart of the matter. In Part 4 we literally had a call to the “Explosion” function, took away some health and then deleted the projectile. Not anymore, our projectiles have powers now baby!

Now if the tower passes in a “slow” parameter, we take that specific percentage off of the enemy the projectile hit. It’s pretty straight forward, but just to write out the math:

If the creeps maxspeed is 10 and the slow parameter was 25

this.targ.speed = 10 / 100 * (100 - 25);
this.targ.speed = 10 / 100 * (75);
this.targ.speed = .1 * (75);
this.targ.speed = 7.5;

Viola, the target just lost 25% of his forward momentum.

Ok this “beast” of code handles all of the “splash” issues. It can look daunting, but we’ll make it through it. When the projectile hits its target we loop through all of the other creeps and find out how far they were from the target creep when the hit took place. If the other creep was within the splash radius, we give out damage based on how far away the creep was at the time.

• _root.creepArray[i].health = _root.creepArray[i].health - this.damage * (1 - (d / this.splash));

Let run through one example:

If the splash distance was 50 (very big bomb - Think of the slash number as the same thing as the range number for towers), the distance away was 10 (fairly close to the explosion) and the damage from this type of bomb is 20.

_root.creepArray[i].health = _root.creepArray[i].health - 20 * (1 - (10 / 50));
_root.creepArray[i].health = _root.creepArray[i].health - 20 * (1 - (.2));
_root.creepArray[i].health = _root.creepArray[i].health - 20 * (.8);
_root.creepArray[i].health = _root.creepArray[i].health - 16;

So in this blast the surrounding creep will suffer 16 points of damage!

Now the other great thing which is in this function, is that we can do all sorts of powers as well - This is where slow comes back into play. We check if the tower has a “slow” marker on and apply that slow percentage to all the surrounding creeps as well. Hurting them by the blast, but also slowing them down. We are going to use this again when we make some more complicated towers (like poison towers - you may have noticed I made some green towers off to the side but didn’t use them yet -*wink*- -*wink*-).

Ok so the man difference between the towers is as follows:

CannonTower:

range = 120 (large distance)
rate = 5 (not to fast at shooting)
_root.fire(this, creep, 10, 1, 10, “projectile_cannonball”, 15, 0, 0);

The cannon tower doesn’t do anything fancy - but it does do more damage then the fire and water towers on an individual projectile basis, but has a slower rate of fire. It also has the largest range
so far.

Fire Tower:

range = 80 ( medium distance)
rate = 2 ( faster shooting)
_root.fire(this, creep, 10, 1, 10, “projectile_fire”, 5, 40, 0);

The fire tower has the second highest damage amount (1/3 the damage of the Cannon Tower), but is able to splash damage in a wide area. This means it works perfectly against a group of creeps that are packed together.

*Water Tower:*

range = 80 ( medium distance)
rate = 2 (faster shooting)
_root.fire(this, creep, 10, 1, 10, “projectile_water”, 2, 10, 25);

The water tower has the smallest range and damager, but it slows enemies by 25% as they pass by and is able to cause splash damage and thereby slow nearby enemies as well.

Excellent, look at that, you could already made a ton of combinations already and we’ve just started doing cool things with tower powers.

So what have we learned from this lesson:

1. We learned how to create a creeps health bar
2. We created two new towers that we can click on and place
3. We created a tower that does “splash damage”
4. We also create a tower that slows enemies down as they pass

We still have a long way to go to making a complete game, but it’s already shaping up to being a fun time. We still need to upgrade the towers and give information about each as well as a score and gold! We have a lot to do, but we’re moving fast.

How to build a tower defense flash game – Part 7 - Gold and Upgrades!

In this article today we are going to do so many things:

1. Creeps can now die
2. We will make *WAVES of CREEPS* with different groupings and speeds
3. We’ll add in some in game messaging
4. Lastly, creatures that make it all the way around will attack again

Are you excited, well then lets get right into it. This is what we’ll have at the end of the tutorial:

Yeah, you’ll know how to make that at the end of this one article. Each creep has an increasing number of hit points after each wave, starting at 40 and going up to the final boss on wave 6 at 6000. Don’t worry I didn’t limit you with the burden of money yet, so you should have no problems. Just place as many towers as you need to get the job done!

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

Ok before we go over the code, lets first quickly overview what I added and where.

# In the instance of “Creep” > “CreepList” I added 5 additional frames of Enemy images in the “Creeps” layer

• We now have three new functions “kill”, leak and inGameMessage
• the function kill, removes the instance of the enemy and if it matches the number of kills for the wave it starts the next one
• the function leak, starts the enemy back at the first waypoint once it gets to the last one
• the function inGameMessage, records to the screen all text that calls it
• We added the “_root” variables “kills”, “creepLeaks”, “waves” and “wave”
• We added “health”, “maxhealth” and “isDead” as parameters to the enemies object.
• We also added “damage” to the projectile.

I know that looks like a lot, however, it makes logical sense - I swear. Basically what we are doing is giving the creeps health and a way to take that health away from them (the projectiles). Each time the projectile hits a given enemy it does a little bit of damage to it. Once the enemies health falls below zero, we remove the instance of it. To make this happen we add an additional parameter to the code in the “spawn” function such that when the creep is created we give it a certain amount of health. Where do we get this parameter to put things in? Good question, here it is

This is where we customize our waves! It’s a pretty straight forward multi dimensional array. Right now we only concern ourselves with the number of attacking enemies, the health of them, the speed they travel at and the speed between releases.

It gives us the ability to do some pretty cool combinations. How about Groups - Set the release time to something small. How about fast enemies - set a high speed. You want to make a boss? Set the number to 1 and give it a ton of health. Done.

Now lets see how we put it all together.

Another important function that directly impacts how we handle the creeps. The “fire” function is called we now pass in an additional parameter that accounts for the damage that projectile will do.

The code in the fire function is just this

• r.damage = damage;

and later one in the “r” onEnterFrame, we do the check to see if we killed it with this shot - If we did we mark the “target enemy” as dead. The below code is placed right between the call to “Explosions” and the “this.removeMovieClip()” for the projectile.

this.targ.health = this.targ.health - this.damage;
if (targ.health <= 0)
{
	targ.isDead = 1;
}

Once we have this code in the projectile, it’s a trivial matter to put the check in the onEnterFrame for the creep itself to see if it’s health has reached zero as I have done, or if isDead=1.

if (this.health <= 0)
{
        _root.kill(this);
}

So now wen the projectile removes the damage from the creep and his health falls below zero the creep calls the kill function and we do the clean up.

The kill function as describe above, simply removes the creep movie clip and increases the number of kills. We make an additional check to see if that total number of kills matches the number of kills required to finish the level. If this is the case, we call out “newLevel” function - A function we’ve used since the first tutorial.

The leak function will be used later on to have the player take damage. Right now however, we use the function to update the position of the enemy and have them start back at the beginning of the waypoints.

This is how we post text to the screen and give updates to the player - It’s currently a simple log windows that keeps the most active text history at the top. It is useful to give the player information about what is currently happening on the screen - What wave are we on? What type of creeps are attacking? etc. We’ll expand on this later as well.

This code directly impacts the towers ability to enemy targets. We use the “” + creep == “” to determine if the creep that the tower that has targeted in fact is still alive. If it has already been destroyed we would catch it here and set our target to zero and pick another enemy target.

Ok, that’s it for another tutorial - We still have a lot to do! We still need to do upgrades, info, special towers, special creeps. So look forward to another tutorial soon.

How to build a tower defense flash game – Part 6 - Tower Powers!

You can click here to go back to the introduction

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!

If you’ve been diligently following the past 2 part of the series (”part 1 - Waypoint and Enemies” and “part 2 - Placing towers”) you know that currently both the towers and the creeps don’t rotate. Now that’s fine for hot air balloons and flying saucers, but people turn in the direction their either walking in or shooting in. So to this end we have to add a few new abilities.

• Towers need to be able to target the nearest creep
• Towers need to face in the direction of the creep they’re targeting
• Creeps need to rotate when they move in a specific direction

Before we begin, if you haven’t read How to build a tower defense flash game – Part 1 - Waypoints and Enemies or How to build a tower defense flash game – Part 2 - Placing Towers
, you should go back and read them since this article builds on the ideas started there.

Also, the source code for this tutorial can be Downloaded Here.

Well lets get right in it - To have a successful game we need to have a “somewhat” realistic enemy. Movie people say something like “level of immersion” quality - If all of a sudden in the middle of the lord of the ring series Frodo and the gang where running from the black rider and you saw a boom mic over the black riders shoulder, you’d say “that’s not right - this movie sucks”. As a matter of fact, you would be right. The movie producer could have the best movie ever, but without keeping the movie goer engaged they realize they are just watching a movie. An expensive movie.

As game developers we have a tough job ahead of us too, making a game that also engages the player. However, we don’t want to be too bogged down with the tedious stuff to make it real, making things real is expensive in time and energy. So we do what true game developer do - we fake it.

This code is added to the “spawn” function on the main timeline and is run every frame for the creep. What it does is simple - It takes the current direction that we are looking in (we already know how far we had to travel based on radians) and add a bit of randomness.

• Math.sin((getTimer() + this.rnd * 100) / 100) * 7

The above code returns a number between -1 and 1, which is then multiplies by 7 and added to the current direction (which is in degrees) to give the impression of unique movement. What I mean is that we take the most direct path to the waypoint and then add a randomness of +7 or -7 to give it a some realism. The creep will look partially in the direction that it is moving giving the impression of more expanded movement.

The “if” and “else if” statement are just to make sure that the roation stays between -10 and +10 of the rotation. Again, we could have just had the code as “this.r = this.dir” and set that to the _rotation, but there is no fun in a completely straight line of troops following a path. Always try to mix is up a bit!

So now we get to the fun - First we want to deal with how the tower picks a target. So lets go straight to the code:

++lastChecked;
if (lastChecked >= rate)
{
lastChecked = 0;

Since there is no needs to slow everyone computer constantly checking if the tower has a enemy in it’s “range” - We keep a counter going for the last time this particular tower checked for new enemies. This prevents from tedious “Math.sqrt” from being called once a frame for every tower we have out.

• if (target == 0 && _root.creepArray.length > 0)

We also make a check for it the tower in fact alreay targeting a creep (the target variable would be “1″) or if the creepArray is empty (meaning that there are currently no enemies on the screen).

• for (i = 0; i <= _root.creepArray.length; i++)

Given that we don’t already have a target and that there are creeps on the map already, we can go ahead and traverse the array of creeps.

The variable “d” is the distance from the inidividual creep to the tower itself. This is a basic version of the code we used to move a “creep” closer to a “waypoint”. If the distance (the variable “d”) falls within the range of the tower we want the tower to track that enemy.

Side note about targeting enemies
Depending on what container you use for your creep list (We use a simple array, but this is by no means the only way) and how you traverse that list you may have unexpected targeting issues - you could have your tower track only the furthest enemies by keeping a variable of the farthest creep range that fall in the range of the tower. I will list just one

So since WE store the creep list in an array and since WE are traversing the list (i = 0, 1, 2, … , N) the code above will always track the last creep to appear in a tower range. If you didn’t understand I mean assume that we have a tower has three creeps in its sight. Once the first creep leaves the towers range, the tower will now be looking for a new creep to target. The tower will target the next creep in the “for loop” next and recognize that he is the next one farther along - However, since we don’t stop traversing the list at that point the tower will eventually pick the farther one back. Therefore, it is possible, given the code above, to actually have multiple towers along the road and have every other creep that comes out to never be targeted and therefore killed.

To solve this problem, we can put a “break;” in after line 39.

In the next tutorial we will be combining both the first and forth article we will now add the ability to destroy the creeps. You can Click Here to go back to the introduction

For the next tutorial our next subject is How to build a tower defense flash game – Part 4 - Starting the tower attack!