Tutorial: Make a Vertical Shooter in AS3


Written By MrSun at 8:00 am - Saturday, August 23rd, 2008
Categories: Flash

Step 1: Programming the Character

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.
My character
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!

Final Product

Source .fla File

17 Comments

Mehmet Can:

thank you for this nice tutorial.
it helped me alot during my college assignmet.


laksdfj;lkadjie:

How do you turn mcmain into a symbol?

Please, Please ansewer back!


Mr Sun:

Right click and click on “Covert to Symbol…”


Terence:

Mr Sun is it possible to make my hero animated? For example a rocket with small flames on the end and the same rocket but with big flames on the end, moving with the code you have provided.


AiR BEAR:

Mr Sun, What do I change in your code if, say, I named my symbol George? Would I simply change the mcMain or what? And every time I attempt to run this is comes up saying missing right bracket…but when I put it in it yells at me again *Sniffle* ….any suggestions?


crazykid:

does this code work for cs4 also?


Straussenheimer:

Terence, it is possible, but if you have not worked with animating flash then it will be a little hard to do right away, you should first familiarize yourself with animations, i advise using sprite sheets from spriters resource (look it up on google) and then putting them together in fireworks. then you can export them to flash and convert it into a movie clip symbol and you will have you animated rocket thingy, lol.


Rasmus Munter:

Terence, actualy its not to hard. A good tutorial on it if you go to http://www.tutorialized.com and search up dodgeball part 3, it will tell you


Seth:

Thanks, I had no clue how to do AS3, and barely any clue about AS2 before I found your site. Your a huge help.


justin:

I wanted 2 thank you sooo much for this tutorial it was such a big help in not only makeing this game but just getting back into the swing of AS3

any way check out the game I made based off this
http://www.justinlantz.com/shooter/


ryan Felton:

help, the keys dont work on mine but they work on yours….wtf?
what should i try?


omgtttttyyy:

there is an error in the code, but i can’t seem to fix it

please help.


lubo:

Thanks for the tutorial, its collision detection system was just what i was looking for. Wouldn’t it be better to use the following class for movement? (you would of course delete the up and down cases)

package
{
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.Event;
import flash.ui.Keyboard;
import flash.display.Stage;

public class movementengine extends MovieClip

{
private var speed:int = 5;

public function movementengine() {
stage.addEventListener(KeyboardEvent.KEY_DOWN, engine);

}
public function engine(event:KeyboardEvent) {

switch(event.keyCode) {

case Keyboard.RIGHT:
this.x=this.x+speed

break;
case Keyboard.LEFT:
this.x=this.x-speed

break;
case Keyboard.DOWN:
this.y=this.y+speed

break;
case Keyboard.UP:
this.y=this.y-speed

break;
}
}
}

}
}


remi:

Hello,
I would like to know how to make the same but in horizontal
cheers


Chandler:

I’m sorry, I had to follow your tutorial for my flash project. It was very hard to follow and some information was even missing! I’m 100% sure that my teacher could produce this within a few seconds. And the only reason other people think its good is because they download the source code! Please get better at writing this code, and while your are at it, go to a better site…


Ariel:

I made mcMain a graphic >_>
Thanks for posting the .fla. That’s helpful :]


Banner Nesquick:

[…] Voor deze opdracht heb ik me gebaseerdĀ op een gevonden tutorial. Ik geef eerlijk toe dat het coderen mij soms wat moeilijk af gaat, maar dmv deze tutorial, heb ik […]


«
»