How to Create a Platform Game in AS3 – Part 1

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

Spread the Knowledge

  • Print
  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • Google Bookmarks
  • Design Float
  • DZone
  • Yahoo! Buzz
  • PDF
  • Reddit
  • RSS
  • Technorati

Preview

Download Source
(Requires Flash CS3 or above)

Subscribe!

Subscribe!
Enter your email address:  

Awesome Tutorials