Documenting a Flash AS2 OOP Game Development Part 2

These Flash Tutorial notes follow on from Part 1 , which is here
Much thanks and respect to Squize for letting me use his spriteSheet for this example.
Download the files as they are, up to here
Now onto the baddies...

Make your enemy/baddie movieclip in flash mx2004, and in the linkages dialog box, write "baddie" in the Identifier textfield and in the class textfield write "Enemy".
Now write this code into your actions panel script to attach the baddies to the stage and put them into the enemyArray :

//	------	ATTACH ENEMY ARRAY	---------	//
for(var j=0;j<3;j++){
	attachMovie("baddie", "baddie"+j, 200+j);
	enArray[j] = _root["baddie"+j];
	enArray[j]._x = 50*j;
	enArray[j]._y = 100;
}

Here is what we have got in our Enemy class so far:

class Enemy extends MovieClip{
 	// put implementation in here
}	// ------- end enemy class

Move Class Enemy

Nothin'. So what do we need ? How about some variables. Lets go back to our class diagrams and design docs and see what we need. Well, we need its speed , so lets put that in, and we will need a move method
Oh and something i forgot in the design , a reset() method to make the enemy ships go back to the stage right and start again when they leave stage left and also when they get hit.
We can set our initial speed in our Constructor. This is what I have got so far :

class Enemy extends MovieClip{
 	// declare attributes
	 private var speed:Number;
	//	=======	CONSTRUCTOR 
	 function Enemy(){
	 speed = 20;
	 }
	
	//	=====	MOVE
	function moveEnemy(){
		// leaves stage left
		if(_x<=-30){
			reset();
			}
		else{
			_x -= speed;
		}
	}
	//	======	RESET
	function reset()
	{
		_x = Stage.width+50;
		_y = Math.random()*380 + 10;
		speed = Math.random()* 10 + 10;
	}

}	// ----- end enemy class

And test it by compiling.(i.e. Go to flash and hit CTRL/ENTER , or go to menu item - Control - TestMovie).
In the future when i say compile , i mean run the flash movie as above.
There! its done. The baddies are moving and coming in at a random speed between 10 and 20.
Oh and we will have to move our baddies in the game class. So put this code in the Game class:

// in Game class
// move enemies
	function moveBaddies(){
		for(var i=0;i<3;i++){
			enemyArray[i].moveEnemy();
		}
	}

and double check that you have the movebaddies method in the enterFrame loop in our flash file. This keeps our action panel code very neat and tidy :

//   loop
_root.onEnterFrame = function(){
	myGame.checkKey();
	myGame.moveShip(dir);
	myGame.moveLaser();
	myGame.moveBaddies();
}

Collision Detection

I'm not quite sure how I am going to do this. Probably in the Game class. And do a couple of loops ...
And here is an interaction diagram to play with. Try doing your own.

// in game class 
// Collision Detection 
	function collision(){
	for(var j = 0; j<6;j++){
		for(var k=0;k<3;k++){
			if(laserArray[j].hitTest(enemyArray[k])){
				trace("enemy hit, no. " + k );
				}
			}
		}
	}

And put this line inside the enterFrame method of our .fla :

//  the loop
_root.onEnterFrame = function(){
	myGame.checkKey();
	myGame.moveShip(dir);
	myGame.moveLaser();
	myGame.moveBaddies();
	myGame.collision();
}

Make the Explosion
When the bullets hit the baddies we want to see them blow up(of course). Go to your Flash mx2004 file and make an explosion movie. I just grabbed some puffs of smoke and put them in each frame with an empty frame at the end. and put a stop(); on the last frame. I called the explosion movie "Splode_mc" and in the linkage box named the identifier "splode". So in the collision method I have attached the splode movie, reset the baddy, and later we will increment the score.

// in game classs
// Collision Detection 
	function collision(){
	for(var j = 0; j<6;j++){
		for(var k=0;k<3;k++){
		if(laserArray[j].hitTest(enemyArray[k])){
			// explode the mofo
			_root.attachMovie("splode", "splode", 301);
			// set explosion to baddy coords
			_root.splode._x = enemyArray[k]._x;
			_root.splode._y = enemyArray[k]._y;
			// reset the baddy to stage right
			enemyArray[k].reset();
			break;
			}
			}
		}
	}

