First steps with Flint Particles

I’ve been meaning for a while to have a look at Flint and so here are my first steps with it.

First off, I like the way it is arranged. It is incredibly modular. Whilst this probably has implications as far as optimisation (although it seems to handle a whole load of particles pretty nicely), it does mean that any kind of particle system can be plugged together easily.

There are 2 basic objects that need to be instantiated – an emitter and a renderer. There are a few different types of renderer, for different types – Bitmap, DisplayObject and Pixel.

Once you have your emitter created, then the behaviour is adjusted by adding 4 things.

Initialisers.
These are used when a particle is created, so things like colour, mass, size, image to use etc.

Actions.
These are applied to the particle every frame. Things like gravity, collisions etc.

Zones
This an area of the screen, commonly a point, line, rectangle or circle. Zones can be used for some initialisers, for example position and velocity. A Zone used for position will be used to randomly place a particle in that area. The velocity zone creates the velocity based on the time taken for the particle to travel from [0,0] to the randomly selected point. Zones can also be used as actions. For example, a DeathZone is an area that removes particles that enter (or leave) it, and a Jet zone is one that adds a velocity to the particle if it is inside.

Activities
These modify the behaviour of the emitter every frame, for example making it follow the mouse or rotating.

Most of these have a 2D and 3D counterpart.

Right. Enough explanation. Here’s the first experiment:
(Please note there is a bug (in my code) that occasionally comes up where the particles are duplicated endlessly. You have been warned!) This has now been fixed :)

[kml_flashembed movie="wp-content/experiments/flint/meteors.swf" height="300" width="300" /]

Download source code
I’ve included the emitter code here so you can see what’s going on:

package
{
	import flash.geom.Rectangle;

	import org.flintparticles.common.counters.Blast;
	import org.flintparticles.common.displayObjects.Dot;
	import org.flintparticles.common.initializers.CollisionRadiusInit;
	import org.flintparticles.common.initializers.ColorInit;
	import org.flintparticles.common.initializers.ImageClass;
	import org.flintparticles.common.initializers.MassInit;
	import org.flintparticles.twoD.actions.Collide;
	import org.flintparticles.twoD.actions.Move;
	import org.flintparticles.twoD.actions.MutualGravity;
	import org.flintparticles.twoD.actions.SpeedLimit;
	import org.flintparticles.twoD.emitters.Emitter2D;
	import org.flintparticles.twoD.initializers.Position;
	import org.flintparticles.twoD.initializers.ScaleAllInit;
	import org.flintparticles.twoD.initializers.Velocity;
	import org.flintparticles.twoD.zones.RectangleZone;

	public class MeteorEmitter extends Emitter2D
	{
		public function MeteorEmitter(bounds:Rectangle)
		{
			super();

			counter = new Blast(50);

			addInitializer(new ImageClass(Dot, 2));
			addInitializer(new ColorInit(0xFFFF0000, 0xFFFFFFFF));
			addInitializer(new MassInit(0.1));
			addInitializer(new CollisionRadiusInit(2.2));
			addInitializer(new Position(new RectangleZone(bounds.x, bounds.y, bounds.width, bounds.height)));
			addInitializer(new ScaleAllInit(1, 5));
			addInitializer(new Velocity(new RectangleZone(0, 0, 20, 20)));

			addAction(new MutualGravity(10, 100, 100));
			addAction(new ReflectiveBoundingBox(bounds.x, bounds.y, bounds.width, bounds.height));
			addAction(new Collide(0.5));
			addAction(new Move());
		}
	}
}

So the emitter creates a bunch of particles instantly (the Blast counter) using a dot and scales and colours them and assigns an initial velocity. Then, the actions are added, a custom bounding box that reflects particles to the other side of the screen, some mutual gravity to pull the particles together and a collision handler. That’s it really.

Will keep up with the experiments, and bring you more as I do them.

Leave a Reply