But, I also wanted to let you know how easy it is to use classes that other people author.

As you can see, I have collision detection working. And I barely wrote any code. In fact the class that runs this is directly from Grant Skinner, who released his ProxmityManager class on his site back in February. After reading Branden Hall’s blog using the same methodology as far as dividing the screen into a grid, and then, when the ship is in a particular block, it checks the neighboring blocks for asteroids.

Download the source files for yourself and check out Grant’s and Branden’s blogs for yourself.

I read several articles online. Looked at academic research on a Random Polygon Generator. The algorithms were mind boggling. I e-mailed some very smart ActionScript programmers for some help. None came (at least by the time of this writing).

Then it occurred to me… can’t I just rotate similar-sized squares and triangles appearing randomly to produce a randomly shaped polygon? Bet your ass I could

Download the source files.

So this release marks two changes that are related. One is the obvious — randomly shaped asteroids for a more unique experience. The other is that I’ve gone back to the Drawing API for the asteroids, so the Asteroids are now (almost) entirely ActionScript. I’ll move the ship back under its controls in a future release. In fact, getting this to work the way I did reveals that I’ll have to set up a “Game” class to generate the movieclips that will bind to the Asteroid and the Ship classes — and in that class, not only should I be able to move out of having any movieclips in the library — I should be able to incorporate the collision detection between the asteroids and the ship.

I think I’m getting classes now. Here’s the updated code for the Asteroid class…

class Asteroid extends MovieClip
{
    // velocity value for the Asteroid's x- and y- movement
    private var xv:Number;
    private var yv:Number;

    // rotation of the Asteroid, so it looks like it drifts
    // in outer space
    private var r:Number;

    private var AsteroidColor:Number = 0x00CC00;

    // this is the constructor function, which initializes
    // each Asteroid instance.  It must be a public function
    // or it won't be able to be accessed by the Flash movie.
    private function Asteroid ()
    {
        DrawAsteroid( this );

        // shorten up some Math functions
        var mr = Math.random;
        var mf = Math.floor;

        // set the velocity for the Asteroid
        xv = mf( mr() * 6 ) - 3;
        yv = mf( mr() * 6 ) - 3;

        // set the Asteroid's original rotation.
        r = mf( mr() * 360 ) - 180;
        _rotation = r;

    }

    // Each Asteroid will now encapsulates, or
    // determintes its own movement.  This will
    // improve performance over the original
    // game, where one onEnterFrame on the _root
    // controlled everything.
    private function onEnterFrame():Void
    {
        // This series of if statements simply guides the placement
        // of an asteroid as it floats near the borders of the movie.
        if ( _x < = 10 ) 
        {
            _x += 390;
        }
        if ( _x >= 390 ) 
        {
            _x -= 390;
        }
        if ( _y < = 10 ) 
        {
            _y += 140;
        }
        if ( _y >= 140 ) 
        {
            _y -= 140;
        }

        // Keep the Asteroid moving per its velocity
        _x += xv;
        _y += yv;

        // Keep the Asteroid rotating on its axis, as if it were floating
        // in space.
        _rotation += r / 60;
    }

    private function DrawRectangle ( shape )
    {
        shape.beginFill ( AsteroidColor, 100 );
        shape.lineTo ( 30, 0 );
        shape.lineTo ( 30, -30 );
        shape.lineTo ( 0, -30 );
        shape.lineTo ( 0, 0 );
    }

    // DrawRectangle();

    private function DrawTriangle ( shape )
    {
        shape.beginFill ( AsteroidColor, 100 );
        shape.lineTo ( 30, 0 );
        shape.lineTo ( 0, -30 );
        shape.lineTo ( 0, 0 );
    }


    private function DrawAsteroid( mc )
    {
        var degrees:Number = 360;

        while ( degrees -= 45 )
        {
            var i:Number = Math.floor( Math.random() * 2);
            var shape:MovieClip = this.createEmptyMovieClip( "shape" + degrees, this.getNextHighestDepth() );
            (i) ?  DrawRectangle( shape ) : DrawTriangle( shape );
            shape._rotation = degrees;
        }
    }   
}

