Flash Game Tuts » Intermediate

How to Make a Vertical Shooter in AS3 – Part 6

Mr Sun — Mon, 20 Jul 2009 12:05:45 +0000

As always, the finishing touches of this game won’t be explained too much by me, in hopes that you actually can do some of this stuff by yourself. Of course, there will always be source files at the bottom if you need to clear anything up.

The first thing I want to do is show the score on the “lose” screen. That’ll be pretty easy, just add a dynamic text field there.

Next, we can make some particles move down the screen so it looks like the player is actually moving forward. We’re going to make them the same speed as the enemies. I’m actually show some code for this one, because it’s also a pretty new thing for me. We’re not going to make a MovieClip for this, we’re going to make dynamic shapes through ActionScript. Here’s the code to place at the bottom:

//adding another enterframe listener for the particles
stage.addEventListener(Event.ENTER_FRAME, generateParticles);
 
//checking if there already is another particlecontainer there
if(particleContainer == null){
	//this movieclip will hold all of the particles
	var particleContainer:MovieClip = new MovieClip();
	addChild(particleContainer);
}
 
function generateParticles(event:Event):void{
	//so we don't do it every frame, we'll do it randomly
	if(Math.random()*10 < 2){
		//creating a new shape
		var mcParticle:Shape = new Shape();
		//making random dimensions (only ranges from 1-5 px)
		var dimensions:int = int(Math.random()*5)+1;
		//add color to the shape
		mcParticle.graphics.beginFill(0x999999/*The color for shape*/,1/*The alpha for the shape*/);
		//turning the shape into a square
		mcParticle.graphics.drawRect(dimensions,dimensions,dimensions,dimensions);
		//change the coordinates of the particle
		mcParticle.x = int(Math.random()*stage.stageWidth);
		mcParticle.y = -10;
		//adding the particle to stage
		particleContainer.addChild(mcParticle);
	}
 
	//making all of the particles move down stage
	for(var i:int=0;i<particleContainer.numChildren;i++){
		//getting a certain particle
		var theParticle:Object = particleContainer.getChildAt(i);
		//it'll go half the speed of the character
		theParticle.y += mainSpeed*.5;
		//checking if the particle is offstage
		if(theParticle.y >= 400){
			//remove it
			particleContainer.removeChild(theParticle);
		}
	}
}

Pretty intense, eh? Well, this is a finishing touch, and most finishing touches are pretty intense. If you want to, you can remove this function when the player loses, but I won’t because it adds a pretty cool effect.

Well, that’s actually all that I really have to finish off the game. I hope you had fun making it!

How to Make a Vertical Shooter in AS3 – Part 5

Mr Sun — Mon, 20 Jul 2009 12:04:34 +0000

Now that we’ve got the hardest part down, it all gets easier from here. This chapter will be simple, just some code that has scoring. Also, as promised, we’re going to have a function run when the player is hit by an enemy. Let’s start with this one first, eh?

In order to do this, we have to make a frame called “lose”. This will be the frame that we’ll navigate to when we get hit. It’ll be simple, just some text that says “You Lose” and a listener for keystrokes or a click that will return us to play another game. First, make the frame called “lose”. I recommend making an entire new layer for labels, but this isn’t required. In that frame, draw or type in whatever you want to signify that the player has lost the game. I’m just going to put the text, “YOU LOSE”.

Then, in the actions, type in the following code:

stop();
 
stage.addEventListener(MouseEvent.CLICK, goBack);
 
function goBack(event:MouseEvent):void{
	gotoAndStop(1);
	stage.removeEventListener(MouseEvent.CLICK, goBack);
}

Then, we’ll have to add a variable called gameOver to signify that the game is over and that some stuff should be deleted and such.

//whether or not the game is over
var gameOver:Boolean = false;

Then, both in the Bullet‘s and the Enemy‘s eFrame() function, add the following code:

//checking if game is over
if(_root.gameOver){
	removeEventListener(Event.ENTER_FRAME, eFrame);
	this.parent.removeChild(this);
}

Finally, add this code to where we hit tested for the main character in “Enemy.as”

