Creating a Flash platform game with Flixel and Flex - Doors

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

A very simple door can be implemented in Flixel with a class that extends FlxBlock, and removes itself from the level if the player has picked up the correct key.

 public class Door extends FlxBlock
 {
  public function Door(X:int, Y:int, Width:uint, 
        Height:uint, TileGraphic:Class, Empties:uint=0)
  {
   super(X, Y, Width, Height, TileGraphic, Empties);
  }

Here we have the Door class, extending the FlxBlock class, with a constructor that simply passes the parameters back to the FlxBlock constructor.

  override public function collide(Core:FlxCore):void
  {   
   var player:Player = Core as Player;

The collision function is where the majority of the logic is. We start by getting a reference to the colliding player (or null if the colliding object is not a Player).

   //Basic overlap check
  // Please refer to the source code

We then test for a collision. If there is none, no further work has to be done, so we return. (Bukisa has issues displaying less than and greater than signs, so please check the original source for these lines of code)

   if (player != null && this.exists && player.hasBlueKey)
   {
    this.exists = false;
   }

If the player has the key for the door, as indicated by the new property hasBlueKey, the door will set its exists property to false, which means it will not show up and will not participate in any more collisions.

   if (this.exists)
   {    
    // check to see from what direction we moved into the block
    // please refer to the source code
    
    if (contactFromLeft && Core.hitWall(this))
    {
     Core.x = this.x - Core.width;
     
    }
    
    if (contactFromRight && Core.hitWall(this))
    {
     Core.x = this.x + this.width; 
    }
    
    if (contactFromBottom && Core.hitFloor(this))
    {
     Core.y = this.y + this.height;
    }
    
    if (contactFromTop && Core.hitCeiling(this))
    {
      Core.y = this.y - Core.height;
    }
   }
  }
 }

If the player has not picked up the key, or it was not a Player object that was colliding with the door, we push the object back out of the door, just like a normal FlxBlock.

This code relies on some hard coded properties in the Player class, which means it is not very extensible, but you should get the idea.

  public var hasBlueKey:Boolean = false;

The Player class need to have the hasBlueKey property added.

   
  public function GameState()
  {
   // ...   

   levelBlocks.add(
    this.add(
     new Door(
      LEVEL_DIMENSIONS>>1,
      LEVEL_DIMENSIONS - BLOCK_DIMENSIONS*3,
      BLOCK_DIMENSIONS*2,
      BLOCK_DIMENSIONS*2,
      BlueDoorImage
     )
    )
   );

In the constructor of the GameState class we create a door. It is created just like a static block, and is added to the same collection as the static blocks.

   this.blueKey = new FlxSprite(
    BlueKeyImage, 
    (LEVEL_DIMENSIONS>>1) - BLOCK_DIMENSIONS*10,
    LEVEL_DIMENSIONS - BLOCK_DIMENSIONS * 2);
   this.add(this.blueKey);
   
   // ...
  }

We also create a FlxSprite to represent the key.

   
  public override function update():void
  {
   // ...
   
   if (this.blueKey.overlaps(this.player))
   {
    this.blueKey.kill();
    player.hasBlueKey = true;    
   }

   // ...
  }

Here in the update function we check for an overlap of the player and the blue key. If there is one, the blue key is removed from the game, and the Players hasBlueKey property is set to true.

This is a very simple example of how a key can be picked up to unlocked a door. For a real game you would probably make the Door class extend the FlxSprite class and add some animations and sound effects of for the door opening. But this code should give you a good place to start.