Download the source files. Again, much like the original source, the class structure as presented below looks similar. Since the asteroids move about with their own behaviors, and those behaviors are really separate from the ship’s behaviors, it’s easy to do this really clean.

I’m very curious about how these items will interact, and more pertinent to me, what that resulting code will be like.

In the meantime, if you’re playing along at your own computer, create a Ship movieclip and bind it to a Ship.as class file, which looks like this:

class Ship extends MovieClip
{
    public var torque:Number;
    public var rtorque:Number;
    public var AngVelocity:Number;
    public var AngAcceleration:Number;
    // angle is the ship's rotation angle.
    public var angle:Number;

    public var force:Number;

    // xv is the ship's x-velocity (going across)
    public var xv:Number;

    // yv is the ship's y-velocity (going up/down)
    public var yv:Number;

    // x is the ship's x-position.
    public var x:Number;

    // y is the ship's y-position.
    public var y:Number;

    // xa is the ship's x-acceleration (how it speeds up/slows down)
    public var xa:Number;

    // ya is the ship's y-acceleration (how it speeds up/slows down)
    public var ya:Number;

    // v is the ship's "vector"
    public var v:Number;

    // the ship has a "momentum" factor to slow down some response time.
    public var momentum:Number;

    // drag will use the momentum factor
    public var drag:Number;

    // We're going to put a timer in for the firing engine, so we don't fire all our
    // lasers at the same time - spacing out the firing to make better shooting.
    public var timer:Number;

    // We'll set up an array of object references to each laser.
    //public var lasers:Array;


    private function Ship()
    {
        angle = 0;  
        xv = 0;         
        x = 0;      
        y = 0;      
        yv = 0;         
        xa = 0;         
        ya = 0;         
        v = 0;      
        momentum = 0.02;    
        drag = 0;
        timer = 0;
        AngVelocity = 0;
        AngAcceleration = 0;
    }

    public function onEnterFrame()
    {
        // RIGHT and LEFT control the amount of torque applied to the ship's movement
        if ( Key.isDown( Key.RIGHT ) )
        {
            torque = 5;
        } 
        else if ( Key.isDown( Key.LEFT ) )
        {
            torque = -5;
        } 
        else 
        {
            torque = 0;
        }

        rtorque = 0.5 * AngVelocity;
        AngAcceleration = torque - rtorque;
        AngVelocity += AngAcceleration;
        angle += AngVelocity;

        // constrain theta 0 < 360
        // We only want to deal with angles from 0 to 360 degrees
        if ( angle < 0 ) 
        {
            angle += 360;
        }
        if ( angle > 360 ) 
        {
            angle -= 360;
        }


        v = Math.sqrt( Math.pow( xv, 2) + Math.pow( yv, 2) );

        drag = momentum * v;

        // Here we control the thrust and acceleration of the ship
        force = ( Key.isDown( Key.UP ) ) ? 1 : 0;

        xa = ( ( drag * xv ) * -1 ) + ( force * Math.sin( Math.PI / 180 * angle ) );
        ya = ( ( drag * yv ) * -1 ) - ( force * Math.cos( Math.PI / 180 * angle ) );
        xv += xa;
        yv += ya;

        // Just like the Asteroids, we need to constrain the ship within
        // the bounds of the playable area.
        if ( _x < = 10 ) 
        {
            _x += 390;
        }
        if ( _x >= 390 ) 
        {
            _x -= 390;
        }
        if ( _y < = 10 ) 
        {
            _y += 140;
        }
        if ( _y >= 140 ) 
        {
            _y -= 140;
        }
        // And here we finally assign and update the ship's x- and
        // y- positions, and its rotation angle.
        _y += yv;
        _x += xv;
        _rotation = angle;
        // ... END movement
    }
}
 

Commments? Suggestions? Bugs?

Download the source files.

