This article explains how to integrate AS3 the Flint particle engine with the Open Source PushButton Flash Game Engine.
Download the AS3 code from this article (rar)
See example of this tutorial in action
The Flint particle engine is THE actionscript 3.0 open source particle engine available on the net. It lets you create all kinds of particle effects like smoke, fire, explosions , trails and more.
Because it would be very nice to have this available in the PushButton Engine I gave it a go….
The Flint system uses particle emitters that can be configured and that produce particles with specific behaviour that render to a specific render class. Flint has several render classes like BitmapRenderer, BitmapLineRenderer, DisplayObjectRenderer, PixelRenderer and VectorLineRenderer.
Because I am no Flint specialist I can not really tell the difference between all these renderers but the process of integration will probably be the same for all.
In this article I used the Flint example examples\examples2D\FireAndSmoke\PureAS3. In this example a Flint BitmapRenderer class is created with 2 emitters (fire/smoke).
The Flint BitmapRenderer is a subclassed Sprite class that holds a Bitmap and on this Bitmap particles are being rendered using this Bitmap’s BitmapData object. Because the PBE DisplayObjectRenderer is be able to render sprites , it shouldn’t be very problematic to wrap this in a PBE renderer class, .
! Important note. Both Flint and PBE have a BitmapRenderer and DisplayObjectRenderer class, so to combine these in your source files, be sure to use the full namespace when you refer to a specific class.
Step 1 – Creating a FlintBitmapRenderer Class for PBE
The first thing we will do is to create a base FlintBitmapRenderer class that we can subclass in the future to create specific particle render classes.
Because I want to do this the easy way, and the Flint BitmapRenderer class is essentially a Sprite, I will subclass the DisplayObjectRenderer class to get to a FlintBitmapRenderer class.
public class FlintBitmapRenderer extends DisplayObjectRenderer
{
...
}
I need to store the Flint BitmapRenderer class and the Flint emitters.
private var _renderer:BitmapRenderer; protected var emitters:Array = new Array();
It would be nice to have an attribute to access the Flint sprite so we can set filters etc.
public function get sprite():Sprite
{
return _renderer as Sprite;
}
Because the Flint BitmapRenderer class takes width and height as constructor parameters we get these from our constructor.
In the constructor an function addEmitters is called. The function addEmitters() must be overridden by the derrived class and will add the emitters to the emitters:Array
When the emitters are added to the Flint BitmapRenderer, we set the renderer as the displayObject of our PBE DisplayObjectRenderer.
public function FlintBitmapRenderer(width:int, height:int)
{
super();
// create the bitmap renderer object
_renderer = new BitmapRenderer( new Rectangle( 0, 0, width, height ) );
// add emitters to the emitters:Array
addEmitters();
for (var e:int=0; e < emitters.length; e++)
_renderer.addEmitter( emitters[e] );
this.displayObject = _renderer;
}
Step 2 - Creating a subclass for the FireAndSmoke
To create a PBE FireSmokeRenderer class we can subclass the FlintBitmapRenderer class and add the emitters.
We create a canvas 250 pixels wide and 300 pixels high using the function super(250,300); in our constructor.
The emitters : Fire() and Smoke() are taken from the Flint example, sources are in the code download from this article. The emitters are added to the emitters:Array in the overridden function addEmitters().
public class FireSmokeRenderer extends FlintBitmapRenderer
{
private var smoke:Emitter2D;
private var fire:Emitter2D;
public function FireSmokeRenderer()
{
// create a 250 x 300 particle canvas
super(250,300);
}
protected override function addEmitters():void
{
emitters.push(smoke = new Smoke());
smoke.x = 125;
smoke.y = 290;
smoke.start();
emitters.push(fire = new Fire());
fire.x = 125;
fire.y = 290;
fire.start();
}
}
Step 3 - Adding the FireSmokeRenderer to the scene
To add this to a PBE scene we have to create an PBE entity, add a SimpleSpatial component and the FireSmokeRenderer component.
We set the layerIndex of the render component to 1 so the rotating green star sprite will always be behind the smoke.
private function createFlintEntity():void
{
// Allocate an entity for our animated sprite
var flint:IEntity = allocateEntity();
// Register the entity with PBE
flint.initialize("flint");
var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();
spatial.position.x = -125;
spatial.position.y = -150;
flint.addComponent(spatial,"spatial");
flintRender = new FireSmokeRenderer();
flintRender.scene = PBE.getScene();
flintRender.layerIndex = 1;
flintRender.positionProperty = new PropertyReference("@spatial.position");
flint.addComponent(flintRender,"render");
}
To add a nice color changing glow effect I created an onFrame event handler on the PBE.mainStage that will rotate glow colors for the FireSmokeRenderer.sprite glow filter.
private var glowColor:uint = 0x000000;
private var nextColor:uint = 0x000000;
private var lastTimer:int = 0;
private function onFrame(event:Event):void
{
var elapsed:int = getTimer()-lastTimer;
if (elapsed>2000)
{
// change color each second
glowColor = nextColor;
nextColor =
(Math.random()*0xff)*0x010000+
(Math.random()*0xff)*0x000100+
(Math.random()*0xff)*0x000001;
lastTimer = getTimer();
elapsed = 0;
}
flintRender.sprite.filters = [new GlowFilter(Color.interpolateColor(glowColor,nextColor,elapsed/2000))];
}
Download the AS3 code from this article (rar)
See example of this tutorial in action
To run the sample you need to put the green star sprite into the folder where the compiled swf is located.
