How to Create a Platform Game in AS3 – Part 4
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!