Flash MX - Anatomy of a Game

In this tutorial I will take you throught the complete process of design, Analysis, and coding a game in Flash MX . Go here to Play it !
The game will be a streetfighter style and was inspired by a Director tutorial by StormSky .

For starters we will keep this really simple. We need two fighters. Call them B1 and B2 for now. And we will need them to move left and right and kick and punch. For now there will be no vertical movement. But we will keep it in mind for later development.
Here is our Use Case Diagram. It is for B1 only but B2 will be exactly the same.

These use cases can be translated into some sort of Requirements Doc. A cursory attempt at which will follow.

B1.left
• Move to the left when a key is pressed

B1.right
• Move to the right when a key is pressed

B1.kick
• Perform a kick action
• If kick hits opponent , score 2

B1.punch
• Perform a punch action
• If punch hits opponent , score 1

Repeat the requirement for B2 , which is the same.
And whoops i left something out. Where is the score going to be kept? By each fighter or as a global variable managed by the main script ? OO design says every object should manage all its own affairs. And we will follow that guideline mainly because we will have to test the subclasses' kick and punch of B1 and B2 for a collision.
Lets draw a picture.

The same for B2, of course. From this diagram we can decide that left, right , kick and punch are child movieClips(subclasses) of the parent MovieClip B1. And that in OO terms , B1.kick.score1 and B1.punch.score2 (sic) will be attributes or variables of that subclass.

What else will we need? We will definitely need an

Intro Page
• where we tell the punters which keys are used to control the players
• and a start button to take them to the game proper

Winner's Page which
• displays the winners name
• Has a button to restart the game
• Has a button to go to web homepage

So lets start up Flash MX and start ! First thing we need will be an intro page. On frame 1 , make a background graphic on layer1 , do a title and some Text about gameplay on layer 2. Do it in whatever style you like.

Do a Start button and put it on a "Buttons" layer.

You can do the code for the start button now. It is really simple. All you want to do is go to frame 2. Select the start button, Hit the F9 key to open the actions window. Put this code in the Actions window.

on(release) {
	_root.gotoAndStop(2);
	}

But wait, I forgot to put a stop() in frame 1. Make a new layer and call it "Control". Click on frame 1 in that layer and put this code in the actions window.

Stop();

Go to frame 2 in the "Background layer" and hit the F6 key to make a new keyframe. Test your movie. It should go to frame 2 and stay there and the background will be visible but no text or start button.

Start animating your characters. For my characters I scanned in a real banana and traced around the main lines of the outlines and folds etc. Then just painted on a face and arms and legs.

Next start animating the neutral B1 and B2. I just made their legs and arms wave around a little and a blink with the eyes. It's probably too much but it looks so silly. And that is what I am aiming for.

Next start animating the walks left and right. Animate the characters in place and just do a walk loop that goes for 25 frames. Or better still do a martial arts sideways movement. Just like Bruce Lee-Banana. We should have movies now for both characters as neutral and move right and left

Animate a punch and a kick for each character. All up we should have 10 movies.
B1 - still , move left , move right , punch and kick
B2 - still , move left, move right , punch and kick
Make two new movies and call them B1main and B2 main. Put 5 keyframes in each movie.

• In frame 1 of each put the still movieclip
• In frame 2 put left
• In frame 3 put right
• In frame 4 put the punch movieclip
• In frame 5 the kick movie

Add a new layer to B1main and B2main MovieClips and call it actions. Put a keyframe in each frame and put the following code in each frame

	Stop();

Now we have all the graphical and movie elements to the game, so lets start coding it. We need to activate the B1 and B2 movieclips to move left and right and punch and kick when we press certain keys. (W A S D) and (I J K L).
Make 2 new layers B1 and B2 in the main timeline. On frame 2 of these layers drag the B1main and B2 main movieclips . Click on the B1main movie and in properties name the instance "b1main".
Open the actions window (F9) and write in this code :

