Particles: Add fire emitter for each molotov in group (demo included)

[solegrina]

 

Hello!

 

I'm currently developing a game mechanic of molotov throwing. The idea is to have a fire trail for each molotov thrown, however I'm not exactly sure on how to continue with it. I was using a single emitter approach, then reviving it each time a molotov was in air. However, I have found the following problems with this approach:

• I have to set the opacity to 0 each time I kill the emitter, otherwise the particles trail doesn't disappear and remains static as in this pic.
• When I revive the emitter, it's possible to see some particles coming from the last molotov position.

To try solving that, I would like to ask: Is it possible to include an emitter for each molotov in the molotovPool? How would it affect performance? Is there another way to achieve the desired effect? Thanks in advance

 

Click here to check the demo and here's the relevant part of the code:

// ...create: function() {    // ...    // Emitter creation    this.fire_emitter = this.add.emitter(0, 0, 400);    this.fire_emitter.makeParticles('spritesheet', [21,22,23,24]);    this.fire_emitter.gravity = 700;    this.fire_emitter.setAlpha(0.9, 0.7, 500);    this.fire_emitter.setScale(0.9, 0.2, 0.7, 0.2, 500);    this.fire_emitter.setRotation(0, 90);    // Molotovs creation    this.molotovPool = this.game.add.group();    for(var i = 0; i < this.NUMBER_OF_MOLOTOVS; ++i) {    	var molotov = this.game.add.sprite(0, 0, 'spritesheet', 20);    	this.molotovPool.add(molotov);    	molotov.anchor.setTo(0.5, 0.5);    	this.game.physics.enable(molotov, Phaser.Physics.ARCADE);    	molotov.body.gravity.y = this.GRAVITY;    	molotov.kill();    }    // ...},update: function() {    // ...        // Destroy molotov when it collides with the ground    this.physics.arcade.collide(this.molotovPool, this.lCollision, function(molotov, lCollision) {	this.fire_emitter.alpha = 0;	this.fire_emitter.kill();	console.log(this.fire_emitter.total);	molotov.kill();    }, null, this);    // When player clicks a molotov is thrown    if(this.NUMBER_OF_MOLOTOVS > 0 && this.game.input.activePointer.isDown) {	this.throwMolotov();    }    // For each molotov alive (in the air) update the velocity and the position of    // the emitter. I used an example from Phaser's page.    this.molotovPool.forEachAlive(function(molotov) {	var px = molotov.body.velocity.x;	var py = molotov.body.velocity.y;	px *= -1;	py *= -1;	this.fire_emitter.minParticleSpeed.set(px, py);	this.fire_emitter.maxParticleSpeed.set(px, py);	this.fire_emitter.x = molotov.x;	this.fire_emitter.y = molotov.y;    }, this);    // ...},throwMolotov: function() {    this.fire_emitter.revive();    this.fire_emitter.x = this.player.x;    this.fire_emitter.y = this.player.y;    this.fire_emitter.start(false, 300, 3);    this.fire_emitter.alpha = 1;    // ...}// ...

[Outrider]

I've had success with turning it on and off via the methods.

 

this.fire_emitter.on = false // for off.

this.fire_emitter.on = true. // for on.

 

Maybe it cleans it up a bit better?

[solegrina]

Aha! I thought that the on attribute had the same effect that killing the emitter. It looks much better now, thanks, Outrider!

However it stills not working when, for example, you throw multiple molotovs at a time. The fire trail only follows one of them. This is why I'm thinking on how to attach one emitter to each molotov in the pool...

[Outrider]

You'll probably have to create a new emitter for each molotov, then on top of turning it off you'll want to use a destroy just for the sake of clean up.

 

So move your:  this.fire_emitter = this.add.emitter(0, 0, 400);

 

Into your upgrade method this.molotovPool.forEachAlive

 

ALTERNATIVELY

 

You might also be able to do the same for your molotov Group in the create function. (Make a Group of Emitters I mean)

 

Lemme know what you do in the end and what works Glad the on and off worked for you.

[solegrina]

It worked!! Thanks a lot, Outrider.

 

I created a fire_emitter for each molotov not in the beggining, but when throwing it. So I did molotov.fire_emitter = this.add.emitter(...). Then it's just a matter of updating each fire_emitter position in the update function. Here's the current version.

[Outrider]

Awesome, glad it worked out!