Text-based Particles in HaxeFlixel

This blog post is about expanding the built in HaxeFlixel particle system to render text based particles.

I haven't included full working source listings in the article to save time. The full source code is on Github along with a sample project that uses it.

What are text particles good for?

You can use text particles for just about any transient text on the screen like:

• Numeric damage effects
• Visualize score tallies
• Ambient dialog
• Etc.

In Jelly Blocks I use text particles to visualize scoring; when a user pops blocks they get a particle effect in the same color as the popped blocks that shows them how many they successfully popped.

Building the system

HaxeFlixel already has a built-in particle system that's good for both static and animated sprites. I was surprised to find out that the flixel particle system doesn't support text based particles. In fact, it has all the hooks needed and none of the code!

For regular particles can find flixel example code on the flixel demo site and a good primer at Coin Flip Studios.

If you want to jump straight to the code it's available on Github along with a sample that uses it.

The flixel system has a typed emitter class that's easy to extend and an IFlxParticle interface that the emitter works with. The new emitter class TextEmitter extends FlxTypedEmitter and the new particle class TextParticle extends FlxText and implements the particle interface IFlxParticle; lucky for me FlxText already Extends FlxSprite so most of the work is already done!

In the end the new TextEmitter class looks like:

class TextEmitter extends FlxTypedEmitter<TextParticle>
{
    public var Text:String = null;
    public var Font:String = null;

    public override function emitParticle():TextParticle{
        ...
        if (Text != null){
            particle.text = Text;
        }

        if (particle.embedded && Font != null){
            particle.font = Font;
        }
        ...
        return particle;
    }
}

And the new TextParticle class looks like:

class TextParticle extends FlxText implements IFlxParticle
{
...
}

Using the new Particles

The great thing about this text particle system is that it's almost exactly the same as regular HaxeFlixel particles. The TextEmitter class simple has two new properties:

• Font
• Text

The Font property sets what embedded font the text particles use and the Text property sets what text they have.

If you like this, please subscribe to my mailing list for new game development articles and updates about my current project Jelly Blocks.