Tutorial: Make a Vertical Shooter in AS3 – Part 6


Written By MrSun at 8:05 am - Saturday, August 23rd, 2008
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

Step 6: Finishing Touches

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!

The Final Product:

Source Files (zipped)

16 Comments

Dannicus:

var theParticle:Object = particleContainer.getChildAt(i);

This is an ERROR.

Should be…
var theParticle:DisplayObject [...]


Andy:

is there an easy way to have the enemies also shooting?


Tee:

Can A health Bar Be added in to your Character? And if so How does that Work. I am new to As3 Just trying to pick up tricks of the trade!


Yariv:

How can I move the particles to the background?


Irlana:

This is such a great tutorial!Its been a while I was looking for one in AS3.
Thanks a lot!


Seth:

Tee i’m working on something like that right now, i’m doing a XP bar and a leveling system first though.
Your comment was like 4 months ago but if you still care i’m trying to do something like that.


Seth:

Ok i think i got a basic HP system down.

So heres what you do;

At the top of your main script (frame 1), add a new variable definition:
var hitPoints:int = 100;

Next, your going to want to make an HP Bar graphic. Draw a white rectange that is 100×25, and convert it to a MovieClip called mcHp. Now in the library go into the edit mode on mcHp and add a new layer within the MovieClip, draw a 100×25 green rectangle on this layer and make it perfectly overlap the white rectangle on the previous layer. Add keyframes to frame 100 on both layers, and on the layer with the green rectangle create a shape tween between the 1st and 100th frame. Go back to frame 1, still on the green rectangle layer, and resize the green rectangle to 1 pixel in width. You are now done making the HP bar.

Now go back to your main script, and insert this:

addEventListener(Event.ENTER_FRAME, hpBar); //New Listener
function hpBar(event:Event):void { //New Function
if (gameOver) { //Checking if the game is over
removeEventListener(Event.ENTER_FRAME, hpBar); //If it is remove the listener
}
mcHp.gotoAndStop(hitPoints); //Set the HP bars internal frame to be the same as your HP value
if (hitPoints <= 0) { //If your out of HP…
gameOver = true; //End the Game…
gotoAndStop(2); //Go to the You Lose screen…
}
}

Now go to enemy.as and replace the current event that takes place if the enemy collides with you with this:

_root.hitPoints -= 25;
removeEventListener(Event.ENTER_FRAME, eFrame);
this.parent.removeChild(this);

Done if i remember correctly.

http://megaswf.com/view/d8d19647ee51161fee4b14c4ed908044.html
That would be the game with the HP bar that i just described and a few of my own changes, yes I am aware that there are some bugs.


Ross:

I think its safe to say… AS2 was sooo much easier lol


Barney:

Some handy techniques here (e.g hitTest container mc), thanks alot.


jimmy:

Hey, first of all i want to say these are great tutorials!

I have a question: Is it possible to make a game like this, without the use of external actionscript files?
I am a first year student and got the assignment to make a game in AS3.

But the problem is the action script should exclusively be on the upper frame. So if you open the actions window, only that script should be visible. Since im looking for tutorials, i noticed most of them use external actionscript.. So that quite a problem in my case..

Hope that you can help me out someway..

Thanks in advance! grts Jim.


TomTom:

Nice Tutorial, the healthbar from Seth works just fine. I managed to get a background sound play and a short “boom”, when an enemy is hit.
I’m still adding stuff, right now I’m wondering how you could play a little clip (e.g. explosion) when you die or an enemy is destroyed.

Thanks again :D


d4rcr3st:

Thanks for this tutorial Mr.Sun. It is fantastic!

However I have one problem. I have created a stop motion movie clip where the squares (Enemy) explodes. The movie clip is called Explosion and it’s linkage is called Explosion too.

Where do I need to put the script? I tried doing it in the Enemy.swf file where you hitTestObject. Maybe that’s the wrong place or my scripting is wrong. But could you help me please?

Thanks in advance!


ahaslam:

“I hope you had fun making it!”
I sure did, I learnt a bit too. Thank you. :)


Roc:

Hey Mr. Sun.. You are all that is MAN in programming flash games! Can you, by any chance, program a boss at the end of the level? Show us how to make is so it displays how much life he has left, and make him blink red when the hero shoots him? That would be awesome. Thanks.


Roc:

Hi mr. Sun. Can you show us how to make the enemies shoot bullets that can kill the hero? And can you also show us how to program a boss at the end of the level? Where we can display how much life he has left? And maybe make him blink red when we shoot him? Thanks!


Chris:

can you expand this tutorial because im really strugling on different thing like adding upgrages, levels and even just a high score. other than that it has helped alot :)


«
»