Read more about this book

(For more resources on flash, see here.)

Astro-PANIC! was released as an all machine language Commodore 64 game to be typed in the February 1984 issue of COMPUTE!’s Gazette magazine. At that time there wasn’t any blog with source codes to download or copy/paste into your projects, so the only way to learn from other programmers was buying computer magazines and typing the example codes on your computer.

Since I suppose you never played this game, I would recommend you play it a bit on http://www.freewebarcade.com/game/astro-panic/.

Defining game design

Here are the rules to design our Astro-PANIC! prototype:

• The player controls a spaceship with the mouse, being able to move it horizontally on the bottom of the screen.
• At each level, a given number of enemy spaceships appear and roam around the stage at a constant speed in a constant direction.
• Enemies cannot leave the stage, and they will bounce inside it as they touch stage edges.
• Enemies don’t shoot, and the only way they will kill the player is by touching the spaceship.
• The player can only have one bullet on stage at any time, and hitting an enemy with the bullet will destroy it.
• Destroying all enemies means passing the level, and at each level the number of enemies and their speed increases.

These are the basic rules. We’ll add some minor improvements during the design of the game itself, but before we start drawing the graphics, keep in mind we’ll design something with the look and feel of old coin operator monitors, with bright glowing graphics.

Creating the game and drawing the graphics

Create a new file (File | New). Then, from New Document window select Actionscript 3.0. Set its properties as width to 640 px, height to 480 px, background color to #000000 (black) and frame rate to 60. Also define the Document Class as Main and save the file as astro-panic.fla.

Though 30 frames per second is the ideal choice for smooth animations, we will use 60 frames per second to create a very fast paced game.

There are three actors in this game: the player-controlled spaceship, the bullet and the enemy. In astro-panic.fla, create three new Movie Clip symbols and call them spaceship_mc for the spaceship, bullet_mc for the bullet, and enemy_mc for the enemy. Set them all as exportable for ActionScript. Leave all other settings at their default values, just like you did in previous article on Tetris.

From left to right: The spaceship (spaceship_mc), the bullet (bullet_mc), and the enemy (enemy_mc).

I made all assets with the shape of a circle. The spaceship is half a circle with a radius of 30 pixels, the bullet is a circle with a 4 pixels radius, and the enemy is a circle with a radius of 25 pixels. All of them have the registration point in their centers, and enemy_mc has a dynamic text field in it called level. If you’ve already met dynamic text fields during the making of Minesweeper it won’t be a problem to add it. At the moment I am writing a couple of zeros to test how the dynamic text field fits in the enemy shape.

Now we are ready to code.

Adding and controlling the spaceship

As usual we know we are going to use classes to manage both enter frame and mouse click events, so we’ll import all the required classes immediately.

The spaceship is controlled with the mouse, but can only move along x-axis.

Without closing astro_panic.fla, create a new file and from New Document window select ActionScript 3.0 Class. Save this file as Main.as in the same path you saved astro_panic.fla. Then write:

package {
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 public class Main extends Sprite {
  private var spaceship:spaceship_mc;
  public function Main() {
   placeSpaceship();
   addEventListener(Event.ENTER_FRAME,onEnterFrm);
  }
  private function placeSpaceship():void {
   spaceship=new spaceship_mc();
   addChild(spaceship);
   spaceship.y=479;
  }
  private function onEnterFrm(e:Event):void {
   spaceship.x=mouseX;
   if (spaceship.x<30) {
    spaceship.x=30;
   }
   if (spaceship.x>610) {
     spaceship.x=610;
   }
  }
 }
}

At this time you should know everything about the concept behind this script. placeSpaceship is the function which constructs, adds to Display List and places the spaceship_mc DisplayObject called spaceship.

In enter_frame function we just move the spaceship in the same position of the x-axis of the mouse. We don’t want the spaceship to hide in a corner, so it won’t be able to follow the axis of the mouse if it gets too close to stage edges.

Test the movie, and move the mouse. Your spaceship will follow it, while being bound to the ground.

Now we should give the spaceship an old arcade look.

Adding a glow filter

AS3 allows us to dynamically apply a wide range of filters to DisplayObjects on the fly. We’ll add a glow filter to simulate old ‘arcades’ pixel luminosity.

flash.filters.GlowFilter class lets us apply a glow effect to DisplayObjects.

First, we need to import it.

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;

At this time, we can simply create a new variable to construct a GlowFilter object. Change placeSpaceship this way:

private function placeSpaceship():void {
  ...
  var glow_GlowFilter=new GlowFilter(0x00FFFF,1,6,6,2,2);
  spaceship.filters=new Array(glow);
}

We specify the color as 0x00FFFF (cyan to draw the spaceship), the alpha (1 = full opacity), and the amount of horizontal and vertical blur (both 6).