//hit testing with the user
if(hitTestObject(_root.mcMain)){
	//losing the game
	_root.gameOver = true;
	_root.gotoAndStop('lose');
}

If you test the game, there will be a bug that comes up. Don’t worry, we can fix it. Just keep mcMain in the “lose” frame. Also, so it can’t be controlled while in the “lose” frame, place the following code:

//keeping mcMain out of sight
mcMain.x = stage.stageWidth;
mcMain.y = stage.stageHeight;
mcMain.removeEventListener(Event.ENTER_FRAME, moveChar);

Phew, that was a lot of work, wasn’t it? Now we can move onto actually scoring the game. First, we have to define a score variable at the top:

//the player's score
var score:int = 0;

Then, increment the score every time an enemy is killed. Place this code in the Enemy’s hit testing for the bullet.

//up the score
_root.score += 5;

Now, we can show the score to the user with a dynamic text field. Make one at the bottom of the stage and give it an instance name of txtScore. Next, place this code into the moveChar function.

//updating the score text
txtScore.text = 'Score: '+score;

Pretty easy, right? Well, that’s all we’re going to do for scoring. Next, we’ll add some sweet finishing touches, eh?

How to Make a Vertical Shooter in AS3 – Part 4

Mr Sun — Mon, 20 Jul 2009 12:03:06 +0000

Now we have to make it so the enemies can be shot. This probably will be the most complicated of the steps. But, it also is what makes this thing a game. There are two ways that I know of to accomplish this task. The first one is to have the bullet listen for hit testing the enemy, or the enemy listen for the bullet. It’s basically the same thing. However, I’m going to have the enemy listen for the bullet, just because.

The first thing we need to do in order to accomplish this feat is to create a container for all of the bullets. This way, we can access all of the bullets through the container. I can’t really explain this too well, so I’ll just demonstrate it for you. At the top of the code, add the following:

//this movieclip will hold all of the bullets
var bulletContainer:MovieClip = new MovieClip();
addChild(bulletContainer);

The bulletContainer is invisible and is just a container for all of the bullets. In order for this to be any use to us, we need to actually add the bullets to this container. This will be easy. Instead of the code where we add the bullet to the stage, addChild(newBullet);, we just replace it with bulletContainer.addChild(newBullet). It’s as simple as that. But now arises a problem. When we remove the MovieClip from stage, it returns an error. This is simple to fix. Instead of saying just _root.removeChild(this) in the “Bullet.as” file, replace it with _root.bulletContainer.removeChild(this);. Just another simple quick fix.

Now we enter complicated territory. Go to “Enemy.as” and add the following code to the eFrame() function:

//checking if it is touching any bullets
//we will have to run a for loop because there will be multiple bullets
for(var i:int = 0;i<_root.bulletContainer.numChildren;i++){
	//numChildren is just the amount of movieclips within
	//the bulletContainer.
 
	//we define a variable that will be the bullet that we are currently
	//hit testing.
	var bulletTarget:MovieClip = _root.bulletContainer.getChildAt(i);
 
	//now we hit test
	if(hitTestObject(bulletTarget)){
		//remove this from the stage if it touches a bullet
		removeEventListener(Event.ENTER_FRAME, eFrame);
		_root.removeChild(this);
		//also remove the bullet and its listeners
		_root.bulletContainer.removeChild(bulletTarget);
		bulletTarget.removeListeners();
	}
}

You might note that we have to run removeListeners() which isn’t a preset ActionScript function. We have to define it in the Bullet class because there isn’t any other way to remove the listeners. Just define the function in the “Bullet.as” file.

public function removeListeners():void{
	removeEventListener(Event.ENTER_FRAME, eFrame);
}

Now, try out your game. It should work pretty well now. The only problem with it, however, is that it doesn’t do anything when it touches the player. We aren’t going to really do anything with this right now, but we will set it up so we can make a function for it in the next part of the tutorial, “Scoring”. Just place the following code in the Enemy‘s eFrame() function:

