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.

Series: Flash Game Programming 101, Keeping & Display Scores, Step Seven.

One of the essential parts of a game is the score. It makes players feel happy, and gives them something to work at. Without a score, no one would care how far they went in half the games they played. They’d shoot a few things, and tip their hats goodbye.

One of the things I learned early on, is that adding text and manipulating it is really one of the most trivial aspects of Flash and ActionScript. It’s really just a matter of creating a text object in your code, putting it somewhere, and updating it’s value at various intervals.

import flash.text.TextField;

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

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

dispScore.x = 10;
dispScore.y = 10;

addChild( dispScore);

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

Add that to the top portion of your project. That’ll setup the variables, font formatting, and place it on the stage. Next we’re going to modify the moveBall() function a little bit.

myScore++;

dispScore.text = String( myScore );

This is the part where the score actually updates. We’re having it increment one each move of the ball. In a game you may have it counting constantly at a 10+ interval. In other cases, you’ll score accordingly for a certain action within the game, such as shooting an alien ship. Let’s put this all together.

import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.text.TextField;

var myBall:Ball 				= new Ball();
var myWall:Wall 				= new Wall();
var myLaunchButton:LaunchButton = new LaunchButton();
var dispScore:TextField			= new TextField();
var scoreFormat:TextFormat 		= new TextFormat();
var myScore:Number              = new Number();

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

myBall.x = 200;
myBall.y = 350;

myWall.x = 400;
myWall.y = 200;

myLaunchButton.x = 400;
myLaunchButton.y = 350;

dispScore.x = 10;
dispScore.y = 10;

addChild( myBall );
addChild( myWall );
addChild( myLaunchButton);
addChild( dispScore);

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

// Stage Events
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyPress );
stage.addEventListener( MouseEvent.MOUSE_MOVE, trackMouse );

// Symbol Specific Events
myLaunchButton.addEventListener( MouseEvent.MOUSE_UP, buttonClicked );

myBall.addEventListener( MouseEvent.MOUSE_DOWN, mousePress );
myBall.addEventListener( MouseEvent.MOUSE_UP, mouseRelease );

function buttonClicked( e:MouseEvent )
{
	stage.addEventListener( Event.ENTER_FRAME, moveBall );
}

function trackMouse( e:MouseEvent )
{
	if ( myWall.hitTestObject( myBall ) )
	{
		myBall.stopDrag();

		myBall.x = 200;
		myBall.y = 200;
	}
}

function mousePress( e:MouseEvent )
{
	myBall.startDrag();
}

function mouseRelease( e:MouseEvent )
{
	myBall.stopDrag();
}

function keyPress( event:KeyboardEvent )
{
	var multiplier = 2;

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

			myBall.x -= multiplier;

			break;

		case Keyboard.RIGHT :

			myBall.x += multiplier;

			break;

		case Keyboard.UP :

			myBall.y -= multiplier;

			break;

		case Keyboard.DOWN :

			myBall.y += multiplier;

			break;

		case 32 : // Spacebar

			stage.addEventListener( Event.ENTER_FRAME, moveBall );

			break;
	}

	if ( myWall.hitTestObject( myBall ) )
	{
		myBall.x = 200;
		myBall.y = 200;
	}
}

function moveBall( event:Event )
{
	if ( myBall.y <= 10 )
	{
		stage.removeEventListener( Event.ENTER_FRAME, moveBall );
	}	

	myScore++;

	dispScore.text = String( myScore );

	myBall.y -= 10;
}

Now you have all the elements to putting a scoreboard in your game. Play around with it and see what kind of ways you can utilize it. You can manipulate it in any way you want. Even overwrite it temporarily with text, and then flip it back to the number. As always, if you have any questions, post a comment or contact me directly.

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.

Series: Flash Game Programming 101, Animating Elements with the Keyboard, Step Five.

One of the essential elements to a game is to have move pieces on the screen that you are not controlling. Whether they are triggered by a player action, or just generated and animated by the AS3 code, without them, your game is not a game.

