Pitfalls!

Our unassuming protagonist has had it easy so far. The ball bounces around our level with some harmless, hovering pods. Let’s throw some danger his way. Crossover time! Enter the platformer’s arch-enemy: the bottomless pit.

Pity the Fall

For our pits, we’re going to make use of Flixel’s super nice auto-tiling feature. For that, we’ll use two pit tilesets. The two tilesets are named the same, so pay attention! :)

Download the simpler of the two and add it to your project’s bin folder. (It’s really not much to look at—one blank tile, one filled.)

Then download the more complex of the two and add it to your project’s assets folder. (That’s inside the src folder, remember?) This tileset includes all the corners and caps necessary to frame pretty much any irregularly-shaped pit you can throw at it.

Now open your level.tmx in Tiled. Create a new Tile Layer (Layer > Add Tile Layer) and name it pits. Then add a new Tileset (Map > New Tileset…) using the pits.png in your project’s bin folder. Using the Stamp tool draw in some pits. Once you’re done, your level.tmx should look something like this:

Tiled Gotcha: It’s very easy to get turned around in Tiled. You can draw on your bg layer with your pit tileset but you usually don’t mean to. If you are trying to draw on your map and nothing seems to be happening or it doesn’t look right in game, make sure the correct tool, layer, tileset, and tile are selected. Turning layers on and off is an easy way to spot the source of the problem. (Photoshop’s custom cursors for each tool don’t seem so excessive now, do they?)

Save level.tmx and open FDT.

The Pits

First we need to get our pits drawing in game, then we’ll hook up the related behavior. Open ROM.as and embed pits.png by adding:

Phew! That’s our three item list translated into code. What’s neat about this implementation is that two adjacent pit tiles will cancel each other’s gravity. When an actor overlaps two tiles horizontally, it is only pulled vertically (and vice versa). Also of note, in the update() function we halve pit gravity when the player is already moving in that direction so the player has a little more time to react.

Pitball

Download the updated ball.png and replace the old one in your project’s assets folder. Open up Ball.as and replace:

public class Ball extends FlxSprite {

with:

public class Ball extends Actor {

Then beneath:

addAnimation("bounce", [0,1,2,3], 10);

add:

addAnimation("fall", [4,5,6,7,7,7,7,7,7,7,7,7,7,7,7], 10, false);

What’s with all the sevens? Falling is a non-looping animation. We’re going to use the animation’s finished state to determine when to reload the level after the player dies. The extra sevens extend the duration of the entire animation to 1.5 seconds. Just enough time for the player to reflect on their mistake.

Next, we need to override the fallIntoPit() function to use our new animation: