How to Create a Platform Game in AS3 – Part 4

« Previous PartNext Part»

Part 4: Adding Level Elements

In this lesson, we’re going to add elements to the level, like obstacles and ladders. Here’s a list of what we’re going to add:

  • Ladders
  • Bumpers
  • Trampolines

Adding Ladders

First on our list is to add ladders. Our ladders are going to be squares just like the blocks, except a different color, yellow. This will make it easier to place them onto the stage. We also have to make an Object that will hold the entire level, including the blockHolder. Within that, we’ll create a Sprite that will hold all of the ladders. Replace the part where we add the blockHolder before the function with this:

//this guy will hold all of the ladders
var ladderHolder:Sprite = new Sprite();
//adding him to stage
addChild(ladderHolder);

Now, we have to add some stuff to the createLvl() function. The number that will signify a ladder will be a “2”. I actually decided that our for loop could use some polishing up. So, here’s what you should replace it with:

for(var i:int = 0;i<lvlArray.length;i++){
	//checking if we move onto the next row
	//this checks if i is divisible by the # of columns
	if(i/lvlColumns == int(i/lvlColumns)){
		row ++;
	}
	//defining a target
	var newPlacement;
	if(lvlArray[i] == 1){
		//making a new block
		newPlacement = new Block();
		//drawing the block
		newPlacement.graphics.beginFill(0xFFFFFF/*The color for shape*/,1/*The alpha for the shape*/);
		//turning the shape into a square
		newPlacement.graphics.drawRect(0,0,25,25);
		//then finally adding it to stage
		blockHolder.addChild(newPlacement);
	} else if (lvlArray[i] == 'MAIN'){
		newPlacement = mcMain;
	} else if (lvlArray[i] == 2){
		newPlacement = new Sprite();
		//drawing the ladder
		newPlacement.graphics.beginFill(0xFFFF00,1);
		//turning it into a square
		newPlacement.graphics.drawRect(0,0,25,25);
		//then adding it to stage
		ladderHolder.addChild(newPlacement);
	}
 
	if(lvlArray[i] != 0){
		//change the coordinates of the block
		newPlacement.x = (i-(row-1)*lvlColumns)*newPlacement.width;
		newPlacement.y = (row-1)*newPlacement.height;
	}
}

This code just adds the ladders and reuses a certain variable so the code doesn’t become too repetitive. Pretty intense, eh? The next thing we have to do is move the lvlHolder instead of blockHolder when an arrow key is pressed down. Hopefully, you know how to do this. Here’s a hint, look in the moveChar() function.

Now, we have to actually add some functionality to the ladders. The first thing we have to do is add a variable that will tell us if the player is touching a ladder.

//checking if the guy is on a ladder
var mainOnLadder:Boolean = false;

Next, we’re going to add a loop that will hit test with the ladders. Add this code to some part of the moveChar() function:

//hit testing for ladders
for(i=0;i<ladderHolder.numChildren;i++){
	//getting the current ladder
	var hitLadder:DisplayObject = ladderHolder.getChildAt(i);
	//checking hit test with the ladder
	if(mcMain.hitTestObject(hitLadder)){
		//checking if the guy is close enough
		if(mcMain.x >= hitLadder.x + lvlHolder.x - 10 && mcMain.x <= hitLadder.x + lvlHolder.x + 35){
			mainOnLadder = true;
			//reset the jump speed so he doesn't keep on jumping
			jumpSpeed = jumpSpeedLimit;
			break;
		}
	}
	mainOnLadder = false;
}

Now, we can’t allow the guy to jump if he’s on a ladder. Also, we have to make him move up or down depending on what keys are pressed. Here’s the code that should replace the up key check:

if(upKeyDown || mainJumping){
	if(!mainOnLadder){
		mainJump();
	}
}
if(upKeyDown && mainOnLadder){
	mcMain.y -= mainSpeed;
}
if(downKeyDown && mainOnLadder && !mainOnGround){
	mcMain.y += mainSpeed;
}

