Tutorial: Make a Vertical Shooter in AS3 – Part 6
Categories: Flash
Table of Contents
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= 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!
var theParticle:Object = particleContainer.getChildAt(i);
This is an ERROR.
Should be…
var theParticle:DisplayObject […]
November 17th, 2008 at 10:46 am
is there an easy way to have the enemies also shooting?
December 1st, 2008 at 6:26 pm
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!
January 27th, 2009 at 11:59 pm
How can I move the particles to the background?
February 17th, 2009 at 2:57 am
This is such a great tutorial!Its been a while I was looking for one in AS3.
Thanks a lot!
April 13th, 2009 at 7:25 pm
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.
May 12th, 2009 at 8:33 pm
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.
May 12th, 2009 at 11:19 pm
I think its safe to say… AS2 was sooo much easier lol
June 15th, 2009 at 11:42 am
Some handy techniques here (e.g hitTest container mc), thanks alot.
June 25th, 2009 at 12:21 pm
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.
October 12th, 2009 at 10:25 am
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 😀
March 6th, 2010 at 6:02 pm
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!
March 31st, 2010 at 5:44 pm
“I hope you had fun making it!”
I sure did, I learnt a bit too. Thank you. 🙂
May 11th, 2010 at 7:47 pm
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.
June 1st, 2010 at 6:20 pm
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!
June 1st, 2010 at 6:34 pm
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 🙂
June 16th, 2010 at 1:52 pm