We’re going to talk about making something move across the screen with the press of a key. It’s really as simple as setting up an ENTER_FRAME event, and manipulating the x or y position.

stage.addEventListener( Event.ENTER_FRAME, moveBall );

function moveBall( event:Event )
{
	if ( myBall.y <= 10 )
	{
		stage.removeEventListener( Event.ENTER_FRAME, moveBall );
	}	

	myBall.y -= 10;
}

You’ll want to set a direction, and then check to see if its crossing off into the outer limits beyond the stage, and you’ll want to tie it into a keyboard or mouse key. For the sake of this lesson, we’ll tie it into the keyboard, and take a look at more advanced methods with the mouse another day.

The first thing we need to do is open up our project, and go into the keyPress() function. In the case control, you’ll want to add a keyCode handler for the spacebar. You can find any keyCode at this web site. The spacebar is 32.

function keyPress( event:KeyboardEvent )
{
	var multiplier = 2;

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

			myBall.x -= multiplier;

			break;

		case Keyboard.RIGHT :

			myBall.x += multiplier;

			break;

		case Keyboard.UP :

			myBall.y -= multiplier;

			break;

		case Keyboard.DOWN :

			myBall.y += multiplier;

			break;

		case 32 : // Spacebar

			stage.addEventListener( Event.ENTER_FRAME, moveBall );

			break;
	}

	if ( myWall.hitTestObject( myBall ) )
	{
		myBall.x = 200;
		myBall.y = 200;
	}
}

We’re also going to move the starting position of our ball.

myBall.x = 200;
myBall.y = 350;

Now that you have your keyCode in place and our ball re-positioned, let’s take a look at the function we’re attaching the ENTER_FRAME event to. We’re going to simply subtract from the myBall.y, moving the ball upwards. While the ball is moving, we’re going to make sure we don’t past the edge of the stage, and off the screen.

function moveBall( event:Event )
{
	if ( myBall.y <= 10 )
	{
		stage.removeEventListener( Event.ENTER_FRAME, moveBall );
	}	

	myBall.y -= 10;
}

That’s all there is too it. Each time you press your spacebar, unless the ball is at or above the Y 10 coordinate, the ball is going to move itself upwards. Let’s take a look at it all put together.

import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.Event;

var myBall:Ball = new Ball();
var myWall:Wall = new Wall();

myBall.x = 200;
myBall.y = 350;

myWall.x = 400;
myWall.y = 200;

addChild( myBall );
addChild( myWall );

stage.addEventListener( KeyboardEvent.KEY_DOWN, keyPress );
stage.addEventListener( MouseEvent.MOUSE_DOWN, mousePress );
stage.addEventListener( MouseEvent.MOUSE_UP, mouseRelease );
stage.addEventListener( MouseEvent.MOUSE_MOVE, trackMouse );

function trackMouse( e:MouseEvent )
{
	if ( myWall.hitTestObject( myBall ) )
	{
		myBall.stopDrag();

		myBall.x = 200;
		myBall.y = 200;
	}
}

function mousePress( e:MouseEvent )
{
	myBall.startDrag();

    myBall.x = e.stageX;
    myBall.y = e.stageY;
}

function mouseRelease( e:MouseEvent )
{
	myBall.stopDrag();
}

function keyPress( event:KeyboardEvent )
{
	var multiplier = 2;

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

			myBall.x -= multiplier;

			break;

		case Keyboard.RIGHT :

			myBall.x += multiplier;

			break;

		case Keyboard.UP :

			myBall.y -= multiplier;

			break;

		case Keyboard.DOWN :

			myBall.y += multiplier;

			break;

		case 32 : // Spacebar

			stage.addEventListener( Event.ENTER_FRAME, moveBall );

			break;
	}

	if ( myWall.hitTestObject( myBall ) )
	{
		myBall.x = 200;
		myBall.y = 200;
	}
}

