Jump to content

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


Recommended Posts





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;    // ...}// ...
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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




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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...