Step 3 in Building a Shooter Game in AS3

January 19th, 2010

In step 1, we made our ship move around the screen and in step 2, we made it so it can fire lasers. Now we have to give it something to shoot at.

This is similar to what we did with the lasers in step 2 but to get the enemies to appear on the stage, we just need to do a few things, declare a variable that will set the number of enemies and add a for loop to our code.

Make your ship in your .fla, convert it to a movieclip, call it Enemy and Export it For ActionScript, it should say Enemy there as well. Delete the ship from the stage, you just need it to be in your library.

Now add this to your list of variables in the code you have in your .fla:

1
var nrEnemies = 6;

and then at the bottom of your code, add this:

1
2
3
4
5
for (var i=0; i<nrEnemies; i++)
{
    var enemy:Enemy = new Enemy()
    addChild(enemy);
}

Now, just like with the lasers, we have to make a new ActionScript file to control our enemies, File > New > New ActionScript File. Save it in the same folder as your .fla and the Laser.as file, call it Enemy.

Our package is going to look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package
{
    import flash.display.MovieClip;
    import flash.events.Event;
   
    public class Enemy extends MovieClip
    {

        public function Enemy():void
        {
           
        }
    }
}

Pretty simple, we’re importing MovieClip and Event because those are the only two classes we’re using for our Enemy class. Now let’s fill this out. We have four variables, add them after the class statement but before the function:

1
2
3
4
private var _root:Object;
private var enemySpeed:Number;
private var timer:Number = 0;
private var dir:Number;

Just like with our Laser class, we have the variable _root to bring in our stage info. Next we set up the variable for the speed our enemy ships are going to travel, we aren’t assigning it a number here because we’re going to set it up so the number is random for each enemy. timer is going to be used to change the direction of our ships so they they aren’t just flying straight across the stage. And dir is the direction that our enemy ship is going.

Inside the Enemy function add:

1
2
addEventListener(Event.ADDED, addClass);
addEventListener(Event.ENTER_FRAME, moveEnemy);

Pretty much the same as our Laser class, we’ll run the addClass function when the enemy ship is added to the main stage and then every frame we’ll run the moveEnemy function. And since we’ve added some event listeners, we better write the functions. First, we’ll write the addClass function.

1
2
3
4
5
private function addClass(e:Event):void
{
    _root = MovieClip(root);
    addShip();
}

Inside our addClass function, we have the same line as in the Laser class, _root = MovieClip(root);. But we also have addShip();. This triggers an addShip function instead of having another event listener. Add the function right after addClass.

1
2
3
4
5
6
private function addShip():void
{
    this.x = 600;
    this.y = Math.random() * 400;
    enemySpeed = Math.ceil(Math.random() * 5);
}

What the addShip function is doing is assign the enemy ship’s position, x is always 600, off the stage and the y is random. We multiply the number Math.random() generates by 400 so that the
enemy will appear anywhere between 0 and 400. And we finally assign a value to our enemySpeed variable. Math.ceil rounds the number off and we generate a speed between 1 and 5. Next we’ll add the moveEnemy function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private function moveEnemy(e:Event):void
{
    this.x -= enemySpeed;
           
    if (this.x < 0 - this.width)
    {
        addShip();
    }
    if (timer >= 25)
    {
        dir = Math.ceil(Math.random() * 2);
        timer = 0;
    }
    if (dir == 1) {
        this.y -= 1;
    }
    else if (dir == 2) {
        this.y += 1;
    }
    timer ++;
}

This is where we’ll control the movement of our enemy ship. We assign the subtract enemySpeed from the x position of our enemy ship it have it move right to left across the stage. Next we check to see if the enemy ship’s x position is less than zero. If it is, we run the addShip function again, which will move the enemy ship back to the right side of the stage so it can attack again. Then we’re checking to see if timer’s value is over 25, if it is, we assign dir a value of either 1 or 2 and reset timer back to zero. Depending on the value of dir, the enemy ship will either move up or down at the rate of 1 pixel per frame. Finally we add one to timer with timer++ at the end of the function. The two if statements at the end are what will make our enemy ships travel up or down but they won’t constantly switch back in forth, because the value of dir is random, it could be 1 four times in a row or it could constantly switch. This will give our enemies a little more life to them and make the game more interesting.

Now you should have something like this:

Here’s the complete code for Enemy.as:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package
{
    import flash.display.MovieClip;
    import flash.events.Event;
   
    public class Enemy extends MovieClip
    {
        private var _root:Object;
        private var enemySpeed:Number;
        private var timer:Number = 0;
        private var dir:Number;
       
        public function Enemy():void
        {
            addEventListener(Event.ADDED, addClass);
            addEventListener(Event.ENTER_FRAME, moveEnemy);
        }
       
        private function addClass(e:Event):void
        {
            _root = MovieClip(root);
            addShip();
        }
       
        private function addShip():void
        {
            this.x = 600;
            this.y = Math.random() * 400;
            enemySpeed = Math.ceil(Math.random() * 5);
        }
       
        private function moveEnemy(e:Event):void
        {
            this.x -= enemySpeed;
           
            if (this.x < 0 - this.width)
            {
                addShip();
            }
            if (timer >= 25)
            {
                dir = Math.ceil(Math.random() * 2);
                timer = 0;
            }
            if (dir == 1) {
                this.y -= 1;
            }
            else if (dir == 2) {
                this.y += 1;
            }
            timer ++;
        }
    }
}

4 Responses to Step 3 in Building a Shooter Game in AS3

  1. Pingback: Tweets that mention Step 3 in Building a Shooter Game in AS3 -- Topsy.com

  2. sharedtut says:

    hahaha i love it.

    thank you for showing how this was done.

  3. Pingback: Step 4 in Building a Shooter Game in AS3

  4. Pingback: Step 5 in Building a Shooter Game in AS3

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>