Catch ‘em All

And we’re back! Last time, we added a bouncing ball and hooked up the controls so a player can move it around our previously created map. Today, we’ll introduce collectibles, add them (and the player) to our level in Tile, and hook up level reloading without recompiling the SWF. As your game and levels become more complex this becomes a huge time saver. Tweak, reload, playtest, repeat!

Objects in the Rear View

Let’s start by revisiting our level and adding some objects. Open up level.tmx in Tiled. Create a new object layer (Layer > Add Object Layer) and name the new layer entities. Objects in Tiled are one of its most powerful features but also one of its clumsiest.

Tiled Gotcha 1: The default width and height of a newly created object is 0 tiles. With these default dimensions an object appears to have a width and height of 2 tiles. The object’s actual x and y position is the top left corner of the bottom right tile it covers. Comically unintuitive.

Tiled Gotcha 2: When setting or changing an object’s properties, always tab to the next property. Otherwise, Tiled will not save the updated value when you hit Enter/Return to confirm the changes and dismiss the Object Properties window. This may not be a problem if you manually click the OK button.

Select the Insert Object tool and click somewhere on your map. Your first object! Now we need to give it a type. Control-click on the bottom right corner of the new object and select Object Properties… from the contextual menu. Set type to Ball and click the OK button.

Select the Select Object tool and click and drag the bottom right corner of the object to reposition it. (If the object gets stuck to the mouse, click the bottom right corner again to drop it. So buggy!)

Insert and position five more objects. Set their type to Pod. When you’re done your level.tmx should look something like this:

Don’t forget to save level.tmx when you’re done!

Pod Race

Now let’s update the project to make use of the objects we just added. We’ll start by adding collectibles. Download the hovering pod spritesheet:

Now create a new Pod ActionScript Class in your project (File > New > ActionScript Class). Set the Class name to Pod, the Superclass to org.flixel.FlxSprite, check “Explicitly invoke superclass constructor”, and click the Finish button.

In Pod.as, we need to remove the unnecessary SimpleGraphic argument from the constructor and super calls. Replace:

We’re going to make the hitbox of each pod smaller than its frame so we need to offset its position by the difference. The frame will be 16x16 pixels and the hitbox will be 8x8 so we need to subtract each of frame dimension from its corresponding hitbox dimension and then halve the result. Since width and height are the same we only need to do this math once (phew!). 16 - 8 = 8. 8 / 2 = 4. So we position each pod at X+4, Y+4 when we call the super() constructor.

This should look familiar. We set up Ball.as almost exactly the same way except we use a custom hitbox size by setting the width and height, and the corresponding offsets with offset.x and offset.y. (In this case offset.y is greater than offset.x because we want our pod to appear as if it is hanging in the air, not sitting on the ground.)

Flixel Aside: A sprites hitbox and offset can be hard to grasp abstractly. The best way to get a feel for how it works is to play with a bunch of different values and see what effect they have. The easiest way to see that efffect is to turn on visual debugging. Open up Primer.as and beneath:

super(240,160,PlayState,2);

add:

FlxG.visualDebug = true;

Then run your game. The red outlines are hitboxes, the blue are individual tiles of your tilemap. To turn visual debug off, just remove or comment out the line we just added like so:

// FlxG.visualDebug = true;

Hanging Around

Now we’re going to update our level loading logic to load the Ball and Pods from our TMX. In PlayState.as find:

Now run your game. Collect the pods! Edit your level in Tiled, reposition the ball and pods, redraw parts of the background map. Save, switch back to Flash Player, and hit Enter to test your changes. You’re now a level designer!