Be my fan on FacebookMake a Flash game like Flash Element Tower Defense – Part 1
- October 6, 2007 by Emanuele Feronato
- Filed under Flash | 138 Comments
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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.
(79 votes, average: 4.58 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
138 Responses
Leave a Reply
TUTORIAL SERIES:
- Una guida completa al gioco del poker online e una selezione dei migliori casino online.
- casino online
- migliori casino online
- BlackJack online
- casinò online
Wicked…
You never fail to amaze me. All those culy braces :)
[...] 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, … [...]
[...] 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, … [...]
Wow, i’ve been looking for a tutorial like this ever since those sort of games have started being made. thanx a lot.
[...] 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, … [...]
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..
[...] Welcome to the 2nd part of this tutorial. I recomment you to check part 1. [...]
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.
[...] Make a Flash Game Like Flash Element Tower Defense – Part 1 [...]
What program do you use?
[...] Flash Game Tutorial – Element Tower Defense [...]
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.
[...] 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 [...]
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?
[...] Desenvolvimento de games Emanuele Feronato – Parte 1 [...]
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.
[...] Part1: http://www.emanueleferonato.com/2007/10/06/make-a-flash-game-like-flash-element-tower-defense-part-1... [...]
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?
[...] Part 1 [...]
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
[...] 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. [...]
hey emanuele this tut is awesome but… the thing is that when I load the source it says unexpected file format… so I need help
Please… My Minimon not moving att all…
Please Help Me….
[...] http://www.emanueleferonato.com/2007/10/06/make-a-flash-game-like-flash-element-tower-defense-part-1... [...]
please help! i got the minions to walk okay and everything but i want them to be spaced out more! how can i do this?
never mind my minion was a little to big!
Yes, i have the same problem as “a person who needs help on October 14th, 2008 2:58 am” I would like to try this out so if anyone could help me, send me an email at tomolom100@hotmail.co.uk Thanks alot everyone…and by the way, good tutorial!
What am i using to create the path and arrow
Im using flash pro 9 but using action script 2.0. When i put in the code (copy paste) i need to delete the numbers. Afterwards i check it and it says i need on clip event handler. so i put that in. then i run the game and the minion just stands there like its retarded. can you help me?
HELP
is this all done in LOGO???? or some other web sight!!! lol man i sound nooby =(
PLEASE HELP
Could you please help me. what is that program called that you are using? message me please!
[...] Make a Flash Game Like Flash Element Tower Defense Flash Element TD is awesomely addictive. Learn how to create your own. [...]
okay.. ive done it all, but there are 14 errors,
some one please make a video tutorial on this, message me on http://www.youtube.com/aldeed
~Thanks
sombody here made this successfully with no problems?… i got 1 big problem…
when i start gamae my minions are walking… when they look like they gonna start walking the road, they restart? and only 1 mob i got walking… Could it be the one mob that gets summoned there for starting as a “new mob”?
answer on jesper.j.b.baunsgaard@gmail.com (email) plzz
wat program have u used
Everybody, the program is Macromedia Flash, a program that you have to buy at adobe.com…
Great tutorial, but I think you made it too complex for the absolute beginners, you might want to explain it a TINY bit more. Or start more basically.
this doesnt work!! it only works when i Dl the source file
Nice tutorial, but why did this page open up at least 10 popups and try to attack my computer? When I clicked on this page the popups came up and then Norton said that iijyjcthr.com tried to attack my computer.
[...] are some more nice links: A list of game tutorials A pool game with high scores tutorial Tower Defense tutorial Matching game tutorial A blog that supposedly has amazing Flash resources, although I haven’t [...]
To most, this tutorial would seem daunting yet they don’t know what A LOT of coding is…30 lines is beginning stuff. If they want to know hard flash coding then they should take a look at some of my games I’ve created (spaceInvaders, recreation of bloons tower defense, etc) that takes up about 8-15 external action scripts worth of code
but the tutorial was pretty good…i needed some ideas on how to improve my bloons tower defense game
i think i might have found a couple of ideas
overall though you have great ideas in coding which would even help me out cause i have the problem of having repetitive lines of code making a function last sometimes up to 100 lines
I just curious how do you make all space between the lines in the roads even.
[...] View Tutorial No Comment var addthis_pub="izwan00"; BOOKMARK This entry was posted on Thursday, July 2nd, 2009 at 8:38 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Make a Flash game like Flash Element Tower Defense…
Learn how to make a Flash game like Flash Element Tower Defense…
o_0 need help it didnt work it keep complianing that it must appear onclipevent all other stuff
ok im confused
1 where do i input all this txt is there a certain software?
2 how do i make the towers the bullets the minions and the background? do i just draw them or something?
3 how would i know where the waypoints would be
plz e-mail me if u have an answer
flamethrower550@comcast.net
hi i have done everything right i created the movie clips linked them and copied the Action Scripts.
it works fine apart from the “path” movie clip is in the upper left hand corner i was just wondering how to move it to mach the way points.
thanks oh and great tut
wicked sick so that is how u do it
how come all the action code things just go up to the 8th line and stuffs the rest in there
Does anyone know a similair tutorial in AS3?
it doesn’t work for me!
How do u make a path? and how do i add the actionscript? please help a person that knows nothing!
i just got flash cs3 and want to know… HOW THE HELL DO YOU GET INTO THE PART OF FLASH WHERE YOU CAN ADD TEXT (as shown on diagram 1)
want to a tutorial of flash game
In my swf. My minions won’t move and I only have 2 scenes. The main menu and the game. Please send me the fla to see what I did worng or upload to youtube.
i alrdy hav a game goin i just need 2 no how 2 make a tower
i cant get mine 2 work it installs but goes on to the downloaderits boring
Hei Emanuele! Please!
Do an AS3 tutorial!
Thanks!