• home
  • forum
  • my
  • kt
  • download
  • How to Create a Tower Defense Game in AS3 - Pt 1

    Author: 2009-05-11 10:09:17 From:

    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<lvlArray.length;i++){//creating a loop that'll go through the level array
    		if(lvlArray[i] == 0){//if the current index is set to 0
    			block = new EmptyBlock();//create a gray empty block
    			block.graphics.beginFill(0x333333);
    			block.graphics.drawRect(0,0,25,25);
    			block.graphics.endFill();
    			addChild(block);
    			//and set the coordinates to be relative to the place in the array
    			block.x= (i-row*22)*25;
    			block.y = row*25;
    		} else if(lvlArray[i] == 1){//if there is supposed to be a row
    			//just add a box that will be a darker color and won't have any actions
    			block = new Shape();
    			block.graphics.beginFill(0x111111);
    			block.graphics.drawRect(0,0,25,25);
    			block.graphics.endFill();		
    			block.x= (i-row*22)*25;
    			block.y = row*25;	
    			roadHolder.addChild(block);//add it to the roadHolder
    		} else if(lvlArray[i] is String){//if it's a string, meaning a special block
    			//then create a special block
    			block = new DirectBlock(lvlArray[i],(i-row*22)*25,row*25);
    			addChild(block);
    		}
    		for(var c:int = 1;c<=16;c++){
    			if(i == c*22-1){
    				//if 22 columns have gone by, then we move onto the next row
    				row++;
    			}
    		}
    	}
    }
    //run these functions at the start
    makeRoad();
    startGame();

    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)

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (36)
      Math Physics (18)
      3rd Party (10)
      Navigation (70)
      Actionscripting (228)
      Optimization (17)
      Animation (166)
      Projector (11)
      Audio (54)
      Special Effects (170)
      Backend (26)
      Text Effects (89)
      Drawing (34)
      Tips and Techniques (51)
      Dynamic Content (34)
      Tricks (8)
      Games (107)
      Utilities (23)
      Getting Started (96)
      Video (59)
      Interactivity (46)
      Web Design (35)

    New

    Hot