//hit testing with the user
if(hitTestObject(_root.mcMain)){
	//we'll add code here in the next part
	//but for now, we'll just trace something
	trace('You got hit!');
}

Well, that’s all for today. Join us next time when we score the game!

How to Make a Vertical Shooter in AS3 – Part 3

Mr Sun — Mon, 20 Jul 2009 12:02:19 +0000

Well, now that we can make our lil’ guy shoot, we have to make something for him to shoot at! I’m going to first start by just drawing a little enemy guy. It won’t be too artistic.

Its dimensions are 30×30 if you wanted to know.

Now, do the same thing we did for the bullet, convert it to a MovieClip, and Export it for ActionScript. This time, give it a class of “Enemy”. I think you know what’s next. Now, we have to create another external file for the enemy. Once you’ve done that, place in the following code:

//This is the basic skeleton that all classes must have
package{
	//we have to import certain display objects and events
	import flash.display.MovieClip;
	import flash.events.*;
	//this just means that Eullet will act like a MovieClip
	public class Enemy extends MovieClip{
		//VARIABLES
		//this will act as the root of the document
		//so we can easily reference it within the class
		private var _root:Object;
		//how quickly the enemy will move
		private var speed:int = 5;
		//this function will run every time the Bullet is added
		//to the stage
		public function Enemy(){
			//adding events to this class
			//functions that will run only when the MC is added
			addEventListener(Event.ADDED, beginClass);
			//functions that will run on enter frame
			addEventListener(Event.ENTER_FRAME, eFrame);
		}
		private function beginClass(event:Event):void{
			_root = MovieClip(root);
		}
		private function eFrame(event:Event):void{
			//moving the bullet up screen
			y += speed;
			//making the bullet be removed if it goes off stage
			if(this.y > stage.stageHeight){
				removeEventListener(Event.ENTER_FRAME, eFrame);
				_root.removeChild(this);
			}
		}
	}
}

If you didn’t notice, I just copied and pasted the code from “Bullet.as” and edited it around a little bit. You’ll find that you will do this often when making classes. This code will just make the Enemy just move down the screen. Now, we have to add code to the main timeline that will create it and add it to the stage.

We first have to add 2 variables at the top of our code. They will be similar to cTime and cLimit but instead they are for creating enemies. Here’s the code:

//how much time before another enemy is made
var enemyTime:int = 0;
//how much time needed to make an enemy
//it should be more than the shooting rate
//or else killing all of the enemies would
//be impossible :O
var enemyLimit:int = 16;

Next, we have to create a function that will add the enemies to the stage. We don’t really want too many enterFrame functions so we can just add to the moveChar function. If you want, you can rename it to eFrameFunctions so that you don’t get confused on the purpose of the code. Add this to the bottom of that function.

//adding enemies to stage
if(enemyTime < enemyLimit){
	//if time hasn't reached the limit, then just increment
	enemyTime ++;
} else {
	//defining a variable which will hold the new enemy
	var newEnemy = new Enemy();
	//making the enemy offstage when it is created
	newEnemy.y = -1 * newEnemy.height;
	//making the enemy's x coordinates random
	//the "int" function will act the same as Math.floor but a bit faster
	newEnemy.x = int(Math.random()*(stage.stageWidth - newEnemy.width));
	//then add the enemy to stage
	addChild(newEnemy);
	//and reset the enemyTime
	enemyTime = 0;
}

This code will constantly add the enemies to the stage, which is exactly what we want. This ends this part of the tutorial. Next time, we’ll program the enemies so they get shot!

How to Make a Vertical Shooter in AS3 – Part 2

Mr Sun — Mon, 20 Jul 2009 12:01:19 +0000

Well, now that we’ve got the character moving, we have to make him able to shoot. The first step in doing this is to create a MovieClip which will be the bullet. Mine is 5×30 pixels. Give it a name of “Bullet” with the capitals. We also are going to have to export it for actionscript. Hopefully by now, you know how to do this. But, I’ll explain it once again (for the 5th time).

Right click the MovieClip and click on “Linkage…”. A window will pop up. In this window, check off “Export for ActionScript” and leave everything just as it is.

