09 February 2011

Dissecting Flint 2D Grass Example

Flint particles system is pretty awesome, but for beginners it's very hard to understand entire library and use it easily. This is why I decided to dissect one of the examples, 2D Grass example. Take a look at Flash version of the code. There is only 25 lines of code and 9 of them are import statements. Make sure you have downloaded and extracted Flint source code, I'll make reference to it later during this tutorial.

First, we place 2D emitter on stage with position x = 250 and y = 400. You can first move this emitter slightly up with:

emitter.y = 200;

Instead of 100 particles, we will add 200 with:

emitter.counter = new Blast( 200 );

Instead of Blast counter, you can try another one like KeyDownCounter, Pulse, SineCounter or TimePeriod which uses easing equations for emitting particles in predefined period of time. Check docs for full list at org\flintparticles\common\counters.

Next we have four Initializers. First one is 2D Position Initializer with DiskZone in point (0,0) and radius 40. DiskZone is circular shape which can have third parameter inner radius, so DiskZone can place particles in doughnut shape also, but if third parameter is omitted, particles are placed inside circle like in this example.

Second used Initializer is Velocity. This one defines velocity for all particles. As its parameter it uses one of Flint zones. There are several zone definitions you can use like DiscZone, LineZone, Zone2D. Check entire list in docs: org\flintparticles\twoD\zones.

Grass example uses DiscSectorZone with definition:

DiscSectorZone( center:Point = null, outerRadius:Number = 0, innerRadius:Number = 0, minAngle:Number = 0, maxAngle:Number = 0 )

Parameter are pretty straightforward. Change those parameters to:

new DiscSectorZone( new Point( 0, 50 ), 80, 75, -9 * Math.PI / 16, -7 * Math.PI / 16 )

Next image shows result:

Third Initializer is color. I wanted to change current situation and start with different colors. Changed line is:

emitter.addInitializer( new ColorInit( 0x66666600, 0x99999900 ) );

Fourth Initializer is easy to understand, it is particles Lifetime. If you increase it to 8, you'll get:

Flint power and diversity is in its actions. Library has almost 40 different actions in 2D space. Some of them are: Accelerate, CollisionZone, MouseGravity, RandomDrift and ones used in Grass example Move, Age and ScaleImage. Check entire list at org\flintparticles\twoD\actions. We will change two actions.

emitter.addAction( new ScaleImage( 3, 1 ) );
emitter.addAction( new Accelerate( 0, 6 ) );

Next image shows result:

By now you have good insight into how Flint works. You should probably use some other examples both 2D and 3D and change few parameters to get used to library before you are brave enough to try to write your own particles code using Flint.

Flint library is released under MIT license by Richard Lord.



PlayRightProductions said...

Thank you for this. It's a great site.


template by blogger templates