Creating a Flash platform game with Flixel and Flex - Bounce Blocks

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

In previous tutorials we have extended the FlxBlock class to create moving platforms. Here we will use the same process to create blocks that the block will bounce off.

 public class BounceBlock extends FlxBlock
 {  

The new class will be called BounceBlock. It extends the FlxBlock class, meaning that it can be used just like the static blocks that make up most Flixel levels.

  protected static const MIN_REBOUND:Number = 50;

The MIN_REBOUND constant defines the minimum velocity that the block will push an object away at. This is to stop the player, or any other object, from skipping over the block making only a series of very small bounces.

  [Embed(source="../media/bounce.mp3")] 
  protected var SndBounce:Class;

We will play a sound effect when something bounces of the block, so here we embed the MP3 that will be played.

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

The constructor does nothing but pass the incoming parameters back to the FlxBlock constructor.

  override public function collide(Core:FlxCore):void
  {   
   var sprite:FlxSprite = Core as FlxSprite;

The collision function is where the bouncing occurs. First we get a reference to the FlxSprite that is colliding with the block. Not all collisions will nessessarily be with a FlxSprite, so we use the as operator to cast the FlxCore, or return null if the FlxCore is not also a FlxSprite.

   //Basic overlap check

// please refer to the source code

Next we make sure that there is actually a collision between the object and the block. If not, we return without doing any more processing. Bukisa has issues displaying less than and greater than signs, so please refer to the source code for these lines of code.

   // check to see from what direction we moved into the block
   // please refer to the source code

How the object will collide with the block depends on what direction it is colliding from. We use the movement of the object over the last frame (using x/y and last.x /last.y) to find out what direction the object was moving when it collided.

   var coreVelocity:Point = sprite.velocity.clone();
   if (Math.abs(coreVelocity.x) < MIN_REBOUND)
    coreVelocity.x = 0;
   if (Math.abs(coreVelocity.y) < MIN_REBOUND)
    coreVelocity.y = 0;

We need to make a note of the objects current velocity, because calls to hitWall, hitFloor and hitCeiling will possibly set the velocity to 0. Here we also make sure that the object was moving at the minimum speed, otherwise the rebound velocity is set to 0.

if (contactFromLeft && Core.hitWall(this))
   {
    if (sprite != null) 
    {
     sprite.velocity.x = -coreVelocity.x;
     if (sprite.velocity.x != 0)
      FlxG.play(SndBounce);
    }
    
    Core.x = this.x - Core.width;
    
   }
   
   if (contactFromRight && Core.hitWall(this))
   {
    if (sprite != null) 
    {
     sprite.velocity.x = -coreVelocity.x;
     if (sprite.velocity.x != 0)
      FlxG.play(SndBounce);
    }
    
    Core.x = this.x + this.width; 
   }
   
   if (contactFromBottom && Core.hitFloor(this))
   {
    if (sprite != null) 
    {
     sprite.velocity.y = -coreVelocity.y;
     if (sprite.velocity.y != 0)
      FlxG.play(SndBounce);
    }
    Core.y = this.y + this.height;
   }
   
   if (contactFromTop && Core.hitCeiling(this))
   {
    if (sprite != null) 
    {
     sprite.velocity.y = -coreVelocity.y;
     if (sprite.velocity.y != 0)
      FlxG.play(SndBounce);
    }
    Core.y = this.y - Core.height;
   }
  }

 }
}

Finally, depending on the angle that the object hit the block at, we reverse the velocity (if the colliding object was a FlxSprite), push the object out of the block just like the FlxBlock would, and play a sound effect.

  public function GameState()
  {
   levelBlocks.add(
    this.add(
     new BounceBlock(
      0,
      LEVEL_DIMENSIONS-BLOCK_DIMENSIONS,
      LEVEL_DIMENSIONS,BLOCK_DIMENSIONS,
      RedTechTilesImage
     )
    )
   );
   levelBlocks.add(
    this.add(
     new BounceBlock(
      0,
      0,
      LEVEL_DIMENSIONS,
      BLOCK_DIMENSIONS,
      RedTechTilesImage
     )
    )
   );
   levelBlocks.add(
    this.add(
     new BounceBlock(
      0,
      BLOCK_DIMENSIONS,
      BLOCK_DIMENSIONS,
      LEVEL_DIMENSIONS-BLOCK_DIMENSIONS*2,
      RedTechTilesImage
     )
    )
   );
   levelBlocks.add(
    this.add(
     new BounceBlock(
      LEVEL_DIMENSIONS-BLOCK_DIMENSIONS,
      BLOCK_DIMENSIONS,
      BLOCK_DIMENSIONS,
      LEVEL_DIMENSIONS-BLOCK_DIMENSIONS*2,
      RedTechTilesImage
     )
    )
   );

   // ...
  }

In the GameState constructor we create BounceBlocks for the four surrounding walls, supplying a red coloured tile image so the player knows that the blocks are bouncy.