function moveBall( event:Event )
{
	if ( myBall.y <= 10 )
	{
		stage.removeEventListener( Event.ENTER_FRAME, moveBall );
	}	

	myBall.y -= 10;
}

Now you have a base for making things move on key press. You can fire a rocket, bullet, or send a pinball moving with the press of the spacebar. Skies the limits really for this type of activity. You could even have it spawn new items, and move them around the screen. Play around, and see what you can do. If you have any questions, contact me directly, or leave a comment.

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.

Series: Flash Game Programming 101, Mouse Controls, Step Three.

Being able to move things around via the mouse is an important element in today’s game world. Puzzle games, strategy games, and other genres wouldn’t be the same if you were confined to a keyboard. Fortunately, working with the mouse is similar to the keyboard in ease of use.

import flash.events.MouseEvent;

stage.addEventListener( MouseEvent.MOUSE_MOVE, showMouseCoords );

function showMouseCoords( e:MouseEvent )
{
    trace( "X = " + e.stageX + ", Y = " + e.stageY + ".\n" );
}

Some of the things you can monitor are mouse button up, down, movement, in, out, leaving an area, and the wheel. For this lesson, we’re going to focus on the wheel, and dragging our ball around.

Open up your flash project. You can leave all the keyboard code in. First, add all your event listeners. You can put them immediately under your keyboard event listener. You’ll need one for MOUSE_DOWN, and MOUSE_UP.

stage.addEventListener( MouseEvent.MOUSE_DOWN, mousePress );
stage.addEventListener( MouseEvent.MOUSE_UP, mouseRelease );

Next, we’ll need to write the functions to handle each of the mouse controls. The first one, MOUSE_DOWN, will be the one that controls dragging the ball around the screen. You will be utilizing the startDrag() method, and adjusting the X and Y coordinates of the ball to stageX and stageY coordinates of the mouse.

function mousePress( e:MouseEvent )
{
	myBall.startDrag();

	myBall.x = e.stageX;
	myBall.y = e.stageY;
}

I should note one thing. You don’t need the myBall.x and y lines. I put those there so that the ball will jump to the mouse pointer when you click anywhere on the stage. The function that does all the work is startDrag(), which is built into Flash. One of the many reasons I really like AS3 and Flash is that so many things, like startDrag, collision, etc, are built into it. You don’t have to spend hours writing fancy code to do simply tasks. It just simply works.

Now that you’ve moved your ball where you want it, you need to issue a stopDrag(). This is where the mouseRelease function comes into play. When your mouse button is released, it will trigger the MOUSE_UP function, and run a single line of code.

function mouseRelease( e:MouseEvent )
{
	myBall.stopDrag();
}

Pretty simple, eh? Let’s put all the code together from our first three lessons.

import flash.events.KeyboardEvent;
import flash.events.MouseEvent;

var myBall:Ball = new Ball();

myBall.x = 200;
myBall.y = 200;

addChild( myBall );

stage.addEventListener( KeyboardEvent.KEY_DOWN, keyPress );
stage.addEventListener( MouseEvent.MOUSE_DOWN, mousePress );
stage.addEventListener( MouseEvent.MOUSE_UP, mouseRelease );

function mousePress( e:MouseEvent )
{
	myBall.startDrag();

	myBall.x = e.stageX;
	myBall.y = e.stageY;
}

function mouseRelease( e:MouseEvent )
{
	myBall.stopDrag();
}

function keyPress( event:KeyboardEvent )
{
	var multiplier = 10;

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

			myBall.x -= multiplier;

			break;

		case Keyboard.RIGHT :

			myBall.x += multiplier;

			break;

		case Keyboard.UP :

			myBall.y -= multiplier;

			break;

		case Keyboard.DOWN :

			myBall.y += multiplier;

			break;
	}
}

You now have a basic understanding and set of functions to handle all the controls in your game. You’ll be able to build a friendly user interface that can utilize both the keyboard and mouse. You should take the functions from these first three lessons now, and play around with them a bit. Try adding new keyboard key codes into the mix. See if you can do different things with the MOUSE_UP and MOUSE_DOWN events.