onClipEvent(keyDown) {
	// W key for punch
	if (Key.isDown(87)) {
		this.gotoAndStop(4);
	// S key for kick	
	}  if (Key.isDown(83)) {
		this.gotoAndStop(5);
	// D key for Move right	
	}  if (Key.isDown(68)) {
		this.gotoAndStop(2);
	// A key for move left 	
	} if (Key.isDown(65)) {
		this.gotoAndStop(3);
		
	} 
	
}

This will need some explanation. The Ascii keycodes for WASD are the ones used above( 87, 83 etc). When a key is pressed this checks if the WASD keys are down (Key.isDown) and tells the B1main movie to go to frame 4 for example which has the punch movieClip. And if Key D is hit the move right movie is played on frame 2.
This is far from elegant but it gets the job done for now. We could also do a KeyUp event to take the b1main movie timeline back to frame 1. Something like this :

 	onClipEvent(keyUp){
	 	this.gotoAndStop(1);
 	}
 

We need some collision testing for the kicks and punches, also we need to adjust the scores for each player, and we need some sound effects both for kicks and collision. Kung Fu movies use bits of wood wacking for punching noises. Try something creative. Or better still funny and ridiculous.

Well lets do what I should have done first and that is to write an algorithm. An algorithm is computer code written in plain English. Let's do it properly for a kick :

 	//check if key S is pressed
 	// go to frame 5
 	// check for collision
 	// if yes, play a sound
 	// and add 2 to score 
 	// check if score is greater than winningscore
 	// if yes, go to winners page
 	// end
 

Write that in the actions window for b1main where you did the last one. And enter the code after each comment. like so,

 	// check if key S is pressed 
 	 if (Key.isDown(83)) 
 	{
	// go to frame 5 	
		this.gotoAndStop(5);
	// check for collision
		if(_root.b1main.b1kick, hitTest(_root.b2main))
		{
			// just do a trace to check its working
			trace("kick hits b2");
			// play a sound, (we'll do this later)
			//add 2 to score
			b1Score += 2;
			// check if score is greater than winning score
			if(b1Score >= winningScore)
			{
				_root.gotoAndStop(3);
			}
		}
	}

You have a go at the punch for b1 doing it using algorithm and then coding after each commented line. And then try it for B2. It should be exactly the same , just change b2 for b1.
... Waiting ... waiting ... How did you go ? The punch should be nearly the same , just substituting the correct keycode for the W key and b1punch in the hitTest and the score is only incremented by 1.

We have to set some score variables . So in frame 1 , click the control layer and add this code to the actions window:

	b1Score = 0;
	b2Score = 0;
	winningScore = 100;

Add an empty frame to the main timeline and just leave it for now. That will be the winners page. We'll make some graphics later. We also need to display the scores on the second frame. So just keep that in mind. We'll do it later.

Next step is to import some sounds. Import your sounds to the library. Make a folder and name it sounds and put them in that.
Right click on the kick1 sound and select "Linkage".

Tick the "Export for ActionScript" box and in the "Identifier" textbox call it "kick1".

Do the same for the rest of the sounds and call them kick2, punch1, punch2.

To play the sound you first have to set up a Sound object and then attach the ID Name of the sound that we did in the last part (kick1, kick2 etc). So, click on the first frame of the control layer and add the following code :

	kick1Sound = new Sound();
	kick1Sound.attachSound("kick1");

	// play a sound
	kick1Sound.start();

Create 2 more frames. In frame 3 write " B1 is the winner" or whatever, and create a restart button (to go back to the first frame) with the code :

	on(release) {
		_root.gotoAndStop(1);
	}

