Mr Sun Studios - Just another WordPress site

Step 1: Setting Up a Level

The tower defense genre is one that has become extremely popular over the years. Although they can become quite complicated to develop, they are almost always very fun to play. I am here to walk you through the creation of one of these games. Let us begin, shall we?

In this section of the tutorial, we’re going to set up the roads and stuff onto the stage. However, the first thing we need to do is create a blank flash document with a black background with the frames per second set at 24.

Now, we have to create two classes. In order to do this, simply create two external ActionScript files by selecting File -> New -> ActionScript File, twice. The first class we’ll create is one for an empty block that towers can be placed in. Add the following code to it:

package{
	//importing required classes for this to work
	import flash.display.MovieClip;
	import flash.events.*;
	public class EmptyBlock extends MovieClip{//defining the class as EmptyBlock
		private var _root:MovieClip;//creating a _root variable to access root easily
		
		public function EmptyBlock(){//this function will always run once EmptyBlock is called
			this.addEventListener(Event.ADDED, beginClass);//create a function that will run once
			this.addEventListener(Event.ENTER_FRAME, eFrameEvents);//create a enterFrame function
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root);//setting the _root as the root level
			
			this.buttonMode = true;//make this act like a button
			this.addEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);//adding function for mouseOver
			this.addEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);//adding function for mouseOut
			this.addEventListener(MouseEvent.CLICK, thisClick);//adding function for clicking
		}
		private function eFrameEvents(e:Event):void{
			if(_root.gameOver){//remove this and listeners if game is over
				this.removeEventListener(Event.ENTER_FRAME, eFrameEvents);
				this.removeEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);
				this.removeEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);
				this.removeEventListener(MouseEvent.CLICK, thisClick);
				MovieClip(this.parent).removeChild(this);
			}
		}
		private function thisMouseOver(e:MouseEvent):void{
			//changing the background so the user know's it's clickable
			this.graphics.drawRect(0,0,25,25);
			this.graphics.endFill();
		}
		private function thisMouseOut(e:MouseEvent):void{
			//changing the background back
			this.graphics.beginFill(0x333333);
			this.graphics.drawRect(0,0,25,25);
			this.graphics.endFill();
		}
		private function thisClick(e:MouseEvent):void{
			//we'll add code that'll make a turret be made later
		}
	}
}

I’ve commented the code extensively if you need any explanation. Now, save this file as “EmptyBlock.as” in the same folder as your source .fla file. Now, take the second external ActionScript file. We will turn this into a special block which will act as a marker for the road. There are going to be 6 types of this special block, the four different directional notifiers, and the start and finish block. They won’t look any different than any other block, but they will be very important later. Add this code to that second class:

package{
	//imports
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	public class DirectBlock extends MovieClip{//we'll call it a DirectBlock
		private var _root:MovieClip;//again, defining a _root
		private var directType:String;//what kind of special block is this
		
		//this time, we have to accept some values to make it easier to place, like the type and coordinates
		public function DirectBlock(type:String,xVal:int,yVal:int){
			directType = type;//set the directType so that all other functions can use it
			//add the required event listeners
			this.addEventListener(Event.ADDED, beginClass);
			this.addEventListener(Event.ENTER_FRAME, eFrame);
			
			//setting the coordinates
			this.x = xVal;
			this.y = yVal;
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root);//setting the _root again
			
			//making this into a 25x25 square
			this.graphics.beginFill(0x111111);
			this.graphics.drawRect(0,0,25,25);
			this.graphics.endFill();
		}
		private function eFrame(e:Event):void{
			if(_root.gameOver == true){//destroy this if the game's over
				this.removeEventListener(Event.ENTER_FRAME, eFrame);
				MovieClip(this.parent).removeChild(this);
			}
			//we'll add more code to this later
		}
	}
}

This will just set up the blocks. Now, we must return back to the main .fla file. Create a new layer to place actions in, and add the following code:

stop();

//setting vars to step in for turns and special blocks
var S:String = 'START';
var F:String = 'FINISH';
var U:String = 'UP';
var R:String = 'RIGHT';
var D:String = 'DOWN';
var L:String = 'LEFT';

var startDir:String;//the direction the enemies go when they enter
var finDir:String;//the direction the enemies go when they exit
var startCoord:int;//the coordinates of the beginning of the road
var lvlArray:Array = new Array();//this array will hold the formatting of the roads

lvlArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,R,1,1,D,0,0,R,1,1,D,0,0,R,1,1,D,0,0,
			0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
			0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
			S,D,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,R,1,F,
			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,
			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,
			0,R,1,1,U,0,0,R,1,1,U,0,0,R,1,1,U,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			];

//the names of these variables explain what they do
var currentLvl:int = 1;
var gameOver:Boolean = false;

function startGame():void{//we'll run this function every time a new level begins
	//right now we don't have any code
}

var roadHolder:Sprite = new Sprite();//create an object that will hold all parts of the road
addChild(roadHolder);//add it to the stage
function makeRoad():void{
	var row:int = 0;//the current row we're working on
	var block;//this will act as the block that we're placing down
	for(var i:int=0;i
Now, if you test out your game, you'll see nice little road set up for you. However, we need to keep that empty space in the bottom so we can add stats and other cool stuff.
Well, that concludes this first part of the tutorial. Next time we'll make it so you can add turrets!
Final Product

Source Files (Zipped)