Tutorial: Make a Vertical Shooter in AS3
Categories: Flash
Table of Contents
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.
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!
thank you for this nice tutorial.
it helped me alot during my college assignmet.
December 9th, 2008 at 5:38 pm
How do you turn mcmain into a symbol?
Please, Please ansewer back!
February 5th, 2009 at 12:28 pm
Right click and click on “Covert to Symbol…”
February 5th, 2009 at 6:21 pm
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.
March 1st, 2009 at 9:03 am
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?
March 10th, 2009 at 5:19 pm
does this code work for cs4 also?
April 18th, 2009 at 5:40 pm
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.
April 29th, 2009 at 1:58 pm
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
May 6th, 2009 at 11:39 am
Thanks, I had no clue how to do AS3, and barely any clue about AS2 before I found your site. Your a huge help.
May 10th, 2009 at 1:01 am
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/
May 14th, 2009 at 4:24 pm
help, the keys dont work on mine but they work on yours….wtf?
what should i try?
September 15th, 2009 at 8:34 am
there is an error in the code, but i can’t seem to fix it
please help.
October 19th, 2009 at 9:11 am
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;
}
}
}
}
}
December 5th, 2009 at 11:17 am
Hello,
I would like to know how to make the same but in horizontal
cheers
February 14th, 2010 at 2:56 pm
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…
April 21st, 2010 at 3:30 pm
I made mcMain a graphic >_>
Thanks for posting the .fla. That’s helpful :]
May 17th, 2010 at 10:10 am
[…] 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 […]
June 4th, 2010 at 8:19 am