Tutorial: Create a Platform Game in AS3


Written By Mr Sun at 8:00 am - Saturday, August 30th, 2008
Categories: AS3, Advanced Tutorials, All Tutorials, Flash, Game Development

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

Final Product

Source .fla File

24 Comments

ryan:

I have a question, does the character have to be a little circle? or can we make it different?


Bruce:

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?


Peter:

HI,
This missing from the movement key detection:
if(upKeyDown || mainJumping){
mainJump();
}
Put that in and he’ll jump.


Kyle:

I was wondering will it work with AS2??? I really need to know before i even attempt this tutorial


mckendorh:

hi how can i make it work in AS2


Dave:

Can you please try and explain that crazy math plaease? It works great but I wanna know exactly how it works.
Thanks


gamestube:

Thank boy! this is great tutorial! thank!


Masuma!:

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 =)


sticmakerman:

exactly where in the actions layer do i have to place the second and the third codes?


Hot Rod:

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


coder:

i pasted all the code in as3 it all works but the jumping action where do i put?

if(upKeyDown || mainJumping){
mainJump();
}


P282:

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.


FRK:

YES!!! thank you very much for this tutorial. REAL NICE!!!!!


SG2:

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


Some guy:

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.


Me:

Thx for the guide!
Even tho i didnt understand a thing :S
Gonna read it more throughly! :D
And btw Some guy, are you using actionscript 2???


lvman:

hey, thanks real helpful. i was wondering what can be done to make it jump higher?


simon:

@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).


Gardengnomes:

okay.. i got an error it says: 1120: Access of undefined property mainJumping. and: 1180: Call to a possibly undefined method mainJump.


jan:

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.


mctoast:

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.


mcdurk:

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!!!


Bilbo:

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. :P


Loon:

Thanks, after about 42 tries this is the tutorial that finally taught me wtf actionscript is all about.


Leave a Comment

«
»