Emanuele Feronato

Talking about Tower Defense game, and 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.