Creating a Flash platform game with Flixel and Flex - Ladders

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

We have added a fair amount of functionality to Flixel by extending the FlxBlock class. However, ladders won’t require a new class to be created. Instead we need to know what the player is colliding with a FlxBlock that is a ladder and move accordingly.

protected var ladders:FlxArray = new FlxArray();

To do this we add the FlxBlocks that are ladders to a new array in the GameState class.

public function GameState()
{
 // ...
 
 ladders.add(
  this.add(
   new FlxBlock(
    LEVEL_DIMENSIONS>>1,
    LEVEL_DIMENSIONS - BLOCK_DIMENSIONS*4,
    BLOCK_DIMENSIONS,
    BLOCK_DIMENSIONS * 3,
    LadderImage
   )
  )
 );
 
 ladders.add(
  this.add(
   new FlxBlock(
    (LEVEL_DIMENSIONS>>1) + BLOCK_DIMENSIONS * 2,
    LEVEL_DIMENSIONS - BLOCK_DIMENSIONS * 7,
    BLOCK_DIMENSIONS,
    BLOCK_DIMENSIONS * 3,
    LadderImage
   )
  )
 );
 
 ladders.add(
  this.add(
   new FlxBlock(
    (LEVEL_DIMENSIONS>>1) - BLOCK_DIMENSIONS * 2,
    LEVEL_DIMENSIONS - BLOCK_DIMENSIONS * 7,
    BLOCK_DIMENSIONS,
    BLOCK_DIMENSIONS * 3,
    LadderImage
   )
  )
 );
 
 ladders.add(
  this.add(
   new FlxBlock(
    (LEVEL_DIMENSIONS>>1) + BLOCK_DIMENSIONS * 4,
    LEVEL_DIMENSIONS - BLOCK_DIMENSIONS * 10,
    BLOCK_DIMENSIONS,
    BLOCK_DIMENSIONS * 3,
    LadderImage
   )
  )
 );
 
 ladders.add(
  this.add(
   new FlxBlock(
    (LEVEL_DIMENSIONS>>1) - BLOCK_DIMENSIONS * 4,
    LEVEL_DIMENSIONS - BLOCK_DIMENSIONS * 10,
    BLOCK_DIMENSIONS,
    BLOCK_DIMENSIONS * 3,
    LadderImage
   )
  )
 ); 
 
 // ...
}

We then create the ladders like any other FlxBlock, using a new texture to identify the FlxBlock as a ladder.

public override function update():void
{
 super.update();
 
 FlxG.collideArray(movingBlocks, player);
 FlxG.collideArray(levelBlocks, player);
 FlxG.collideArrays(playerBullets, levelBlocks);   
 
 FlxG.overlapArray(coins, player, coinPickup);
 FlxG.overlapArray(ladders, player, 
  function(Collide1:FlxCore, Collide2:FlxCore):void
   {player.onLadder = true;});
 
 FlxG.overlapArray(movingBlocks, player, playerSquash);
 FlxG.overlapArray(levelBlocks, player, playerSquash);    
}

In the update function we check to see if the player is colliding with any of the FlxBlocks that we have defined as ladders. You will noticed that we use the FlxG overlapArray function. This function does not modify the position or movement of the objects that are being tested – it simply calls a function if a collision has been found. In our case we set the Players onLadder flag to true to let the player know that it is currently over a ladder.

protected static const PLAYER_LADDER_SPEED:int = 40;

We define a constant in the Player class that specifies the vertical speed that the player will move at while on the ladder.

if (onLadder)
{
 acceleration.y = 0;
 play("idle");
 
 if (FlxG.keys.UP)
  velocity.y = -PLAYER_LADDER_SPEED;
 else if (FlxG.keys.DOWN)
  velocity.y = PLAYER_LADDER_SPEED;
 else
  velocity.y = 0;
}
else
{    
 acceleration.y = GRAVITY_ACCELERATION;
 
 if(FlxG.keys.justPressed("X") && !velocity.y)
 {
  velocity.y = -JUMP_ACCELERATION;
  FlxG.play(SndJump);
 }
 
 if(velocity.y != 0)
 {
  play("jump");
 }
 else if(velocity.x == 0)
 {
  play("idle");
 }
 else
 {
  play("run");
 }
}

Here we move the player differently depending on if it is over a ladder or not. If it is, the vertical acceleration is set to 0 (so it won’t fall down a ladder), and the vertical velocity is set depending on whether the up or down arrow keys are being pressed. If onLadder is false we move the player like we would normally.

else if(aimingDown)
{
 bY += height - 4;
 bYVel = BULLET_VELOCITY;
 if (!onLadder) velocity.y -= BULLET_BOOST;
}

The last change we make is to stop the player getting a vertical boost when shooting down if it is on the ladder.