Mr Sun Studios - Just another WordPress site

Step 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. Just create another MovieClip just like the block, except yellow, export it for ActionScript, and name it “mcLadder”. 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 empty mc will hold the entire level
_root.createEmptyMovieClip('lvlHolder', _root.getNextHighestDepth());
//this empty movieclip will hold all of the blocks
lvlHolder.createEmptyMovieClip('blockHolder',_root.getNextHighestDepth());
//this empty mc will hold all of the ladders
lvlHolder.createEmptyMovieClip('ladderHolder',_root.getNextHighestDepth());

Now, we’re going to have to add “lvlHolder.” to the beginning of blockHolder every time we see it. There is an easier way to do this than to just manually type it in. We are going to use the “Find and Replace” feature of Flash. First, press Ctrl+F or Command+F if on a Mac while in the actions panel. In the “Find What:” field, type in “blockHolder”. Then, in the “Replace With:” Field, type in “lvlHolder.blockHolder”. Then, click on “Replace All”.

There is only one part where the replacement happened where we didn’t want it, and that’s where we create the empty MovieClip to hold the blocks (~Line 119). Just change it back to:

lvlHolder.createEmptyMovieClip('blockHolder',_root.getNextHighestDepth());

Also, because now it is in the lvlHolder, make it lvlHolder.getNextHighestDepth() instead of using _root. 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 main onEnterFrame() function.

Add this to the createLvl() function, so the ladders are added to the stage:

 else if (lvlArray[i] == 2){
	lvlHolder.ladderHolder.attachMovie('mcLadder', 'Ladder'+i,lvlHolder.ladderHolder.getNextHighestDepth());
	lvlHolder.ladderHolder['Ladder'+i]._x = (i-(row-1)*lvlColumns)*25;
	lvlHolder.ladderHolder['Ladder'+i]._y = (row-1)*25;
}

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 main onEnterFrame() function:

//hit testing for ladders
	for(var cLadder:String in lvlHolder.ladderHolder){ //using a for ... in loop again
		if(mcMain.hitTest(lvlHolder.ladderHolder[cLadder])){
			//checking if main is close enough to climb the ladder
			if(mcMain._x >= lvlHolder.ladderHolder[cLadder]._x + lvlHolder._x - 10){//if close enough on the left
				//if close enough on the right
				if(mcMain._x <= lvlHolder.ladderHolder[cLadder]._x + lvlHolder._x + 35){
					//then we can truly say that he's touching a ladder
					mainOnLadder = true;
					jumpSpeed = jumpSpeedLimit;
					break;
				}
			}
		}
		mainOnLadder = false; //if we don't break, then he won't be on the ladder
	}

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. Add this code near the key checks in the main onEnterFrame function:

	if(Key.isDown(38) || Key.isDown(87)){ //the up key or "W" key
		//checking if on ladder
		if(mainOnLadder){
			mcMain._y -= mainSpeed;
		}
	}
	if(Key.isDown(40) || Key.isDown(83)){ //the down key or "S" key
		//checking if on ladder
		if(mainOnLadder){
			mcMain._y += mainSpeed;
		}
	}

We have to do one last thing before the ladders actually work. We have change a few things in the mainJump() function so jumping is not allowed while on a ladder. Do this by adding a && !mainOnLadder to the if and else statement so it looks like this:

if(!mainJumping){
	if(Key.isDown(38) || Key.isDown(87)){
		if(!mainOnLadder){
			[...OTHER CODE HERE...]
		}
	}
} else if(!mainOnLadder) {

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 a layer below the ladder. This can be easily fixed. Just add this to the end of our code:

mcMain.swapDepths(10000);

Now, the character will always appear in front of everything else, unless you decide to add more than 10000 objects to the stage at once, which is highly unlikely.

Adding Bumpers

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, create another MovieClip that's a square, but this time the color green and with the name, mcBumper. Now, of course, we have to have a bumper holder:

//this empty mc will hold all of the bumpers
lvlHolder.createEmptyMovieClip('bumperHolder',lvlHolder.getNextHighestDepth());

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

else if (lvlArray[i] == 3){
	lvlHolder.bumperHolder.attachMovie('mcBumper', 'Bumper'+i,lvlHolder.bumperHolder.getNextHighestDepth());
	lvlHolder.bumperHolder['Bumper'+i]._x = (i-(row-1)*lvlColumns)*25;
	lvlHolder.bumperHolder['Bumper'+i]._y = (row-1)*25;
}

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:Number = 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:Number;
	if(Key.isDown(37) || Key.isDown(65)){
		bumpDirection = 1;
	} else if (Key.isDown(39) || Key.isDown(68)){
		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 main onEnterFrame() function:

//hit testing for bumpers
for(var cBumper:String in lvlHolder.bumperHolder){
	//hit testing with the bumper
	if(mcMain.hitTest(lvlHolder.bumperHolder[cBumper])){
		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.

Adding Trampolines

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 half circle shape. Do as we always do and create a half circle that's 25x25 and green, then turn it into a MovieClip, export it for ActionScript, and name it "mcTramp". Here we go.

First, we have to create a holder for the trampoline, as always:

//this empty mc will hold all of the trampolines
lvlHolder.createEmptyMovieClip('trampHolder',lvlHolder.getNextHighestDepth());

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

 else if (lvlArray[i] == 4){
	lvlHolder.trampHolder.attachMovie('mcTramp', 'Tramp'+i,lvlHolder.trampHolder.getNextHighestDepth());
	lvlHolder.trampHolder['Tramp'+i]._x = (i-(row-1)*lvlColumns)*25;
	lvlHolder.trampHolder['Tramp'+i]._y = (row-1)*25;
}

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,3,0,0,0,0,0,0,0,0,0,0,0,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 onEnterFrame() function:

	//hit testing trampolines
	for(var cTramp:String in lvlHolder.trampHolder){
		if(mcMain.hitTest(lvlHolder.trampHolder[cTramp])){
			//just make him jump
			mainJumping = true;
			jumpSpeed = jumpSpeedLimit*-1;
			mcMain._y += jumpSpeed;
		}
	}

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!

The Final Product

Source .fla File