Now that we’ve got this down, we’re going to make a “Bullet” class. To do this, we have to make an external .as file. Press Command+N if you are on a Mac or Ctrl+N if you are on Windows and under “Type:”, select “ActionScript File”. Then, immediately save this file as “Bullet.as” in the same directory as your main game. Then, within it, type in the following code:

//This is the basic skeleton that all classes must have
package{
	//we have to import certain display objects and events
	import flash.display.MovieClip;
	import flash.events.*;
	//this just means that Bullet will act like a MovieClip
	public class Bullet extends MovieClip{
		//VARIABLES
		//this will act as the root of the document
		//so we can easily reference it within the class
		private var _root:Object;
		//how quickly the bullet will move
		private var speed:int = 10;
		//this function will run every time the Bullet is added
		//to the stage
		public function Bullet(){
			//adding events to this class
			//functions that will run only when the MC is added
			addEventListener(Event.ADDED, beginClass);
			//functions that will run on enter frame
			addEventListener(Event.ENTER_FRAME, eFrame);
		}
		private function beginClass(event:Event):void{
			_root = MovieClip(root);
		}
		private function eFrame(event:Event):void{
			//moving the bullet up screen
			y -= speed;
			//making the bullet be removed if it goes off stage
			if(this.y < -1 * this.height){
				removeEventListener(Event.ENTER_FRAME, eFrame);
				_root.removeChild(this);
			}
		}
	}
}

This code really won’t do anything by itself. We have to add it to stage whenever the player presses a button (the Space Bar). We also want to limit how quickly the user can shoot. This will be easy. Just add these variables to the top of the main code:

//how much time before allowed to shoot again
var cTime:int = 0;
//the time it has to reach in order to be allowed to shoot (in frames)
var cLimit:int = 12;
//whether or not the user is allowed to shoot
var shootAllow:Boolean = true;

Next, we have to add a timer that will increment the cTime variable every frame. We won’t use the built in Timer class that ActionScript has (if you even know what that is) because going by frames is much more efficient. Add this code to the moveChar() function:

//Incrementing the cTime
 
//checking if cTime has reached the limit yet
if(cTime < cLimit){
	cTime ++;
} else {
	//if it has, then allow the user to shoot
	shootAllow = true;
	//and reset cTime
	cTime = 0;
}

Now we can finally allow the shooting to occur. Add this code to the checkKeysDown() function.

//checking if the space bar is pressed and shooting is allowed
if(event.keyCode == 32 && shootAllow){
	//making it so the user can't shoot for a bit
	shootAllow = false;
	//declaring a variable to be a new Bullet
	var newBullet:Bullet = new Bullet();
	//changing the bullet's coordinates
	newBullet.x = mcMain.x + mcMain.width/2 - newBullet.width/2;
	newBullet.y = mcMain.y;
	//then we add the bullet to stage
	addChild(newBullet);
}

Now if you test your movie, you should be able to shoot! Hurrah!

This concludes this part of the tutorial, stay tuned for the next one, creating enemies!

How to Make a Vertical Shooter in AS3 – Part 1

Mr Sun — Mon, 20 Jul 2009 12:00:18 +0000

Today, we’re going to make a classic vertical shooter game in ActionScript 3. I hope you learn from it! Let us begin.

The first thing that I’m going to do is make the background of my game black, so it looks more retro. Then, we’re going to have to make the frame rate faster, mine will be 24 fps. Also, this will be a vertical shooter, so we probably should make the playing screen less wide. My new dimensions are at 300×400 pixels.

Next, we’re going to draw a character. Mine will be simple, just a triangle pointing upwards.

The dimensions for it are 30×35 pixels.

Then, we’re going to turn it into a symbol. After that, we’re going to call it mcMain for main character. We will need this so we can reference the guy later. Now we’re ready to code this sucker. Make a new layer called “actions” and add the following code:

//these booleans will check which keys are down
var leftDown:Boolean = false;
var upDown:Boolean = false;
var rightDown:Boolean = false;
var downDown:Boolean = false;
//how fast the character will be able to go
var mainSpeed:int = 5;
 