I want you to notice that I used 6 for horizontal and vertical blur because I like the effect I achieve with such value. If you are planning to use a lot of filters, remember values that are a power of 2 (such as 4 and 8, but not 6) render more quickly than other values.

The remaining two arguments are the strength, that determines the spread of the filter (if you use Photoshop, it’s something like spread and size of the glow filter you can apply on layers) and the quality.

Quality can range from 1 to 15 but values higher than 3 may affect performances and the same final effect can be set playing with blur.

Finally the filter is added.

spaceship.filters=new Array(glow);

filters DisplayObject’s property wants an array with all the filters you want to associate to the DisplayObject. In our case, we are adding only one filter but we have to include it in the array anyway.

Test the movie and you will see your spaceship glow.

In the previous picture, you can see the difference between the spaceship without and with the glow effect applied.

Now your spaceship is ready to fire.

Making spaceship fire

Nobody would face an alien invasion with a harmless spaceship, so we are going to make it fire.

We need to create a variable to manage bullet_mc DisplayObject and I have said the spaceship can fire only one bullet at a time, so we need another variable to tell us if the spaceship is already firing. If it’s firing, it cannot fire. If it’s not firing, it can fire.

Add two new class level variables:

private var spaceship:spaceship_mc;
private var isFiring_Boolean=false;
private var bullet:bullet_mc;

isFiring is the Boolean variable that we’ll use to determine if the spaceship is firing. false means it’s not firing.

bullet will represent the bullet itself.

The player will be able to fire with mouse click, so a listener is needed in Main function:

public function Main() {
  placeSpaceship();
  addEventListener(Event.ENTER_FRAME,onEnterFrm);
  stage.addEventListener(MouseEvent.CLICK,onMouseCk);
}

Now every time the player clicks the mouse, onMouseCk function is called.

This is the function:

private function onMouseCk(e:MouseEvent):void {
 if (! isFiring) {
  placeBullet();
  isFiring=true;
 }
}

It’s very easy: if isFiring is false (the spaceship isn’t already firing), placeBullet function is called to physically place a bullet then isFiring is set to true because now the spaceship is firing.

The same placeBullet function isn’t complex:

private function placeBullet():void {
  bullet=new bullet_mc();
  addChild(bullet);
  bullet.x=spaceship.x;
  bullet.y=430;
  var glow_GlowFilter=new GlowFilter(0xFF0000,1,6,6,2,2);
  bullet.filters=new Array(glow);
}

It’s very similar to placeSpaceship function, the bullet is created, added to Display List, placed on screen, and a red glow effect is added.

The only thing I would explain is the concept behind x and y properties:

bullet.x=spaceship.x;

Setting bullet’s x property equal to spaceship’s x property will place the bullet exactly where the spaceship is at the moment of firing.

bullet.y=430;

430 is a good y value to make the bullet seem as it were just fired from the turret. Test the movie, and you will be able to fire a bullet with a mouse click.

The bullet at the moment remains static in the point where we fired it.

Making the bullet fly

To make the bullet fly, we have to define its speed and move it upwards. Then we’ll remove it once it leaves the stage and reset isFiring to false to let the player fire again.

Add a constant to class level variables:

private const BULLET_SPEED_uint=5;
private var spaceship:spaceship_mc;
private var isFiring_Boolean=false;
private var bullet:bullet_mc;

BULLET_SPEED is the amount of pixels the bullet will fly at each frame. We won’t manage upgrades or power-ups, so we can say its value will never change. That’s why it’s defined as a constant.

To manage bullet movement, we need to add some lines at the end of onEnterFrm function.

You may wonder why we are managing both the spaceship and the bullet inside the same class rather than creating a separate class for each one. You’ll discover it when you manage enemies’ movement, later in this article.

Meanwhile, add this code to onEnterFrm function.

private function onEnterFrm(e:Event):void {
 ...
 if (isFiring) {
  bullet.y-=BULLET_SPEED;
  if (bullet.y<0) {
   removeChild(bullet);
   bullet=null;
   isFiring=false;
  }
 }
}

The new code is executed only if isFiring is true. We are sure we have a bullet on stage when isFiring is true.

bullet.y-=BULLET_SPEED;

Moves the bullet upward by BULLET_SPEED pixels.

if (bullet.y<0) { ... }

This if statement checks if y property is less than 0. This means the bullet flew off the screen. In this case we physically remove the bullet from the game with

removeChild(bullet);
bullet=null;

and we give the player the capability of firing again with

isFiring=false;

Test the movie and fire, now your bullets will fly until they reach the top of the stage. Then you will be able to fire again.

Since nobody wants to fire for the sake of firing, we’ll add some enemies to shoot down.