HaxeFlixel Tutorial – Particles and Emitters

If you check the HaxeFlixel’s particle demo page, you can see some basic examples of particle usage. In this tutorial, we’ll cover the following sections:

  • Create default particle emitter
  • Adding custom image
  • Animating custom image
  • Adjusting particle properties


Let’s create a new HaxeFlixel template project as usual:

For assets, we can use any image for testing custom particle images, so let’s go for Julien’s Sparkles spritesheet. Download the zip and extract the sparkle.png into your /assets/images  folder.


Particles are generated from emitters. As such, you only need to check the API pages for FlxParticle and FlxEmitter for more info on how to implement particle effects. In a nutshell, you need an emitter (FlxEmitter) to “emit” particles (FlxParticle).

Default Particle Emitters

Following the code from FlashGameDojo (it’s in ActionScript 3, but it’s very similar to Haxe anyway) — here’s the most basic code to write an emitter:

And when you build with lime test neko , you see the result:


You may notice the default white particles emitting correctly, but there seems to be a problem — the default HaxeFlixel logo gets emitted too. What went wrong?

Note that the white particles are the 2×2 pixel white squares we wrote in the p.makeGraphic(...)  line above. We only created 5 particles for the emitter in the loop. Since the emitter needs to emit 1 particle per 0.1 second, it will run out of particles in its pool after 0.5 seconds. As a result, it generates its own FlxParticle objects that do not have a default image — resulting in the logo.

So the easiest fix is to adjust the loop to add more particles, from 5 to say, 15 or 20, so we’ll never run out of particles:

And now it looks fixed:


Custom Particle Images

To add custom images to particles, you just need to load a graphic during particle creation:

Just note the size of each sprite in the spritesheet. In the case of sparkle.png, each frame is 32×32. Now when you test, the sparkle image is used:


It’s a little too small to see, but that’s the default size of the first sparkle frame’s image anyway.

Animating Particles

To animate the particles, you just need to add animation during creation, exactly like how you would for FlxSprites:

And the output:


Okay, using what we’ve learned so far, let’s try different examples on how to use the emitter:

  • Fire smoke trail
  • Explosion
  • Explosion with particle gravity

Fire Smoke Trail

We’re going to create smoke puffs that goes upwards, slowly fading away. Among the attributes we set include alpha fading, color fading, and size changing, and particle origin jitter:

And here is the result:


One thing I excluded was setting the rotation — by default, particles will rotate randomly. But if you don’t want particles to rotate, just set it like this:


Explosions are the default behaviour of FlxEmitter — as demonstrated at the beginning of this tutorial. Referring to the API, the emitter’s default start  function only “emits” the explosion once, like this:

Explosions With Particle Gravity

This is demonstrated in the Particle demo page — it’s as easy as adding gravity to the emitter:

And the result:


Note the code above assumes we’re emitting the explosion in 0.02 second intervals. If you only want to do it once, set the interval to 0 instead of 0.02

One last thing — to stop the emitter, just do this:


Particle effects can be easily added to the game using FlxEmitter. The most common usage is explosion and smoke.

One example is “bursting coins out of a treasure chest”, where the emitter “emits” a single burst of coins. If you want an example of how to do this, check out PhotonStorm’s excellent Collectible Particles tutorial.

Check out his other Flixel tutorial series, they’re very helpful! They’re in ActionScript 3, but still relevant.

This concludes the tutorial on HaxeFlixel particles and emitters.