Dan Joseph

Series: Flash Game Programming 101, Putting It All Together, Step Nine.

I’ve taken you through an eight step process to introduce you to the world of Flash Game Development. You’ve got all the essentials to place objects on the stage, interact with them with the keyboard and mouse, detect basic collision, and add some to your game.

Now its time to put it all together in one big project. We’re going to take a two-step process for this. The first will be a basic gunner game base. You’ll have a left-right moving gun turret, and an alien pod that goes from left to right across the screen. You’ll be able to fire at the alien pod, and see the bullet move. We’ll also introduce sound and scoring into the game.

First, let’s setup the library with the elements that we need. Make a new symbol, set it as a movie clip, and draw some form of a gun turret. Make sure you set the top at Y 0, and then put it in the middle, giving the X a slightly minus setting. After that, make an alien pod, laying it out about the same way. Third we’ll need a bullet draw. After that grab yourself two sound files, and import then. Make sure you export them all to ActionScript and give them class names.

For these objects, you can use clip art, draw shapes, or make your own fancy pieces. I just draw some basic shapes for the sake of the lesson. It’s not as important what they look like, as it is where you position them in the symbol. Setting the top of them to Y 0 allow us to make the bullet look like its firing, and it will also help us position the object on the stage with the AS3 code.

Now let’s setup all the libraries that we’re going to use. They’re the same ones that you used throughout the eight steps.

import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.text.TextField;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.ui.Keyboard;

Next let’s declare our variables.

var myTurret:Turret = new Turret();
var myBullet:Bullet = new Bullet();
var myAlien:Alien   = new Alien();

var dispScore:TextField	   = new TextField();
var scoreFormat:TextFormat = new TextFormat();
var myScore:Number         = new Number();

var myFireBulletSound:FireBulletSound = new FireBulletSound();
var myShotAlienSound:ShotAlienSound   = new ShotAlienSound();

You can see the names here that I used for my library items that exported for ActionScript. I’ve also introduced a scoreboard, styling for the scoreboard, and a counter for the actual score. Now let’s place the initial objects on the stage.

// Setup Turret

myTurret.x = 55;
myTurret.y = 310;

addChild( myTurret );

// Setup Alien

myAlien.x = -20;
myAlien.y = 65;

addChild( myAlien );

// Setup Scoreboard
dispScore.x = 10;
dispScore.y = 10;

addChild( dispScore );

scoreFormat.font = "Arial";
scoreFormat.size = 28;
scoreFormat.bold = true;
scoreFormat.color = 0x121212;
scoreFormat.align = TextFormatAlign.LEFT;

dispScore.defaultTextFormat = scoreFormat;
dispScore.text = String( myScore );

Please take note of where I played myAlien. -20 pixels off the left side of the screen. That’s where it will start when the game starts, giving it an appearance of coming from afar to invade and destroy us. Next we need the initial event listeners.

// Stage Events
stage.addEventListener( KeyboardEvent.KEY_DOWN, moveTurret );
stage.addEventListener( KeyboardEvent.KEY_DOWN, fireBullet );

// Alien Events
myAlien.addEventListener( Event.ENTER_FRAME, moveAlien );

I’ve setup two for the keyboard. One is going to monitor the left and right arrow keys for movement, and the other will handle the spacebar for firing our bullet. The other event is to start the alien animation movement across the top of our screen. Let’s take a look at the functions now.

function moveTurret( e:KeyboardEvent )
{
	var multiplier = 10;

	switch( e.keyCode )
	{
		case Keyboard.LEFT :

			myTurret.x -= multiplier;

			break;

		case Keyboard.RIGHT :

			myTurret.x += multiplier;

			break;
	}
}

I’ve decided to go with a multiplier of 10 for the movement. As you recall from our earlier tutorial, that is how many pixels left or right we’ll move the turret.

function fireBullet( e:KeyboardEvent )
{
	switch( e.keyCode )
	{
		case 32 : // spacebar

			playSound( myFireBulletSound );

			myBullet.x = myTurret.x;
			myBullet.y = myTurret.y;

			addChild( myBullet );

			stage.removeEventListener( KeyboardEvent.KEY_DOWN, fireBullet );

			myBullet.addEventListener( Event.ENTER_FRAME, moveBullet );

			break;
	}
}

Here we have the spacebar event for firing the bullet. I like to use the switch control for all of my keyboard events, even in cases where is this just one. This gives us a framework for adding more in the future.

You’ll see in here when the spacebar is set, we play the firing sound, set the location of the bullet, which is at the top of the turret. Remember when I said its important to set the top of the turret to Y 0? This is why.

Notice the removeEventListener. We want to limit the player to firing only one bullet at a time. To do this, we need to remove the spacebar control, and then add a movement event to animate the bullet upwards. Let’s take a look at the bullet movement.

function moveBullet( e:Event )
{
	myBullet.y -= 5;

	// If we shot the alien, make it reset, add 10 to the score.
	if ( myBullet.hitTestObject( myAlien ) )
	{
		myScore += 100;

		dispScore.text = String( myScore );

		myAlien.x = -10;

                playSound( myShotAlienSound );

		resetBullet();
	}

	if ( myBullet.y < 0 )
	{
		resetBullet();
	}
}

In this function, we have multiple things going on. First, we’re moving the bullet 5 pixels at a time upwards. Then we’re doing two if conditions, with the first being a basic collision detection. If the bullet and the alien object meet, we’ll increase the score by 100, move the alien back off the screen, play a sound, and reset the bullet. Let’s take a look at that code next.

function resetBullet()
{
	myBullet.removeEventListener( Event.ENTER_FRAME, moveBullet );

	removeChild( myBullet );

	stage.addEventListener( KeyboardEvent.KEY_DOWN, fireBullet );
}

Resetting the bullet is as simple as removing the event, removing it from the stage, and adding a new event listener for the spacebar. Its the same addEventListener code as above. It will utilize the same function.

Finally, let’s take a look at the movement of the alien, and the sound playing.

function moveAlien( e:Event )
{
	myAlien.x += 2;

	if ( myAlien.x > 575 )
	{
		myAlien.x = -10;
	}
}

Moving the alien is trivial. We’re going to move it 2 pixels to the right at a time. We’re also going to check and see if goes beyond our stage, and then reset the alien back to -10 off the left of the screen, and continue on his path back across the screen.

function playSound( soundObject:Object )
{
	var channel:SoundChannel = soundObject.play();
}

Sound is just like in our earlier tutorial. A simple one line function that plays the sound you toss at it. In our case, the firing sound, and the collision sound.

Now you have a basic framework for a space invaders type game. You know how to take each of the elements from our first eight sessions and tie them together. You know how to animate multiple things at once, and how to detect when they touch. You understand how you can make a turret appear to fire a bullet.

We’re still not quite done. Notice you don’t have any boundaries to your turret. You could theoretically drive it off the right or left of the screen, and never see it again. We’ll cover that in lesson ten, and introduce you two a couple more advanced items you can put into your first complete game.

I realize I went pretty fast through the symbol setup in the beginning of this lesson. I feel by now you have a grasp on how to use that part of the flash interface. Please also keep in mind that I’m always here to answer questions and help if you get stuck. You can contact me directly, on twitter, or leave a comment here.

Dan Joseph is a Software Engineer/Architect.  

You can follow him on twitter @iamdanjoseph.  

If you wish to contact him, please click the contact page,
and fill out the form.