//adding a listener to mcMain that will move the character
mcMain.addEventListener(Event.ENTER_FRAME, moveChar);
function moveChar(event:Event):void{
	//checking if the key booleans are true then moving
	//the character based on the keys
	if(leftDown){
		mcMain.x -= mainSpeed;
	}
	if(upDown){
		mcMain.y -= mainSpeed;
	}
	if(rightDown){
		mcMain.x += mainSpeed;
	}
	if(downDown){
		mcMain.y += mainSpeed;
	}
	//keeping the main character within bounds
	if(mcMain.x <= 0){
		mcMain.x += mainSpeed;
	}
	if(mcMain.y <= 0){
		mcMain.y += mainSpeed;
	}
	if(mcMain.x >= stage.stageWidth - mcMain.width){
		mcMain.x -= mainSpeed;
	}
	if(mcMain.y >= stage.stageHeight - mcMain.height){
		mcMain.y -= mainSpeed;
	}
}
//this listener will listen for down keystrokes
stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeysDown);
function checkKeysDown(event:KeyboardEvent):void{
	//making the booleans true based on the keycode
	//WASD Keys or arrow keys
	if(event.keyCode == 37 || event.keyCode == 65){
		leftDown = true;
	}
	if(event.keyCode == 38 || event.keyCode == 87){
		upDown = true;
	}
	if(event.keyCode == 39 || event.keyCode == 68){
		rightDown = true;
	}
	if(event.keyCode == 40 || event.keyCode == 83){
		downDown = true;
	}
}
//this listener will listen for keys being released
stage.addEventListener(KeyboardEvent.KEY_UP, checkKeysUp);
function checkKeysUp(event:KeyboardEvent):void{
	//making the booleans false based on the keycode
	if(event.keyCode == 37 || event.keyCode == 65){
		leftDown = false;
	}
	if(event.keyCode == 38 || event.keyCode == 87){
		upDown = false;
	}
	if(event.keyCode == 39 || event.keyCode == 68){
		rightDown = false;
	}
	if(event.keyCode == 40 || event.keyCode == 83){
		downDown = false;
	}
}

Yes, sometimes with arrow keys, the code does get very repetitive.

Actually, this is all that this part of the tutorial actually requires. Next time, we’ll make the main character shoot!

How to Make a Rhythm Game in AS3 – Part 6

Mr Sun — Sun, 19 Jul 2009 12:06:53 +0000

The next step in making our rhythm game is scoring. The user will get points depending on how far away the arrow is from the receptor when it hits it. We’re also going to make the health bar gain and lose parts when the user hits or misses the receptor. First of all, we need to define a score variable at the top of the game frame. We also have to define a String variable that will show how well the user hits the arrow.

//the score variable
var score:int = 0;
//either perfect, great, nice, or good
var scoreString:String = '';

That was pretty easy. Next, we want to increase the score whenever the user hits the right key when it hits the score. We’re going to make it increase by 10 for a perfect hit, 8 for a great hit, 6 for an nice hit, and 4 for a good hit. Add this code to the “Arrow.as” class in the checkKeys() function:

private function checkKeys(e:KeyboardEvent):void{
	//checking if a certain key is down and it's touching the receptor
	if(e.keyCode == arrowCode && this.hitTestObject(_root.mcReceptor)){
		//checking if the correct key is down
		//if the user hits it about perfectly
		//the receptors y coordinate is about 10 px away from the
		//symbol's y coordinate.
		if(this.y <= _root.mcReceptor.y + 15 && this.y >= _root.mcReceptor.y + 5){
			_root.score += 10;
			_root.scoreString = 'Perfect';
		} else if (this.y <= _root.mcReceptor.y + 25 && this.y >= _root.mcReceptor.y-5){
			_root.score += 8;
			_root.scoreString = 'Great';
		} else if (this.y <= _root.mcReceptor.y + 40 && this.y >= _root.mcReceptor.y -30){
			_root.score += 6;
			_root.scoreString = 'Nice';
		} else {
			_root.score += 4;
			_root.scoreString = 'Good';
		}
 
		destroyThis();//remove it from stage
	}
}

