Make a Flash game like Flash Element Tower Defense - Part 1
Filed Under Flash •
November 11th update: part 2 released
One of the most popular Flash games around the web during last months was a game (with some variants) called Flash Element TD, "a Macromedia Flash based Warcraft TD game inspired by Element TD for WarcraftIII", as says its author, David Scott.
The game concept is simple: there is a road, and some minions walking that road. You have to kill all minions before they reach the end of the road. You can build several facilities to kill minions and earn money to upgrade weapons as the minions get stronger and faster.
In this first part of the tutorial, I'll cover the minion walking.
It's a very complex task, that will require almost 30 lines!
Let's start showing the objects required to make it work
minion: it's the evil enemy to kill. I think a blue triangle should look evil enough.
path: it's the background where the game will take place
Now, a few words about how to develop the concept: in this game there is not enemy artificial intelligence. Enemies walk along a path until they die. This simplifies a lot our work, because the only thing we need to do is to create a list of waypoints defining the path. When an enemy reaches a waypoint, I'll make it reach another waypoint.
Let's see the actionscript, all in the first (and only) frame of the main (and only) scene.
-
attachMovie("path","path",_root.getNextHighestDepth());
-
waypoint_x = new Array(40, 140, 140, 220, 220, 80, 80, 340, 340, 420, 420);
-
waypoint_y = new Array(140, 140, 60, 60, 240, 240, 320, 320, 100, 100, -20);
-
delay = 25;
-
new_monster = 0;
-
monsters_placed = 0;
-
onEnterFrame = function () {
-
if (monsters_placed<25) {
-
new_monster++;
-
}
-
if (new_monster == delay) {
-
monsters_placed++;
-
new_monster = 0;
-
min = attachMovie("minion", "minion"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:40, _y:-20});
-
min.point_to_reach = 0;
-
min.speed = 1;
-
min.onEnterFrame = function() {
-
dist_x = waypoint_x[this.point_to_reach]-this._x;
-
dist_y = waypoint_y[this.point_to_reach]-this._y;
-
if ((Math.abs(dist_x)+Math.abs(dist_y))<1) {
-
this.point_to_reach++;
-
}
-
angle = Math.atan2(dist_y, dist_x);
-
this._x = this._x+this.speed*Math.cos(angle);
-
this._y = this._y+this.speed*Math.sin(angle);
-
this._rotation = angle/Math.PI*180-90
-
};
-
}
-
};
Line 1: Attaching the path object on the scene
Line 2: Defining an array containing all horizontal coordinates of the waypoints
Line 3: Same thing for the vertical coordinates. Now waypoints are defined, so the minions will walk until (40,140), then until (140,140), then (140,60) and so on.
Line 4: Setting the delay, in frames, between the creation of the xth enemy and the creation of the (x+1)th enemy.
Line 5: A flag variable counting how many frames passed from the creation of the last enemy
Line 6: Variable telling me how many enemies I have placed so far
Line 7: Beginning of the main function, to be executed at every frame
Line 8: Checking if I haven't already placed all 25 monsters I want to place
Line 9: If not, increase the variable counting how many frames passed from the creation of the last monster
Line 11: If the number of frames passed from the creation of the last monster is equal to the number of frames I want to pass after the last monster creation...
Line 12: Increasing the variable counting how many monster I placed. I am about to place a new monster!
Line 13: Setting the variable counting how many frames passed from the creation of the last enemy to zero
Line 14: Attaching the monster movieclip outside the screen, because I want it to enter "from above", and assigning this object to a variable called min (from "minion")
Line 15: Assigning to the minion (I started with "enemy", then "monster", now "minion"... someone should strike for blue triangles rights!) a variable with the number of the next waypoint to reach: zero, because the first element in an array is indexed with zero.
Line 16: Assigning to the minion a variable with its speed. This will become handy in future, when minions will change waling speed during the game
Line 17: Function to be executed at every frame for the minion
Line 18: Calculating the x distance from the current minion position and the next waypoint
Line 19: Same thing for the y distance
Line 20: Checking if the sum of both distances is less than 1 (approx: did the minion reach the waypoint?)
Line 21: If true, then increase the waypoint flag to make the minion move to the next waypoint
Line 23: Determining the angle of the minion according to its direction using trigonometry. If you have troubles with trigonometry, I recommend you to read this tutorial
Line 24: Updating minion's x position according to its direction and speed
Line 25: Same thing for its y position
Line 26: Rotating the minion facing the direction it's walking.
And that's it. The first part is over. You may need to reload the page to see the movie working.
Download the source code and give me feedback
Then move to part 2.
Tell me what do you think about this post. I'll write better and better entries.
(12 votes, average: 4.5 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
102 Responses to “Make a Flash game like Flash Element Tower Defense - Part 1”
Leave a Reply
Trackbacks
-
Games » Make a Flash game like Flash Element Tower Defense - Part 1 on
October 6th, 2007 11:49 pm
[...] unknown wrote an interesting post today onHere’s a quick excerptOne of the most popular Flash games around the web during last months was a game (with some variants) called Flash Element TD, “a Macromedia Flash based Warcraft TD game inspired by Element TD for WarcraftIII”, as says its author, … [...]
-
GadgetGadget.info - Gadgets on the web » Make a Flash game like Flash Element Tower Defense - Part 1 on
October 6th, 2007 11:58 pm
[...] biskero wrote an interesting post today!.Here’s a quick excerptOne of the most popular Flash games around the web during last months was a game (with some variants) called Flash Element TD, “a Macromedia Flash based Warcraft TD game inspired by Element TD for WarcraftIII”, as says its author, … [...]
-
www.gamesandgames.info » Make a Flash game like Flash Element Tower Defense - Part 1 on
October 7th, 2007 8:41 pm
[...] Emanuele Feronato wrote a fantastic post today on “Make a Flash game like Flash Element Tower Defense - Part 1″Here’s ONLY a quick extractOne of the most popular Flash games around the web during last months was a game (with some variants) called Flash Element TD, “a Macromedia Flash based Warcraft TD game inspired by Element TD for WarcraftIII”, as says its author, … [...]
-
Make a Flash game like Flash Element Tower Defense - Part 2 : Emanuele Feronato - italian geek and PROgrammer on
November 6th, 2007 9:35 pm
[...] Welcome to the 2nd part of this tutorial. I recomment you to check part 1. [...]
-
Hoi! Koffie? » Tower “Addiction” Defense on
November 24th, 2007 9:06 pm
[...] Make a Flash Game Like Flash Element Tower Defense - Part 1 [...]
-
Oman3D.com » Blog Archive » Best of the Internet - November 2007 on
November 30th, 2007 8:30 pm
[...] Flash Game Tutorial - Element Tower Defense [...]
-
A Gem of Flash Game Tutorials | Newbie Game Programmers on
December 17th, 2007 4:22 pm
[...] a couple of hints on how to make these Tower Defense type games. This is when I came across a post Make a Flash game like Flash Element Tower Defense, but instead of finding 1 great Gem, I found an entire website worth of [...]
-
Desenvolvimento de games « O Coice da Girafa on
January 25th, 2008 3:36 am
[...] Desenvolvimento de games Emanuele Feronato - Parte 1 [...]
- digitalt skapande » Tower Defence on April 21st, 2008 2:49 pm
-
Adobe Flash CS3- AS3 and AS2 game tutorials roundup | Lemlinh.com on
August 19th, 2008 6:35 pm
[...] Part 1 [...]
-
Adobe Flash Tutorials Part 2 on
September 9th, 2008 4:15 am
[...] Tower Defense the concept is : there is a road, and some minions walking that road. You have to kill all minions before they reach the end of the road. You can build several facilities to kill minions and earn money to upgrade weapons as the minions get stronger and faster. [...]
-
Latest MochiAds Games
Wicked…
You never fail to amaze me. All those culy braces :)
Wow, i’ve been looking for a tutorial like this ever since those sort of games have started being made. thanx a lot.
AMAZING!!! Can’t wait for part two!!!
Wow,
I’ve been visiting your blog for quite some time now….I’ve Learnt so much from you. Its been some time since i wanted to make a flash version of my fav game(DotA). N i’ve been trying to find a good path findin AI ideas for it,as flash is not very good at handling complex algorithms.And As usual u again have given me a new idea to play around with. Keep up the good work.
Good as usual, emanuele. Keep it up.
Frederik J
great tutorial thanks
nice one, i edited the MC and added a few frames to it so that the MC changes whilst it moves
Hi Emanuele.
I’m one of those who check your site several times per week, searching for new fantastic tutorials.
I have one suggestion that would make this game-tutorial REALLY great: Make it OOP. This game is a incredibly suitable game for Object oriented programming, and I think you could add a entirely other dimension to the tutorial if you followed this tip.
Kindly,
Samuel
what program did he use because i really wanna make games so could any1 tell me the program name?
???
to hard :D, needs more basic info
Really great Tutorial!
Please make a second one.
Thanks.
thanks for the info mate,
having problems opening the source codes when i try opening it in flash mx 2004 i get unexpected file format error message. am i using the right program?
Hey, i set the min.speed to 5 and I had some problems where the minions jumped around in one spot.
other wise this is a sweet tutorial wheres waiting for part 2!
Can’t wait for part 2. I’ve been wanting to create a game like this for awhile and have just started working on it. GLad i stumbled across your blog.
Im really looking forward to part 2, is it comming out soon? noowhere else offers a tutorial on how to make a tower defense game and i really want to make one..
wow.. that was amazing script…
Can U make those script more great, by adding the AI script to generate an array of waypoint. :)
thx alot 4 the tutorial…
This is a great tutorial, but I’m having a problem. If my path is not the same as the given one, how do i find out the coordinates of a selected area?
You can find it through mouse coordinates.
In your main function write
trace(_root._xmouse+” “+_root._ymouse)
then move the mouse and copy coords
Oh.. Thanks a lot, I’m kind of new to flash.
wait.. sorry for double posting but, I’m not sure where to put that code (I’m using Flash Pro 8)?
Hey zack, i did simpler to get coords i think, i just use the window->info panel (or CTRL+I) and while having the focus on the actions window, i move the mouse around the waypoints.
One little bug is commented by Joshua threlfall, if u make the speed greater than 1 u will get in troubles, this is because….well i dont knowhow to explain i expect that only telling the patch u can understand why doesnt works in that manner
Just put this in line 20:
if((Math.abs(dist_x)+Math.abs(dist_y))Its a simple matter of gap jumping, u know.
Oh zack, u must put this code in the first frame of a new layer(created by ur own) called actions by example, selecting the first frame and then open the actions window, paste inside it, be sure of the lower title name is actions:1
Sorry for my terrible english.
Congrats by the tut. :D
sorry, the line was incorrect, it was cutted in an amazing manner i dont know, the correct is(line 20):
if((Math.abs(dist_x)+Math.abs(dist_y))
urmphh?? sorry again but the post doesnt works well and cut the essential part so i look like a mad….
The patch is simply reemplace the “if(…
hahaha this seems a joke, all time cutting my posts i dont know why. The patch. reemplace in line 20 “if(…<1)” by “if(…<this.speed)
Reasons r more or less explained 3 posts before
Sorry for spaming, the problem was the “<” what is an html reserved char and u must write “ampersand + lt”, and first i was disoriented
I apologize for the inconveniences, sorry for my stupidity xDD
error again, i dimiss
Last chance, i swear xD
Line 20:
if((Math.abs(dist_x)+Math.abs(dist_y))< this.speed) {
Whenever I put the code in the main frame for the if satement to dry to generate a new enemy….My editor just crashes, so I can never get it to run. Any suggestions?
i like cds!
Flash MX 2004
He used Macromedia Flash 8 pro
I really need help. I just started using this program and found tower defence games very fun. I don’t get how to get to the action script and i don’t get the commands. Do you have to have the items selected before you do those actions? i’mma noob at this ugh… x(
srry double posting >.
having to post again sorry but, why can’t my macromedia open your sources? keeps saying an error.
What program do you use?
wow, thats alot of action scripting, i never thought it would be that hard :[ i couldnt even figure out how you got the arow symbol and the background to show up with linkage export path or whatever :S
Cool! Will be part 3? With rotating base, and rotating bullets, and attaching new towers? It`s important … :/
greetings
I’m having some issues with the tutorial. For some reason the minion shows up on the screen and looks like its about to follow the path but as soon as the minion hits the background, it just restarts. Please help me
I think its something about the delay
actually when i put the new_monster = 0; in comment
if (new_monster == delay) {
monsters_placed++;
//new_monster = 0;
it works but theres only one minion that shows up. Any ideas???
Augh, im uber-new to flash. I tried to follow this tutorial but when i test movie, all these errors come up. I think its because of the actionscript. What am i supposed to do with it?
i need help, i cant seem to get the actionscript going. ive done everything it says, but nothin happens when i test it. Can anyone help me?
This works great except for the fact that when I run it nothing happens at all.
when i play i get no syntax error message but the minion just stays in one place
nvm, is has to do with linkage
however, as soon as i got it running, it only spawned one minion,
what is happening?
look this tut sucks it’s too hard to get. I’ve made every single thing but it doens’t work. Stop making these tuts you’re a horrible explainer
nothings moving -.- and Flash Pro 8
You need Flash CS3 to open the .fla’s given by Emanuele, but anyway, you can copy and paste the actionscript. Don’t forget to create the minion and path movieclips and to link them
link them???….MAN i’m an uber noob!
ya im in a simular situation, i made both movie clips and copied the script above but i dont understand linking
ok i got it to work. my “minions” are moving. but when i try to make them faster, they kinda stop at certain points. and stall there for…ever…. -.-
I solved what recently just posted from an earlier post but i have another question. When i test movie in the flash, it’s alright. It works they’re all moving. But when i try the .swf the minions disappear after a certain point on the path (depending on speed) Any ideas?
it macromeadia flsh pro 8 im pretty sure :D
I’m having the same problem as stephany. I just copied the code after making my map and linking the stuff and everything, but whenever a new guy respawns, he moves a bit then just restarts. Any help?
Yeah, im getting a similar problem… every time I change the speed to 2 or something, they all get stuck when they turn a corner. Any ideas?
Nothing is working at all! Help! The minions don’t even appear on screen!
Somethings wrong…im using Flash MX and everything seems to work fine but my coords are all messed up…i put in my own…but they jump around the screen in the begining and they exaggerate the other waypoints…any help?
Eww.. Where do i download that program?
plss any suggestion on.
i already created the tutorial but theirs a problem in my work.
the minion that taking the path is only one. plssss any suggestion.. pllss email me at asaria_ja@yahoo.com
thxxxxxxxxxxxxxxx
thxxxxxxxxxxxxxxxxxxxx
Hello,
I am contacting you on behalf of http://www.flashcomponents.net . I’ve read one of your tutorials and I like the way you write. Our site is continuously growing and we recently added a tutorial section. We kindly ask for your approval to allow us to publish your tutorials on our site, mentioning you as the author.
Of course, we are inviting you to do it yourself, but either way, it would be our pleasure to publish them.
Kind regards,
Mike | Flash Components Team
i never made a game in my life befor
Wow, I never knew flash was pretty much EXACTLY the same as GML :D. Good thing I am fluent, world look out here I come :D. Fantasic tut mate, keep it up!
i am a beginner and i think u need to explain in more detail b cause i dont understand
this tutorial will do little for a beginner. I took a look at it and tried out some of the code, and I have since had to rewrite and replace almost all of it. It is good for hints how to solve some problems, but the code itself is not well suited for a full featured game.
Example: the use of clipExample.onEnterFrame = function is a bad tree to bark up. The variables that are loaded local to those clips do not update, such as array lengths. So, when that clip loops through arrays (each frame) it is using the length property it got when the clip was loaded.
what is the nme of the program u use?
What IS the program you used???
What IS the program you used???
PLEEEEEEEEEEEEEASE tell me where to download it!!!!!!!!!
Please, start from the beginning. What program do you use. Send me every step, please
It’s flash (CS3 being the latest version, this is actionscript 2 though).. You can download a trial at adobe.com. I would’nt reccommend starting with this tutorial though, it’s not for absolute beginners.
Linkage:
Right-click your symbol and choose linkage. Then check “export for actionscript”.
The “jumping” minion problem is caused by where you’ve set the registry point. It has to be exactly in the middle of you little dude.
OMG its only me or i dont anderstent on what should i sett the codes on the path or minions and when i copy the codes to the minion that i fink is the right i got 7 errors HELP pleas
Well personally i though this tutorial was easy, and i understood it all
i has a loader, money, kills
but i cant seam to make it so when minion gets to the end you lose a life, and then plays next level…
so how do i makes lives go down o.0??
Zackorith2@hotmail.co.uk
i understood everything else (Y)
i gotta say your tutorial for this sucks.what do i do after i draw the minion cause i really dont know you say stuff but u dont say do that and that .i dont know how to see the minion i just press timeline sfter i draw him and i dont see it on the right so where is it?arrg
i don’t get it to u need some softwar? if so wat one? is it free or not?
Thanks for the tutorial. I have a personal project that this is perfect for!
wtf? I copied ur actionscript, made 2 movie clips called minion and path
but nothin works
where is the main function thing so i can get to see the coordinates? could you just post a copyable picture of the path so i can copy and paste it?
YES!!!
i just L- O- V- E when my search works and the actionscript works and my own MODS work… XD
this is so awsome i cant wait to show my class :D ^^
Sorry for being so dumb, but what program is used? I really love TD’s and i got alot of spare time over. So i think I could try to make one, maybe it will be good :).
I would like to have an answer as soon as possible.
Linder
Hi. I’m using Macromedia Flash MX Professional 2004. I was wondering if anyone could help me get started with this. I can’t get this to work. Any help would be very much appreciated. You can reach me at mattbaumann@hotmail.com
OH the program is called flash. i have the flash 5. You can buy the new version 8 for like 100 dollars lol. Or you could get an old one. XD
this doesn’t work on flash five :(
Hello,
Just to thank you on a great tutorial it helped alot.
Dan
i was wondering could you translate this to actionscript 1.0? Flash 5 doesn’t use actionscript 2.0. Sorry for all the comments.
my minions do nothing but stnd still email me if you can fix this stickdude45@hotmail.com
this is cool but i need win rar
This is all great, but what do we do it on?
Is there like a program you used?
How can I make it with a lot of towers?
wooowww that is soo cool :D
Brandon, this is a little late, but if you don’t know what Flash is, then it will really be hard to make games, let alone use it. So anyway, the program he used is Macromedia Flash.
u guys are noobs