We are now ready to go back and finish off our code for the B1 and B2 movieClips. Click on the B1 character and put in this final code in the action window :

	
	onClipEvent(load){
		kick1Sound = new Sound();
		punch1Sound = new Sound();
		kick1Sound.attachSound("kick1");
		punch1Sound.attachSound("punch1");
	}

	onClipEvent(keyDown) {
	
	if (Key.isDown(87)) 
	{
		this.gotoAndStop(4);
		// TEST for collision
		if(_root.b1main.b1punch, hitTest(_root.b2main)){
			kick1Sound.start(0,1);
			_root.b1Score +=1;
			updateAfterEvent();
		}
	} 
	// check if key S is pressed 
 	if (Key.isDown(83)) 
 	{
		this.gotoAndStop(5);
		// TEST for collision
		if(_root.b1main.b1punch, hitTest(_root.b2main)){
			kick1Sound.start(0,1);
			_root.b1Score +=2;
			updateAfterEvent();
		}
	} 
	 if (Key.isDown(68)) {
		this.gotoAndStop(2);
		this._x += 20;
	} if (Key.isDown(65)) {
		this.gotoAndStop(3);
		this._x -=20;
	} 
	if(_root.b1Score >= 100)
	{
		_root.gotoAndStop(3);
	}
}

onClipEvent(keyUp){
	this.gotoAndStop(1);
}

The code for B2 will be the same except that the b1 will be changed to b2 and kick1, punch1 changed to punch2, kick2 etc. AND you will have to find the keycodes for the letters I , J , K , L . You have a look for them yourself. Each letter on the keyboard has an ASCII code. A is 65, B is 66 , C is 67 - etc etc.

Addendum - Characters Jump - 28th May 2003

I have made the characters jump thanks to some code by tonypa from flashkit forum.
Change the onload code in the B1 character to:

onClipEvent(load){
	kick1Sound = new Sound();
	punch1Sound = new Sound();
	kick1Sound.attachSound("kick1");
	punch1Sound.attachSound("punch1");
	// jumping variables
	startspeed = 10;
	gravity = 9.8;
	jumping = 0;

}

The enterframe code has been changed to what is shown below . For the left character, B1, the key "Q" is used for jumping. You can play around with the startspeed and gravity values to get a different jump.
And i Have changed the event handler to onEnterFrame instead of onKeyDown so that the event lasts for longer..
doh!!
Anyway here is the revised enterframe code for the left character.. add it to the onload code above..

onClipEvent(enterFrame) {
	
	if (Key.isDown(87)) 
	{
		this.gotoAndStop(4);
		// TEST for collision
		if(_root.b1main.b1punch, hitTest(_root.b2main)){
			kick1Sound.start(0,1);
			_root.b1Score +=1;
			updateAfterEvent();
		}
	} 
	// check if key S is pressed 
 	if (Key.isDown(83)) 
 {
		this.gotoAndStop(5);
		// TEST for collision
		if(_root.b1main.b1punch, hitTest(_root.b2main)){
			kick1Sound.start(0,1);
			_root.b1Score +=2;
			updateAfterEvent();
		}
	} 
	 if (Key.isDown(68)) {
		this.gotoAndStop(2);
		this._x += 20;
	} if (Key.isDown(65)) {
		this.gotoAndStop(3);
		this._x -=20;
	} 
	
	// jumping key is "Q"
	if (Key.isDown(81) and jumping==0) {
		jumping = 1;
		starttime = getTimer()/1000;
		startpos = _y;
	}
	if ( jumping==1) {
		time = getTimer()/1000-starttime;
		_y = _y-(startspeed-gravity*time);
		if (_y>startpos) {
			_y = startpos;
			jumping = 0;
		}
	}
	
	if(_root.b1Score >= 100)
	{
		_root.gotoAndStop(3);
	}
}

onClipEvent(keyUp){
	this.gotoAndStop(1);
}

For the other character(B2), just make the corresponding changes and use the "U" key(85) for the jump...
And change the intro instructions to tell the punters to use the "Q" and "U" keys for jumping..

That should be about it for this game. There are a few modifications that you could include.

• Tighten up the hitarea - hint- use hitTest(mc._x, mc._y, true) method
• Don't let the characters go out of frame
• When a character is hit they go flat on their bum
• The characters can jump using the space bar -done - uses "Q" and "U"
• Introduce more fighters