As always, if you get stuck on any part of this tutorial, post a comment, or contact me directly.

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.

Series: Flash Game Programming 101, Basic Setup, Step One.

I’ve had some e-mails the last couple days asking where my follow-up Ajax tutorials were. We’ve had a bit of a heat wave roll in, and honestly, its been way to hot to work hard on something like that. I’ll introduce the follow-up next week sometime. In the meantime, I’ve decided to get myself back to the beginning of relearning basic Flash and ActionScript3, and prepare to get going with Ben Davis on our game.

To give you a little background about me and my Flash programming, its been a while, but I have a bit of good history in the past. I had the pleasure of working for the team who brought you OriginalPoetry.com. We were a three man team consisting of a front end designer/developer, and two programmers. As I always do, I volunteered for one of the toughest pieces of the site, the flash games.

I started out with a bit of an easier game, and a game that was modeled after a game a book I bought, ActionScript 3.0 Game Programming University by Gary Rosenzweigh. The game’s premise was to match tiles, much like the memory card game you may (or may not have) played. I took Gary’s tutorial and concept, and was able to expand it to a four level game with leader board, scores, and custom graphics wrapped around it to fit our poetry theme.

I managed to get two more games out after that. A multiplayer “Poem Builder”, and a single personal word tile game designed to help break writer’s block. Unfortunately, I was soon shifted to a new project, and my Flash skills have laid dormant ever since.

That’s where these lesson come in.

As I walk myself through the first pieces of the game, I’m going to let you follow along. I’m going to be going rapidly from some basic things, to full-blown mini games. If you ever find it hard to jump from tutorial to tutorial, please comment, and I’ll do my best to write a follow-up filler that will keep you moving with me.

Let’s begin!

First off, let’s talking about Movie Clips. I make basically all of my usable symbols in the game Movie Clips. After you create your movie clip in your library, there are then two ways you can handle things. The first way is to drag it onto the stage, and give it an instance name. The second way is to simply use ActionScript. While I see benefits to both methods, I’m going to be mostly focusing on bringing them in through ActionScript.

Let’s take a look at setting up our first Movie Clip with ActionScript. Click on Library, then right-click in the blank area, and click on New Symbol.

I named my Symbol ‘Ball’, so I also named my class ‘Ball’, and then Flash automatically set it up as a MovieClip for me. Click OK, and you’ll probably get a message about no class being there for it, that’s ok, click OK for that too.

Now you’ll need to put something on it. Double click on the symbol so its open in the stage area. Now go to Import, and Import to Stage. I decided just to draw a blue circle. You can use whatever you have handy.

Now its time to get the symbol onto the stage. One of the reasons I like using AS3 to pull in add the symbols to the game is you can pull in as many instances as you want with the addChild() function. I can also do about anything else I want with it at that point. I also don’t have to spend time trying to make my stage look pretty.

var myBall:Ball = new Ball();

addChild( myBall );

Simple as that. Now you have a quick and easy method to add basic symbols to your game. Now its time to add some properties to it. Open up your Actions Frame, and click on Layer 1, Frame 1. Enter in this code.

var myBall:Ball = new Ball();

myBall.x = 200;
myBall.y = 200;
myBall.rotation = 10;

addChild( myBall );

If you publish and run, you’ll see your flash movie with the object in the center of the screen. Its kind of dull and boring, and that’s not really what flash is about, so let’s jazz it up a bit. Let’s change our AS3 render a ball every 50 pixels until we hit 400 pixels.

for ( var i = 200; i <= 400; i += 50 )
{
	var myBall:Ball = new Ball();

	myBall.x = i;
	myBall.y = 200;
	myBall.rotation = i;

	addChild( myBall );
}

Now you have a basic understanding of working with Move Clips and AS3. We’ll talk more about keyboard and mouse, more elements on the stage, and collisions coming up in the next couple days. In the meantime, if you have any questions, please comment or e-mail me.

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.