Tutorial: Create a Tower Defense Game in AS3 – Part 7


Written By MrSun at 8:07 am - Saturday, February 28th, 2009
Categories: Advanced Tutorials, All Tutorials, AS3, Flash, Game Development

Step 7: Finishing Touches

Welcome back! This part of the tutorial is where we just add all of the finishing touches to the game! Unlike the other parts of the tutorial, I won’t comment any of the code I give you, as the knowledge you have learned from this tutorial should tell you what’s going on. Luckily for you, there aren’t too many finishing touches for us to make, so your brain won’t hurt too much.

One of the things I want to do is show the player the range of the turret. If you’ve ever played a tower defense game, you you should know what I’m talking about. A translucent circle will appear to show the player how far the turret can shoot. We’re going to show this both when somebody hovers over an empty block and when somebody hovers over a turret. Let’s start with hovering over an empty block.

Lets first start by opening up “source.fla”. Add this code to the top. Don’t ask any questions… or else…

var rangeCircle:Shape = new Shape();
rangeCircle.graphics.beginFill(0x006600,.5);
rangeCircle.graphics.drawCircle(12.5,12.5,100);
rangeCircle.graphics.endFill();

Open up “EmptyBlock.as”, would you? Find the thisMouseOver() function and add the following code to it:

_root.rangeCircle.x = this.x;
_root.rangeCircle.y = this.y;
_root.addChild(_root.rangeCircle);

Find the thisMouseOut() function and add this code to it:

_root.removeChild(_root.rangeCircle);

Add the same thing to the thisClick() function and the work will be done for empty blocks. Now, let’s do the same thing for Turrets.

Open up “Turret.as”. Add this code to the Turret() function (the main function):

this.addEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);

Next, add these two functions to the end of the class:

private function thisMouseOver(e:MouseEvent):void{
	_root.rangeCircle.x = this.x-12.5;
	_root.rangeCircle.y = this.y-12.5;
	_root.addChild(_root.rangeCircle);
}
private function thisMouseOut(e:MouseEvent):void{
	_root.removeChild(_root.rangeCircle);
}

Good stuff. Now, it should work if you hover over the turrets.

Now, what else can we add to our little game? The answer is: it’s up to you to decide what to add. It’s also up to you to use what you’ve learned to do it right. Thank you and good night.

Final Product

Source Files (Zipped)

9 Comments

Link Post Sunday (1) | Freelance Flash Games News:

[...] Sun is posting again with a slew of tutorials on how to build a tower defense game using [...]


k1ds:

hey man
How to let the enemy find the road itself?
(自动寻路功能)
thx lot


Luis:

This is so cool :D


SHOCK x10:

Hey dude, check your level restart… there’s a bug where the game ends and the user clicks to restart. Upon restarting there are too many enemies left to spawn, but only the starting number (16) spawn. Thus if you either kill them all or sit back, you will be stuck on level 1.
One way would be to clear the number of enemies
Another would be to reload the flash file

Currently my temp. fix is for 10 lives so the user dies if they fail to place a turret- and they begin with $20.


Mike:

I am trying to put this TD engine into a movie clip that is not the root, but it will not work…any suggestions?


MartinThatcher:

Hey, I love this tutorial, but I’m getting an error 1010 if I beat the game by letting the last enemy get away. Any ideas on how to fix that?


Luke:

This is just a note to anyone looking for a fix for the glitch mentioned above.

I was able to fix this problem by finding the line in frame 1 where the variable ‘enemiesLeft’ was declared, and set it to 0. This will automatically reset the enemiesLeft when the game is restarted, fixing said problem.


Iktwo:

Hey, I haven’t fix the bug, does anyone have?


lums:

i know this is old, and many people may not be looking at it anymore, but i would like to resolve an issue i have when the game ends, and the mouse is near the bottom of the screen, the rangeCircle stays on the screen, and then a bunch of #1009 errors come up, and the game does not work properly after. any idea how i can fix this and make the rangeCircle dissappear?


«
»