Flash AS2 OOP game development
[ January 18, 2004 ] by Steve Happ
This long article documents the development process (from requirements definition to release) of a Flash game written in ActionScript2 using entirely OOP (Object Oriented Programming). The game is a standard space shoot'em-up with 3 enemy ships and the player firing lasers.


(continues from page 1)

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;
}


MOVIE CLASS ENEMY

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

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

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

Test it by compiling (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 (see picture 4). Try doing your own.

Pic. 4: Interaction diagram

// 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 them explode

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;
				}
			}
		}
	}

Baddies hit the 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 two 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. Download the files as they are up to here.
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. We also have to make a Scrolling Parallax Background.

(continues on page 3)


        
 
 
Name: Steve Happ
Location: Newcastle, Australia
Age: 51
Flash experience: 2-3 years
Job: Computer trainer
Website: http://www.video-animation.com/
 
 
| Homepage | News | Games | Articles | Multiplayer Central | Reviews | Spotlight | Forums | Info | Links | Contact us | Advertise | Credits |

| www.smartfoxserver.com | www.gotoandplay.biz | www.openspace-engine.com |

gotoAndPlay() v 3.0.0 -- (c)2003-2008 gotoAndPlay() Team -- P.IVA 03121770048