Now, we can change the level code to check if the ladders work:

var lvlArray1:Array = new Array(
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,X,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);

If you test it out, it should work pretty well. The only problem that I see is that the user is always under the ladder. This can be easily fixed. Just add this to the bottom of the code:

//placing the guy on top
MovieClip(root).setChildIndex(mcMain,MovieClip(root).numChildren-1);

Phew. Now that we’re done with the ladders, we can now make the next thing on our list, bumpers. These will just act as a sort of wall that will make the user bounce back when touching it. Yet again, it’ll be a square, but this time the color green. But of course, we first have to have a bumper holder:

//this guy wil hold all of the bumpers
var bumperHolder:Sprite = new Sprite();
lvlHolder.addChild(bumperHolder);

Add this code to the bottom of the createLvl() function’s for loop:

if (lvlArray[i] == 3){
	newPlacement = new Sprite();
	//drawing the bumper
	newPlacement.graphics.beginFill(0x00FF00,1);
	//turning it into a square
	newPlacement.graphics.drawRect(0,0,25,25);
	//then adding it to stage
	bumperHolder.addChild(newPlacement);
}

This will just add the bumper to stage. Now, we have to make the main guy bump whenever he touches the bumper. We’ll do this similarly to the way that we did the jumping. We first have to define some variables that will help with our bumping:

//BUMPING VARIABLES
//if main is being bumped
var mainBumping:Boolean = false;
//how quickly he should be bumped
var bumpSpeed:int = 10;

Next, we have to make a function that will run whenever the guy bumps into it:

//bumping function
function mainBump():void{
	//testing the direction of bump
	var bumpDirection:int;
	if(leftKeyDown){
		bumpDirection = 1;
	} else if (rightKeyDown){
		bumpDirection = -1;
	}
	if(mainBumping){
		lvlHolder.x -= bumpDirection*bumpSpeed;
		bumpSpeed *= .5;
		if(bumpSpeed <= 1){
			mainBumping = false;
		}
	}
}

Then, we add this code to the end of the moveChar() function:

//hit testing for bumpers
for(i=0;i<bumperHolder.numChildren;i++){
	//getting current bumper
	var hitBumper:DisplayObject=bumperHolder.getChildAt(i);
	//hit testing with the bumper
	if(mcMain.hitTestObject(hitBumper)){
		mainBumping = true;
		bumpSpeed = 20;
	}
}
//run mainBump
mainBump();

That’s all we need to do for the bumper. If you want to, you can test it out by changing the level code and adding some 3’s.

The final level element we need is the trampoline. This will just make us jump whenever we touch it. I’m going to make mine green like the bumper, but instead of making it a square, it’ll be a circular shape. Here we go.

First, define a holder for the trampoline before the other holders like so:

//hold all trampolines
var trampHolder:Sprite = new Sprite();
lvlHolder.addChild(trampHolder);

Then, add this code to the createLvl() function’s for loop.

if (lvlArray[i] == 4){
	newPlacement = new Shape();
	newPlacement.graphics.beginFill(0x00FF00);
	newPlacement.graphics.drawCircle(12.5,25,12.5);
	trampHolder.addChild(newPlacement);
}

If you want, you can change the level code to this in order to test out the trampoline:

var lvlArray1:Array = new Array(
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,4,0,0,0,X,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);

Now, we have to hit test for the trampoline. Just like before, we can do this by adding this code to the moveChar() function:

//hit testing trampolines
for(i=0;i<trampHolder.numChildren;i++){
	//you know the drill
	var hitTramp:DisplayObject=trampHolder.getChildAt(i);
	if(mcMain.hitTestObject(hitTramp)){
		//just make him jump
		mainJump();
	}
}

That’s probably the easiest of the level elements to make. Also, that finished our list of elements to create. In the next part of our tutorial, we’re going to add some enemies!

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)
« Previous PartNext Part»

Subscribe!

Subscribe!
Enter your email address:  

Awesome Tutorials