The next thing we have to do now is program the health bar. If the user misses or hits the arrow key at the wrong time, then we have to lose health. If the user hits it right though, the health will increase. First of all, give the health bar an instance name, mcHealth. Then, we’re going to make a function for this, so we don’t have to write all the if statements repeatedly. Define this function at the bottom of your code:

//this function will change the health depending on how much health change
//it needs, positive or negative
function changeHealth(healthDiff:Number):void{
	healthDiff /= 100;//the scaleX only changes in percentages
	//checking if the health is already at it's full
	//or will be full after this hit
	if(mcHealth.scaleX + healthDiff >= 1){
		mcHealth.scaleX = 1;
	} else if(mcHealth.scaleX + healthDiff <= 0){
		//checking if the health will be equal or below 0
		//lose function will go here
 
	} else {
		//if there are no problems
		mcHealth.scaleX += healthDiff;
	}
}

The next thing we’re going to do is run this function positively when the user hits the key correctly. In the arrow’s code where it hit tests with the receptor, put this code for perfect:

changeHealth(5);

This will increase the health by 5. You can do the rest yourself, just keep on decrementing the health change by 1, and you’ll be good.

Next comes the hard part, making the user lose health. Again, we have to define a few variables at the top. They will be Booleans saying whether or not the receptor is touching a certain key.

//Booleans checking if the arrows are touching the receptor
var touchLeft:Boolean = false;
var touchUp:Boolean = false;
var touchDown:Boolean = false;
var touchRight:Boolean = false;

Now, add this code to the makeLvl() function:

//checking if mcReceptor is touching any arrows
	//first we reset the variables we got last time just in case they aren't true anymore
	touchLeft = false;
	touchUp = false;
	touchDown = false;
	touchRight = false;
	//this for loop will be used for the hit testing
	for(var i:int = 0;i<numChildren;i++){
		var target:Object = getChildAt(i);
		if(target.arrowCode != null && target.hitTestObject(mcReceptor)){//if the object is an arrow and is touching the receptor
			if(target.arrowCode == 37){//if left arrow
				touchLeft = true;
			} else if(target.arrowCode == 38){//if up arrow
				touchUp = true;
			} else if(target.arrowCode == 40){//if down arrow
				touchDown = true;
			} else if(target.arrowCode == 39){//if right arrow
				touchRight = true;
			}
		}
 
 
	}

Now that we have the variables checking which arrow is touching the receptor, now we need some key checkers. Add this to the bottom of your code in the “game” frame:

stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeys);
function checkKeys(e:KeyboardEvent):void{
	//if the left key is down and no left arrows are touching the receptor
	if(e.keyCode == 37 && !touchLeft){
		changeHealth(-10); //make the health go down
	} else if(e.keyCode == 38 && !touchUp){//and so on
		changeHealth(-10);
	} else if(e.keyCode == 40 && !touchDown){
		changeHealth(-10);
	} else if(e.keyCode == 39 && !touchRight){
		changeHealth(-10);
	}
}

Phew, that took a while. Now, for the final part of losing health, when the person misses the arrow altogether. Place this code at the end of the arrow’s eFrame function.

//if game is over or it's off the stage, destroy it
if(_root.gameOver || this.y < -60){
	//if off the stage
	if(this.y < -60){
		_root.changeHealth(-10);
	}
	destroyThis();
}

Well, that’s all for scoring. This probably has been the longest lesson in the series. If you survived through this without having any trouble, then you can do the next part without my help, the finishing touches.

How to Make a Vertical Shooter in AS2 – Part 6

Mr Sun — Sun, 19 Jul 2009 12:06:47 +0000

The first thing I want to do is show the score on the “lose” screen. That’ll be pretty easy, just add a dynamic text field there.