Collision Detection - Baddies hit Ship

Now lets check for a collision between a baddy and our spaceship. I am recycling the splode_mc, by changing its color and changing its x and y-scale. We could also put a sound effect in each of the hitTest checks. But I will leave that up to you.

// Collision Detection 
function collision(){
for(var j = 0; j<6;j++){
	for(var k=0;k<3;k++){
		// check bullets hit baddies 
		if(laserArray[j].hitTest(enemyArray[k])){
			// explode the mofo
			_root.attachMovie("splode", "splode", 301);
			// set explosion to baddy coords
			_root.splode._x = enemyArray[k]._x;
			_root.splode._y = enemyArray[k]._y;
			// reset the baddy to stage right
			enemyArray[k].reset();
			}// end if
		// check baddies hit ship
		if(enemyArray[k].hitTest(ship)){
			_root.attachMovie("splode", "splode", 301);
			// set explosion to ship coords
			_root.splode._x = ship._x;
			_root.splode._y = ship._y;
			// change color
			var my_color:Color = new Color(_root.splode);
			my_color.setRGB(0xff0000);
			// change size
			_root.splode._xscale = _root.splode._yscale = 400;
		}
		}
	}
}

Score and lives

What is left ? Scoring and lives. I might make a couple of textfields and set the text property on them when a change occurs. So make 2 textfields in our Flash MX2004 file and in the instance names call them score_txt and lives_txt. Then give the Game class 2 more variables, score and lives and initialise them in our constructor:

	// in Game class
	// declare variables
	var score:Number;
	var lives:Number;
	
	// ====   constructor  ============== 
	function Game(_ship:Spaceship, _enArray:Array, 
		_bullArray:Array){
		ship       = _ship;
		enemyArray = _enArray;
		laserArray = _bullArray;
		// initialise score and lives
		score = 0;
		lives = 10;
	}

Now lets set the textfields to the score and lives variables:

// in Game class
// Collision Detection 
function collision(){
for(var j = 0; j<6;j++){
	for(var k=0;k<3;k++){
		// check bullets hit baddies 
		if(laserArray[j].hitTest(enemyArray[k])){
			// increment score and display it
			score += 10;
			_root.score_txt.text = " Score: " + score;
			// explode the mofo
			_root.attachMovie("splode", "splode", 301);
			// set explosion to baddy coords
			_root.splode._x = enemyArray[k]._x;
			_root.splode._y = enemyArray[k]._y;
			// reset the baddy to stage right
			enemyArray[k].reset();
			}// end if
		// check baddies hit ship
		if(enemyArray[k].hitTest(ship)){
			// reset baddy, decrement lives
			// display lives count
			enemyArray[k].reset();
			lives -= 1 ;
			_root.lives_txt.text = " Lives : " + lives;
			_root.attachMovie("splode", "splode", 301);
			// set explosion to ship coords
			_root.splode._x = ship._x;
			_root.splode._y = ship._y;
			// change color
			var my_color:Color = new Color(_root.splode);
			my_color.setRGB(0xff0000);
			// change size
			_root.splode._xscale = _root.splode._yscale = 400;
		}
		}
	}
}

During the above coding i had to reset the baddies when they hit the ship because the lives were still rolling over because the collision lasted a few frames.. try it with the enemyArray[k].reset() line commented out and watch the lives keep on ticking over. It is a fairly simple procedure.
1. check for collision
2. increment or decrement the variables
3. display the variable value

That was a pretty massive leap forward for us. I think I will leave it for a while for you and me to digest. Next up we should do a checkScore method where we check the score and lives and if either are outside our parameter then we end the game.
But for now.. lets rest . These notes follow on from Part 1 , which is here
Go onto the next Section, Part 3, In which we sort out the score display and make a Scrolling Parallax Background.
Much thanks and respect to Squize for letting me use his spriteSheet for this example.
Download the files as they are, up to here. You will have to make your own sprites if they dont come across. No biggie.
To be continued...