Part 5 : Firing The Missiles

Now that we have a finalized Player class, we need to go back to to HomeWars.as and add code to support Events coming back from the Player. The first thing we must do is go back to the fSTATE_INIT() function and add a line of code to have the HomeWars class subscribe to the EventFireMissile. The following line of code will do just that:

player.addEventListener("EventFireMissile", this);

Now we need to create the callback function that is executed when the EventFireMissile event is received from Player to HomeWars. The following function creates a new Instance if a Missile object (we will create this soon), set its speed, beginning location, finish condition, and set’s up the event listeners required to move() it, render() it, and remove it once it leaves the screen. After we have created the missile, we add it to an array named missiles with this code: missiles.push(tempClip); We do this so it will be easier to keep track of all the missiles on the screen.

function EventFireMissile() {
      var tempClip:MovieClip;
      var md:Number =  getNextMissileDepth();
      tempClip =  parentTL.attachMovie("FMissile", "missile" + md,  md);
      tempClip.setSpeed(10);
      tempClip.setFinishedY(0);
      tempClip.setLocation(player._x, player._y);
      tempClip.addEventListener("EventMissileOffScreen",this);
      this.addEventListener("Move",tempClip);
      this.addEventListener("Render",tempClip);
      missiles.push(tempClip);
     }

The function getNextMissileDepth() is used to attain a new depth for each missile that is fired. I’ve found that a function like this, along with a few variables makes it very easy to support obejcts that could have 1 to n number of instances on the screen at the same time. This function requires a MISSILE_MIN_DEPTH (the lowest depth a missile can be assigned), MISSILE_MAX_DEPTH (the highest depth a missile cab be assigned) and missileCount (a running total of all the missiles that have been fired). When missileCount reaches MISSILE_MAX_DEPTH, we reset it to 0. Why? Well In Flash, a MovieClip will replace any other MovieClip that is assigned the same depth. This why we made MISSILE_MIN_DEPTH = 2000 and MISSILE_MAX_DEPTH = 3000. This will give us more than ample room to to fire multiple missiles without the chance that any one missile will be assigned the same depth as a missile that is already on the screen. The code for this function is below:

function getNextMissileDepth():Number {
      missileCount++;
      if (missileCount+MISSILE_MIN_DEPTH > MISSILE_MAX_DEPTH) {
       missileCount = 0;
      } 

      return missileCount+MISSILE_MIN_DEPTH;
     }

Now that we have created code to instantiate missile objects, we must create a Missile class. Our Missile.as file will look like this:

import mx.events.EventDispatcher;
    class Missile extends MovieClip {
         var speed:Number =0;
         var nexty:Number;
         var finishedY:Number = 0;
         function Missile() {
              finishedY=0;
              EventDispatcher.initialize(this);
         } 

         public function setLocation(x:Number,y:Number) {
              this._x = x;
              this._y = y;
         }
         function setSpeed(s:Number) {
          speed = s;
         } 

         function setFinishedY(yn:Number){
          finishedY=yn;
         }

         function Move() {
              nexty = _y - speed;
         }

         function Render() {
          _y = nexty;
          if (_y < finishedY) {
           this.dispatchEvent({type:"EventMissileOffScreen", missile:this});
          }
     }

 public function addEventListener(){/*Interface Stub*/}
 public function removeEventListener(){/*Interface Stub*/}
 public function dispatchEvent(){/*Interface Stub*/}
}

At this point, much of this code should look relatively familiar. The only added feature here is the setFinishedY() function. We use this function to set the y position on the screen that, when reached, will tell us to remove this missile from the screen. If we were making a game that would allow missiles to fire in any direction, this would not work. However, since we know that our player will be at the bottom of the screen, firing UP, we can take a short-cut here and simply test to see if the current _y of the missile is less than finishedY. If so, we dispatch a EventMissileOffScreen event to the HomeWars object.

This line of code is very important for this to work. We’ve seen events like this earlier in the lesson, but do you seem something different here?

this.dispatchEvent({type:"EventMissileOffScreen", missile:this});

Yep. There is a second parameter: missile:this that is passed as part of the the callback to the event. This is how you can pass more data through an event than just a simple message that something has happened. This line of code works because the {} in the function call the dispatchEvent is a short way of saying both new Object()and assigning new properties to that object. In essence, we have created an object, set the event type and a reference to this missile object named missile. We’ll discuss why we do this in just a moment.

Now we must move back to HomeWars.as to finish-up our support for the missiles. Below is the function we will create to handle the EventMissileOffScreen event:

function EventMissileOffScreen(e:Object) {
  this.removeEventListener("Move",e.missile);
  this.removeEventListener("Render",e.missile);
  e.missile.removeMovieClip();
  removeMissile(e.missile);
 }

The first two lines of code (removeEventListener) in this function clean-up the Event listeners that we assigned to this missile object. We don’t necessarily have to do this, but it is a good practice to clean-up the remnants of objects you are about to destroy. Doing this can also help your code run faster, as the there will not be a bunch of references left for destroyed objects for HomeWars must iterate through when sending messages. This is also where we use the missile parameter that we specified in the Event we broadcast from the Missile object. All parameters passed by an event using dispatchEvent are passed to to that event through the Object parameter e that we have specified in our function definition.

Next we remove the Missile clip from the screen by calling e.missile.removeMovieClip(); ,and then we call a seperate function (removeMissile()) for removing the missile from our missiles array. We will need to remove missiles from the screen at other times (i.e when they hit an enemy) so a seperate function will be useful for us.

function removeMissile(missile:MovieClip) {
  var tempClip:MovieClip = null;
  for (var i=missiles.length;i >= 0; i--) {
   tempClip=missiles[i];
   if (tempClip==missile) {
    missiles[i].removeMovieClip();
    missiles.splice(i,1);
   }
  }
 }

The removeMissile() function above might look a bit odd, but it is a simple but useful tool for games that add and remove objects asynchronously. This function takes the missile parameter, and then iterates through the missiles array to find it and remove with a for() loop. It is a good practice to make any for() loop that is used to delete items from an array count backwards. This is because deleting an item from an array changes the length of the array. When the length of an array changes, the iteration get fouled-up, and will skip items. By counting backwards, you alleviate this problem. For this simple deletion, with only one object, it does not make any difference to our code. However, in the next lesson, when we add enemies and detect collisions, this will be become an essential construct for our collision detection routine.

Read the rest of the series: ‘Anatomy of a Flash Game’

  1. Anatomy of a Flash Game: Lesson 1 – Setting up the game
  2. Anatomy of a Flash Game: Lesson 2 – Creating Enemies & The Game Environment
  3. Anatomy of a Flash Game: Lesson 3 – MochiAds, MochiBot and MochiAds Leaderboards