HaxeFlixel Tutorial – Image Trail / Blur effect

Trails are more like after-images of a parent image. Some may refer to this as a blur effect. The HaxeFlixel FlxTrailArea demo demonstrates this.

An example usage would be in a Breakout clone, as demonstrated in this video Juice it or lose it (at the 11:50 mark). It’s not relevant, but I recommend watching this video on how to improve your game’s overall feel. :)

Setup

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

And let’s assume we’re using the same image from the previous tutorial, the sparkle.png, and it’s located in the /assets/images  folder.

To use the FlxTrail and FlxTrailArea classes, you need to enable them in the Project.xml file:

And finally, for visibility sake, let’s set the screen resolution in Main.hx:

Code

And now let’s quickly write the code in MenuState.hx:

This gives you the result when built in lime test neko :

licecap-trail-1

Would FlxTrail have performance issues if we had hundreds of balls that bounce around in a screen, and each of them has a trail? This is where FlxTrailArea can be used:

If you test the game now, you’ll see no difference. But at least now you know, that you can add  as many sprites as you like to be trailed in the FlxTrailArea, rather than individually creating attaching a trail using FlxTrail.

Minor note: Referring to the FlxTrailArea API, if no parameters were given in new() , the size of the trail images will  be the full screen.