//creating background particles
bgHolder.createEmptyMovieClip("bg"+totalBgShapes, bgHolder.getNextHighestDepth());
bgHolder["bg"+totalBgShapes].beginFill(0x333333); //this just determines the shape's color
bgHolder["bg"+totalBgShapes]._x = int(Math.random()*550);
gHolder["bg"+totalBgShapes]._y = -50 - bgHolder._y;
//creating 4 random points to make a random shape
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].lineTo(int(Math.random()*25), int(Math.random()*25));
bgHolder["bg"+totalBgShapes].endFill();//finishes up the shape
 
bgHolder["bg"+totalBgShapes].onEnterFrame = function(){//giving it some actions
	if(this._y > 450 - bgHolder._y || _root.gameOver){//if it goes off the stage or game is over
		//then destroy it
		this.removeMovieClip();
	}
}
 
totalBgShapes ++;
bgHolder._y += 2;

Pretty intense, eh? Well, this is a finishing touch, and most finishing touches are pretty intense. Now, we have to make it so mcMain is on top of everything with this code at the end:

mcMain.swapDepths(1000);

Also, remove mcMain when gameOver is true or else strange things will happen.

There is one final thing that I want to do before actually wrapping up this tutorial. For some reason, there is a bug where a bullet disappears for some strange reason. I think I know exactly how to fix it. When we added the bullet to the stage, we made its depth the _root.getNextHighestDepth. I’m sorry, it should actually be bulletHolder.getNextHighestDepth.

Well, that’s actually all that I really have to finish off the game. I hope you had fun making it!

How to Make a Vertical Shooter in AS2 – Part 5

Mr Sun — Sun, 19 Jul 2009 12:05:02 +0000

In order to do this, we have to make a frame called “lose”. This will be the frame that we’ll navigate to when we get hit. It’ll be simple, just some text that says “You Lose” and a listener for keystrokes that will return us to play another game. First, make the frame called “lose”. I recommend making an entire new layer for labels, but this isn’t required. In that frame, draw or type in whatever you want to signify that the player has lost the game. I’m just going to put the text, “YOU LOSE” and, in smaller text, “Press Space to Restart”.

Then, in the actions, type in the following code:

stop();//stops the game so nothing goes wrong
 
_root.onEnterFrame = function(){ //create a function to check for keystrokes
	if(Key.isDown(32)){//if the space key is down...
		gotoAndStop(1); //then go back to the first frame, restarting the game
	}
}

Now, I’ve noticed a bit of a problem in the main code. For some reason, the game thinks that you get hit whenever you shoot an enemy. I’ve found a way around this strange behavior, however. First of all, add this variable to the top of the code:

//showing the amount of enemies that have been added to the stage
var enemyTotal:Number = 0;

Next, find the code where we have to create the enemy and add it to the stage. Change it to this:

_root.attachMovie('mcEnemy', 'en'+enemyTotal,_root.getNextHighestDepth());//then add the enemy
//setting it's coordinates
_root['en'+enemyTotal]._x = int(Math.random()*Stage.width);//randomly within the boundaries
_root['en'+enemyTotal]._y = -50; //sets this offstage at first
_root['en'+enemyTotal].onEnterFrame = function(){//then give it some functions
	this._y += 5;
 
	//run a loop checking if it's touching any bullets
	for(var cBullet:String in _root.bulletHolder){
		//if it's touching the bullet
		//we have to use coordinates because hit testing doesn't seem to work
		if(this._y >= _root.bulletHolder[cBullet]._y-30 && this._y <= _root.bulletHolder[cBullet]._y){
			if(this._x <= _root.bulletHolder[cBullet]._x+5 && this._x >= _root.bulletHolder[cBullet]._x -35){
				//then destroy this guy
				this.removeMovieClip();
				//and destroy the bullet
				_root.bulletHolder[cBullet].removeMovieClip();
			}
		}
	}
 
	//hit testing with the user
	if(this.hitTest(_root.mcMain)){
		//we'll add code here in the next part
		//but for now, we'll just trace something
		trace('You just got hit!');
	}
}
enemyTime = 0;//reset the time
enemyTotal ++; //add 1 more to the amount of enemies total

I’m sorry about this delay, but we need this to continue on with our game.

Now, we have to create a new variable at the top that will say whether or not the game has been ended:

stop();//add a stop function too!
 
