Tutorial: Create a Platform Game in AS3
Categories: Flash
Table of Contents
Step 1: Basic Character Programming
Well, here we are in our first advanced tutorial. This time we’ll be creating a platform game similar to my GlowSticks except in ActionScript 3 and coded better. Let’s begin, shall we?
Let’s first begin with the basic setup of our game. I’m going to make the background black and the frame rate 24 fps (like in previous tutorials). The first thing to make is our little character. I won’t be too artistic with this one, just a little white circle
Its dimensions are 25×25 pixels.
Next, convert it into a MovieClip and give it an instance name of mcMain. Now, we can add code to move this character.
Just create a new “actions” layer and place this code in the first frame:
//These variables will note which keys are down
//We don't need the up or down key just yet
//but we will later
var leftKeyDown:Boolean = false;
var upKeyDown:Boolean = false;
var rightKeyDown:Boolean = false;
var downKeyDown:Boolean = false;
//the main character's speed
var mainSpeed:Number = 7;
//adding a listener to mcMain which will make it move
//based on the key strokes that are down
mcMain.addEventListener(Event.ENTER_FRAME, moveChar);
function moveChar(event:Event):void{
//if certain keys are down then move the character
if(leftKeyDown){
mcMain.x -= mainSpeed;
}
if(rightKeyDown){
mcMain.x += mainSpeed;
}
if(upKeyDown || mainJumping){
mainJump();
}
}
//listening for the keystrokes
//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){
leftKeyDown = true;
}
if(event.keyCode == 38 || event.keyCode == 87){
upKeyDown = true;
}
if(event.keyCode == 39 || event.keyCode == 68){
rightKeyDown = true;
}
if(event.keyCode == 40 || event.keyCode == 83){
downKeyDown = 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){
leftKeyDown = false;
}
if(event.keyCode == 38 || event.keyCode == 87){
upKeyDown = false;
}
if(event.keyCode == 39 || event.keyCode == 68){
rightKeyDown = false;
}
if(event.keyCode == 40 || event.keyCode == 83){
downKeyDown = false;
}
}
This code will simply make the character move left and right. Now, we have to make the character jump. We’ll accomplish this with a jump function and running it whenever the up key is down. First, we have to define a few variables:
//whether or not the main guy is jumping
var mainJumping:Boolean = false;
//how quickly should the jump start off
var jumpSpeedLimit:int = 15;
//the current speed of the jump;
var jumpSpeed:Number = jumpSpeedLimit;
Then, we’ll define a function which will make the guy jump. It’ll take some complicated math.
//jumping function
function mainJump():void{
//if main isn't already jumping
if(!mainJumping){
//then start jumping
mainJumping = true;
jumpSpeed = jumpSpeedLimit*-1;
mcMain.y += jumpSpeed;
} else {
//then continue jumping if already in the air
//crazy math that I won't explain
if(jumpSpeed < 0){
jumpSpeed *= 1 - jumpSpeedLimit/75;
if(jumpSpeed > -jumpSpeedLimit/5){
jumpSpeed *= -1;
}
}
if(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){
jumpSpeed *= 1 + jumpSpeedLimit/50;
}
mcMain.y += jumpSpeed;
//if main hits the floor, then stop jumping
//of course, we'll change this once we create the level
if(mcMain.y >= stage.stageHeight - mcMain.height){
mainJumping = false;
mcMain.y = stage.stageHeight - mcMain.height;
}
}
}
That’s some pretty intense code, eh? And you would have never thought that making a simple platform game would be so intense, right? Well, there’s a reason why this tutorial is labeled “Advanced”.
But now, it is time to close up this part of the tutorial. Next time, we’ll create a level with blocks we can walk on!
I have a question, does the character have to be a little circle? or can we make it different?
October 18th, 2008 at 12:22 am
I LOVE this tutorial and very much appreciate it man. However when i tried to replicate this page, my character would simply not jump!
I copied and pasted all of the code EXACTLY from this page and it still didn’t work. I simply gave up and downloaded the source file and copied the actionscript over to my file and it worked fine then. I can only assume that the code on this page has an error on it somewhere?
October 25th, 2008 at 8:39 am
HI,
This missing from the movement key detection:
if(upKeyDown || mainJumping){
mainJump();
}
Put that in and he’ll jump.
October 30th, 2008 at 6:29 am
I was wondering will it work with AS2??? I really need to know before i even attempt this tutorial
November 6th, 2008 at 5:31 pm
hi how can i make it work in AS2
November 10th, 2008 at 4:00 pm
Can you please try and explain that crazy math plaease? It works great but I wanna know exactly how it works.
Thanks
November 11th, 2008 at 7:42 pm
Thank boy! this is great tutorial! thank!
November 12th, 2008 at 4:57 am
hey i would like to ask a favour of you, could you PLEASE PLEASE PLEASE make a tutorial just like this but for Action Script 2.0 i would really appreciate it =)
November 22nd, 2008 at 2:08 am
exactly where in the actions layer do i have to place the second and the third codes?
November 22nd, 2008 at 1:48 pm
All of the code can go on the same frame. One section copy and pasted one right under the other.
Just be sure to add in the jumping check that Peter mentioned in an above post to allow the ball to jump
November 27th, 2008 at 5:20 am
i pasted all the code in as3 it all works but the jumping action where do i put?
if(upKeyDown || mainJumping){
mainJump();
}
December 5th, 2008 at 11:49 am
THIS WILL NOT WORK WITH ACTION SCRIPT 2, (AS2) if you want one for (AS2) then go google it or go to flashkit.com, otherwise this will not work for (AS2) this is only for the new Action script 3 (AS3) winch can be found in Flash CS3 and Flash CS4.
December 25th, 2008 at 11:29 pm
YES!!! thank you very much for this tutorial. REAL NICE!!!!!
January 6th, 2009 at 6:38 pm
Thank you very much for creating this tutorial. This was infinitely useful in my final project for my flash class, given how few AS3 tutorials there are available on the net these days. 🙂
PS – sent you an e-mail with some additional questions.
–SG2
January 12th, 2009 at 4:46 pm
Every time I get it to put in the first code it says
**Error** Scene=Scene 1, layer=actions, frame=1:Line 14: The class ‘Event’ could not be loaded.
function moveChar(event:Event):void{
**Error** Scene=Scene 1, layer=actions, frame=1:Line 30: The class ‘KeyboardEvent’ could not be loaded.
function checkKeysDown(event:KeyboardEvent):void{
**Error** Scene=Scene 1, layer=actions, frame=1:Line 48: The class ‘KeyboardEvent’ could not be loaded.
function checkKeysUp(event:KeyboardEvent):void{
Total ActionScript Errors: 3 Reported Errors: 3
If you have any suggestions, please tell me.
February 4th, 2009 at 12:36 pm
Thx for the guide!
Even tho i didnt understand a thing :S
Gonna read it more throughly! 😀
And btw Some guy, are you using actionscript 2???
February 15th, 2009 at 10:52 am
hey, thanks real helpful. i was wondering what can be done to make it jump higher?
February 17th, 2009 at 9:11 am
@Dave – The math is really not that crazy. No more than a little arithmetic. Go through it calculating jumpSpeed frame by frame. Heck, you could even graph it 🙂 That way you’ll really understand what’s going on (much better than if someone just told you).
February 19th, 2009 at 10:54 pm
okay.. i got an error it says: 1120: Access of undefined property mainJumping. and: 1180: Call to a possibly undefined method mainJump.
February 28th, 2009 at 11:22 pm
can i know how to make the main remain the same position?i mean,i’ve placed the main slightly higher than urs,then when i jump,it falls on the floor.
March 2nd, 2009 at 5:45 am
this doesnt work D: does it can be used on flash 8? and what actions need to be inside the balloon and whats in layer?!?!?!?! plz someone help me D: heres my email. gangstarapper_94@hotmail.com i wish some one seriusly help me whit this.
April 6th, 2009 at 11:54 am
yea i did everything and followed every step and read all the details and it just wont work 🙁
it keeps giving me like 30 errors on undefined properties and stuff.
i need help seriously!!!
May 5th, 2009 at 12:19 pm
The first block of code doesn’t work on its own because the jump variable and function aren’t identified yet. Also, for the jumping math, I just use jumpSpeed += 1, and it looks fine.
For those who ask where to put code etc., I suggest learning your basics before tackling something this advanced. 😛
July 7th, 2009 at 1:15 pm
Thanks, after about 42 tries this is the tutorial that finally taught me wtf actionscript is all about.
July 10th, 2009 at 7:07 pm
Great tutorial. Finally someone explained and commented the code for as3.
But my guy after first jump is higher than at the beginning. Why?
August 9th, 2009 at 12:56 pm
Do the hero have to have same height as width?
August 9th, 2009 at 1:34 pm
the code does not wofrk for me
August 13th, 2009 at 10:40 am
i found this site by chance, which is great but i dont understand why the jumping isnt workin. i really need this game done by early november. if any one can help me with the jumping i will gladly appreciate it my email is: b01ina_j01y@live.com.au
my msn is: my_car_rules@hotmail.com
dont get these mixed up as i dont check my msn because of the amount of spam i get.
thanks
August 19th, 2009 at 12:59 am
Hi,
thanks very much for your great tutorials. They are brilliant!
I have one problem with AS3 in this lesson above.
I modified your AS3 script and I added a motion hero. Almost everything is OK. He jumps correctly, but when he walks his legs don’t move.
What’s going on? Where the problem is?
I’m pasting a part of the code, which is connected to this problem, I suppose:
hero.addEventListener(Event.ENTER_FRAME, moveChar);
function moveChar(event:Event):void{
//if certain keys are down then move the character
if(leftKeyDown){
hero.x -= mainSpeed;
hero.scaleX=1;
hero.gotoAndStop(‘walking’);
}
else if(rightKeyDown){
hero.x += mainSpeed;
hero.scaleX=-1;
hero.gotoAndStop(‘walking’);
}
if(upKeyDown || mainJumping){
mainJump();
hero.gotoAndStop(‘jumping’);
}
else {
hero.gotoAndStop(‘still’);
}
}
Thank in advance,
Marcin
September 10th, 2009 at 11:04 am
Thank you 😀
October 15th, 2009 at 2:45 am
Познавательно, а продолжение будет?
October 17th, 2009 at 11:45 am
hi, how can we put more than one enemy in?
October 25th, 2009 at 4:21 am
thanks so much, as2 -> get out
October 29th, 2009 at 12:49 pm
hey very helpful tutorial. thanks.
hey you could modify it to use gravity instead of hardcoded values, it may be easier to understand that way.
December 2nd, 2009 at 4:33 am
Its so ridiculous how many people think this is for AS2 … if you read the top sentence, it has a link to something similar for AS2.
January 21st, 2010 at 8:17 pm
code is not working
I copied and pasted all code one after another n got lots of errors
1119: Access of possibly undefined property x through a reference with static type Class.
March 6th, 2010 at 6:03 pm
Sweet man… thanks alot you deserve a medal for it!! hehe.
I dunno what the ppl are crying about it works 100% perfect
March 18th, 2010 at 5:58 pm
may i noe how to change the character n everything wif my own design???
i try many times wif diff method…but i cant get it…can u pls help me…
March 23rd, 2010 at 4:47 am
Make it work in AS2? WTF! Learn AS3 already you dinosaurs! x|
March 24th, 2010 at 11:40 pm
hey i cant get the guy to move because the speed and jump actions dont have a defined property. how to define how much they should jump or move by?
April 13th, 2010 at 6:01 am
Hi, very good tutorial, but I don’t know how to change the jump max height…
April 22nd, 2010 at 2:38 pm
got everything in place but i keep getting compiler error 1083: Syntax error on line 77. } else { is unexpected. i’m pretty sure i told them it was coming…
April 22nd, 2010 at 7:42 pm
ok so what if we want a character who looks different when they move left or right? I find that many tutorials teaching how to make a platformer just ignore this and do the simple object thing.
May 4th, 2010 at 1:48 pm
AHHHHH!!!
Ní thuigim… 🙁
May 10th, 2010 at 6:52 am
Hey there, Novice AS3 coder here, and I have no problems so far, but what I am doing here is reading the code to understand why it was written that way, and its all good to my eyes except for the keyCode, I was wondering why you use what appear to be a random selection of numbers to identify keys. Are there KeyCodes for every key on the keyboard, if so how do I obtain a copy if not, please explain why you use keyCodes?
May 10th, 2010 at 8:21 am
[…] is het Mario-spelletje geüpload. Om het spelletje te maken heb ik gebruik gemaakt van de tutorial: . Maar genoeg over het spelletje. We gaan terug verder werken aan onze […]
May 25th, 2010 at 12:03 pm
wow, one year later… and there comes my question 😛
thank you for this tutorial, finaly i am getting to undersand AS3 😛
I want to make some kind of platform game, but with video images. So the problem i have now, is that it has different images for each key. Therefor i used this:
mcMain.addEventListener(Event.ENTER_FRAME, moveChar);
function moveChar(event:Event):void {
//if certain keys are down then move the character
if (leftKeyDown) {
mcMain.x-=mainSpeed;
mcMain.scaleX=-1;
mcMain.gotoAndStop(‘run’);
}
else if (rightKeyDown) {
mcMain.x+=mainSpeed;
mcMain.scaleX=1;
mcMain.gotoAndStop(‘run’);
}
else if (upKeyDown||mainJumping) {
mainJump();
mcMain.gotoAndStop(‘jump’);
}
else {
mcMain.gotoAndStop(‘stand’);
}
}
but when i use the keys i can not use jump and run at the same time. And i can run in the air 😛 can you please help me with this problem?
tnx
June 4th, 2010 at 11:25 am
[…] trytutorial now! […]
June 7th, 2010 at 10:57 am
For some reason my character does not land at the base of the screen after jumping, even if starting at the y=0 he seems to stop around y=5 or so. My code is identical to yours. After the first jump, the character lands roughly around y=5 and jumps from that reference and lands there after that.
June 25th, 2010 at 12:14 am