Subscribe by E-mail:

Tutorial: Create a Platform Game in AS3


Written By Mr Sun on Aug 30, 2008 at 8:00 am

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;
	}
}
 
//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

Where do Flash Game Developers Come From?

Recently, I stumbled upon an interesting article from Mochiland that gives stats on where most flash game developers come from (who are signed up at Mochi). The top three countries are the United States (with 39%), United Kingdom (with 10%), and Canada (with 6%). It’s no surprise to see that most of the Western countries [...]

The Myths of Developing a Popular Game

There are, and there have been, thousands, maybe even millions of very successful games that have been released to the world. Some of them fully deserve their popularity while others aren’t the best. But, the one thing they have in common with each other is that they are liked. There are many beliefs about making [...]

The Video Game Name Generator

Recently, I stumbled upon an interesting tool called the Video Game Name Generator. What it does is take a bunch of common words that are used in video game names and mixes them up to create an interesting title for your game. I think it’s been around for a while but it’s still a pretty [...]

5 Ways to Make a Popular Clone

We all know that clones are just copies of other games. But, it is possible to make one popular, even if it isn’t totally original. Just use these tips and maybe your game will be well-received.
1. Base It Off of a Current Event
I cannot count how many game clones are based on current events, like [...]

50 Ways to Make Us HATE Your Web Design

Make the text way too small (under 10px)
Make everything a really bright color
Make everything a really dark color
Have an awful color scheme
Don’t optimize the images
Add flash animations everywhere
Add background music
Don’t make anchor tags look different from regular text
Make it all aligned in a weird way
Make the main navigation unfindable
Don’t separate any sections from each other
Make [...]

Link Post Sunday 08/24

Flash

How to Build an AS3 Videoplayer by The Tech Labs
ActionScript Filters Assist by Web Klan
AS3: Homegrown Particles by Brian Connatser
Showcase | Visualizing Data Roundup by Flash Enabled Blog
How-To: Creating a Preloader in ActionScript 3.0 and Flash CS3 by Todd Perkins

Web Design

Why I am No Longer Supporting IE6 by Ryan Farley
5 Steps for the Perfect Tabbed [...]

Tutorial: Make a Vertical Shooter in AS3 - Part 6

Table of Contents

Programming the Character
Programming the Character - Part 2
Creating the Enemies
Programming the Enemies
Scoring
Finishing Touches

Step 6: Finishing Touches
As always, the finishing touches of this game won’t be explained too much by me, in hopes that you actually can do some of this stuff by yourself. Of course, there will always be source files at the [...]

Tutorial: Make a Vertical Shooter in AS3 - Part 5

Table of Contents

Programming the Character
Programming the Character - Part 2
Creating the Enemies
Programming the Enemies
Scoring
Finishing Touches

Step 5: Scoring
Now that we’ve got the hardest part down, it all gets easier from here. This chapter will be simple, just some code that has scoring. Also, as promised, we’re going to have a function run when the player is [...]

Tutorial: Make a Vertical Shooter in AS3 - Part 4

Table of Contents

Programming the Character
Programming the Character - Part 2
Creating the Enemies
Programming the Enemies
Scoring
Finishing Touches

Step 4: Programming the Enemies
Now we have to make it so the enemies can be shot. This probably will be the most complicated of the steps. But, it also is what makes this thing a game. There are two ways that [...]

Page 5 of 12 -« First...«34567»...Last »