var gameOver:Boolean = false;

Then, add this code to both the mcBullet‘s and mcEnemy‘s onEnterFrame functions:

//checking if the game is over
if(gameOver){
	//destroy this guy if the game is over
	this.removeMovieClip();
}

Now, we can make this Boolean false when the user gets touched by the enemy. Find where we hit test for mcMain and replace that trace statement with:

//hit testing with the user
if(this.hitTest(_root.mcMain)){
	//set the game to be over and go to lose screen
	gameOver = true;
	gotoAndStop('lose');
}

Phew, that was a lot of work, wasn’t it? Now we can move onto actually scoring the game. First, we have to define a score variable at the top:

//the player's score
var score:Number = 0;

Then, increment the score every time an enemy is killed. Place this code in the Enemy’s hit testing for the bullet.

//up the score
_root.score += 5;

Now, we can show the score to the user with a dynamic text field. Make one at the bottom of the stage and give it an instance name of txtScore. Next, place this code into the onEnterFrame function.

//updating the score text field
txtScore.text = 'Score:  '+score;

Pretty easy, right? Well, that’s all we’re going to do for scoring. Next, we’ll add some sweet finishing touches, eh?

How to Make a Vertical Shooter in AS2 – Part 4

Mr Sun — Sun, 19 Jul 2009 12:04:34 +0000

//this movieclip will hold all of the bullets
_root.createEmptyMovieClip('bulletHolder', _root.getNextHighestDepth());

The bulletHolder is invisible and is just a container for all of the bullets. In order for this to be any use to us, we need to actually add the bullets to this container. This will be easy. Find where we add the bullet to the stage:

_root.attachMovie('mcBullet', 'Bullet'+bulletID,_root.getNextHighestDepth());
//setting the coordinates of the bullet to be the same as the main character
_root['Bullet'+bulletID]._x = mcMain._x + mcMain._width/2 - _root['Bullet'+bulletID]._width/2;
_root['Bullet'+bulletID]._y = mcMain._y;
	_root['Bullet'+bulletID].onEnterFrame = function(){
	//giving the bullet some actions
	this._y -= 10; //moving the bullet
	if(this._y < -1 * this._height){//if the bullet goes off stage
		//then destroy it
		this.removeMovieClip();
	}
}

Change it to this:

bulletHolder.attachMovie('mcBullet', 'Bullet'+bulletID,_root.getNextHighestDepth());
//setting the coordinates of the bullet to be the same as the main character
bulletHolder['Bullet'+bulletID]._x = mcMain._x + mcMain._width/2 - bulletHolder['Bullet'+bulletID]._width/2;
bulletHolder['Bullet'+bulletID]._y = mcMain._y;
bulletHolder['Bullet'+bulletID].onEnterFrame = function(){
	//giving the bullet some actions
	this._y -= 10; //moving the bullet
	if(this._y < -1 * this._height){//if the bullet goes off stage
		//then destroy it
		this.removeMovieClip();
	}
}

Now we enter complicated territory. Find the onEnterFrame function we added to the Enemy. Add the following to it:

//run a loop checking if it's touching any bullets
for(var cBullet:String in _root.bulletHolder){
	//if it's touching the bullet
	//we have to use coordinates because hit testing doesn't seem to work
	if(this._y >= _root.bulletHolder[cBullet]._y-30 && this._y <= _root.bulletHolder[cBullet]._y){
		if(this._x <= _root.bulletHolder[cBullet]._x+5 && this._x >= _root.bulletHolder[cBullet]._x -35){
			//then destroy this guy
			_root['en'+enID].removeMovieClip();
			//and destroy the bullet
			_root.bulletHolder[cBullet].removeMovieClip();
		}
	}
}

			//hit testing with the user
			if(this._y >= _root.mcMain._y-30 && this._y <= _root.mcMain._y){
				if(this._x <= _root.mcMain._x+30 && this._x >= _root.mcMain._x -30){
					//we'll add code here in the next part
					//but for now, we'll just trace something
					trace('You got hit!');
				}
			}

Well, that’s all for today. Join us next time when we score the game!