Flint Particle System Forum - what's the best way to create a firework with multiple emitters?

what's the best way to create a firework with multiple emitters?

2008-07-18T08:55:06+01:00

Hi - great work, Richard - this is an amazing library!

I'm trying to create a firework with multiple bursts in different colours. I'm trying to come to grips with the most efficient way of getting this to happen. I fiddled with the sparkler example to achieve the effect I'm after - the function below takes a colour and a location and renders a single burst, then dies. I run this on a timer for a period of time, creating and destroying emitters every 100ms or so. It works well and looks great, but it's taxing on the CPU. I wonder if there's a more efficient way of going about this? I couldn't see any way to get (say) a red, blue and green blast out of the one emitter. Alternately can more than one emitter share a single bitmap renderer so it's not trying to overlay several on top of each other?


private function createEmitter(color:int, loc:Point) : void {
			var renderWidth:int = 400;
			var renderHeight:int = 400;
			
			_numEmitters++;
			
			var emitter:Emitter = new Emitter();			
			emitter.counter = new Blast( 50, 100 );
			
			// color is alpha range for supplied color
			var maxColor:int = color + (0xFF << 24);
			var minColor:int = color;
			
			emitter.addInitializer( new SharedImage( new Line( 8 ) ) );			
			emitter.addInitializer( new ColorInit( minColor, maxColor ) );
			
			emitter.addInitializer( new Velocity( new DiscZone( new Point( 0, 0 ), 100, 250 ) ) );
			emitter.addInitializer( new Lifetime( 0.2, 1 ) );			
			emitter.addInitializer( new Position( new LineZone( new Point( 190, 190 ), new Point( 190, 190 ) ) ) );
			
			emitter.addAction( new Accelerate( 0, 90 ) );			
			emitter.addAction( new Age(Quadratic.easeIn) );
			emitter.addAction( new Move() );
			emitter.addAction( new RotateToDirection() );	
			emitter.addAction( new LinearDrag( 0.5 ) );
			
			var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 400, 400 ) );
			renderer.addFilter( new BlurFilter( 2, 2, 1 ) ); 
			renderer.addFilter( new ColorMatrixFilter( [ 1, 0, 0, 0, 0,
														 0, 1, 0, 0, 0,
														 0, 0, 1, 0, 0,
														 0, 0, 0, 0.95, 0 
														] ) );
			emitter.renderer = renderer;
			renderer.x = loc.x - renderWidth / 2;
			renderer.y = loc.y - renderHeight / 2;
			addChild( renderer );
			
			emitter.addEventListener(FlintEvent.EMITTER_EMPTY, onEmitterEmpty, false, 0, true);
			
			emitter.start( );	
		}

what's the best way to create a firework with multiple emitters?

2008-07-18T09:33:41+01:00

Hi

One minor suggestion - your position initializer would be more efficient if you used a PointZone rather than a LineZone.

For the main issue...

You could try using a single emitter for all the fireworks. You'll need to move the position initializer rather than the renderer for each one, but it looks like you're not doing anything that would prevent this. So, create a single renderer that covers the area used by all the fireworks. Then, create a custom counter. This counter will have a method that you can call to cause it to emit another blast of particles on the next update. The custom counter would look something like this...

package
{
	import org.flintparticles.emitters.Emitter;	
	
	public class ManualPulse implements Counter
	{
		private var _quantity:Number = 0;
		
		public function ManualBlast() {
		}
		
		public function startEmitter( emitter:Emitter ):uint {
			return 0;
		}
		
		public function updateEmitter( emitter:Emitter, time:Number ):uint {
			if( _quantity ) {
				var q:uint = _quantity;
				_quantity = 0;
				return q;
			} else {
				return 0;
			}
		}
		
		public function createBlast( quantity:uint ):void {
			_quantity = quantity;
		}
	}
}

Because all the variations on your emitters are in the initializers only, you can modify the initializers before each blast. So, create the emitter once but retain references to the ColorInit and Position initializers and the counter. Start the emitter (nothing will happen because the counter is indicating it should emit no particles). Now change your createEmitter function to something a lot simpler (most of the existing code has already been used to create the emitter) like this...

private function createFirework( color:int, loc:Point ) : void {
	positionInitializer.zone = new PointZone( loc );
	colorInitializer.minColor = color;
	colorInitializer.maxColor = color + (0xFF << 24);
	myCounter.createBlast( 50 + Math.floor( Math.random() * 50 ) );
}

N.B. I haven't tested this code, just scribbling it down as I think.

If you don't want to do this, there's another option. The new branch allows multiple emitters in a single renderer. The branch is called three_d, but it still does 2D particle systems as well the new 3D stuff. Because it's still in development, it's only available through the code repository at http://code.google.com/p/flint-particle-system/source/browse/branches/three_d/. The 2D stuff should be stable and usable, most of the work that remains is on the 3D code and the documentation.

what's the best way to create a firework with multiple emitters?

2008-07-20T01:43:36+01:00

that worked first time Richard - many thanks!