While the Asteroids you see here are movieclips with polygon fills, unlike the completely code-rendered Asteroids in the original game, there is no code in the entire flash movie. All the code takes place in the Asteroid.as class file that each Asteroid movieclip is bound to. I didn’t even have to instantiate these Asteroids for them to behave. I just drag them out of the library and let them do their thing. Notice any similarities between the LinearSprite code and the following code? It’s a natural progression from the original code. We’ll see in later entries if this has to change…

class Asteroid extends MovieClip
{
    // velocity value for the Asteroid's x- and y- movement
    private var xv:Number;
    private var yv:Number;

    // rotation of the Asteroid, so it looks like it drifts
    // in outer space
    private var r:Number;

    // this is the constructor function, which initializes
    // each Asteroid instance.  It must be a public function
    // or it won't be able to be accessed by the Flash movie.
    private function Asteroid ()
    {
        // shorten up some Math functions
        var mr = Math.random;
        var mf = Math.floor;

        // set the velocity for the Asteroid
        xv = mf( mr() * 6 ) - 3;
        yv = mf( mr() * 6 ) - 3;

        // set the Asteroid's original rotation.
        r = mf( mr() * 360 ) - 180;
        _rotation = r;

    }

    // Each Asteroid will now encapsulates, or
    // determintes its own movement.  This will
    // improve performance over the original
    // game, where one onEnterFrame on the _root
    // controlled everything.
    private function onEnterFrame():Void
    {
        // This series of if statements simply guides the placement
        // of an asteroid as it floats near the borders of the movie.
        if ( _x < = 10 ) 
        {
            _x += 390;
        }
        if ( _x >= 390 ) 
        {
            _x -= 390;
        }
        if ( _y < = 10 ) 
        {
            _y += 140;
        }
        if ( _y >= 140 ) 
        {
            _y -= 140;
        }

        // Keep the Asteroid moving per its velocity
        _x += xv;
        _y += yv;

        // Keep the Asteroid rotating on its axis, as if it were floating
        // in space.
        _rotation += r / 60;
    }
}

Please use the comments feature here to ask any questions, or make any suggestions to improving the code. I want to build the best asteroids game I can with ActionScript 2.0… and I’m more than willing to incorporate your ideas!

Download the source files.

Grant’s a pretty smart guy. Sure the example he wrote above isn’t terribly sexy, but Grant revealed a key element in how to conceive of OOP in a way that bridges most developers’ understanding of Flash and very evident objects — associating movieclip behaviors with a class that describes the behavior.

I’m going to journal these experiments, working my way up to rebuilding my (somewhat famous) Asteroids code with ActionScript 2.0.

But for now, let’s get back to the basics…

Directly associating Classes to movieclips isn’t the only approach you can use in grasping OOP with ActionScript 2.0, but it’s a great start for understanding how theoretical object structures can relate to the virtual objects that you can manipulate in Flash’s IDE. All I did in this example was to create a movieclip, just as Grant described in his presentation, and link it with a class file of the same name as the linkage for that movieclip out of the library.

The code for the class is here, and as you might guess, it’s saved as an ActionScript file (”LinearSprite.as”):

class LinearSprite extends MovieClip
{
    private var xvel:Number;
    private var yvel:Number;

    private function LinearSprite()
    {
        xvel = 2 + random( 80 ) / 10;
        yvel = 2 + random( 80 ) / 10;
    }

    private function onEnterFrame():Void
    {
        _x += xvel;
        _y += yvel;

        if ( ( _x > 400 && xvel > 0 ) || ( _x < 0 && xvel < 0 ) ) { xvel *= -1; }
        if ( ( _y > 150 && yvel > 0 ) || ( _y < 0 && yvel < 0 ) ) { yvel *= -1; }
    }
}

So basically, in my Flash example above, I dragged four of these sprites onto the stage, and they’re just doing what they do. It certainly runs pretty smooth with each sprite responsible for its own movement, rather than the timeline chugging through the onEnterFrame.