Emitter burst of particles in form of a circle

[BdR]

Is it possible to emit a burst of particles in form of a circle using the Emitter class? By default the emitter object emits particles with random x and y speeds, but what I want to do is manipulate the x/y speeds so the particles in each burst form a circle.

 

What I've tried is making a for-loop, setting the speeds using emitter.setXspeed and setYspeed each time, and then adding one individual particle. It creates the particles alright, but they don't move for some reason.

 

I've taken this burst particle example as a starting point, and changed it. See github or code below.

https://github.com/BdR76/phaserparticles

function particleBurst_circle(pointer) {    //  Position the emitter where the mouse/touch event was    emitter.x = pointer.x;    emitter.y = pointer.y;    var EXPLODE_DIAMETER = 80.0;    // emit a circle of particles, 360 / 18 = 20 particles    for (var i = 0; i < 360; i=i+18) {        // set fixed x speed        var xsp = Math.cos(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER;        emitter.setXSpeed(xsp, xsp);        // set fixed y speed        var ysp = Math.sin(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER;        emitter.setYSpeed(ysp, ysp);        // TODO: how to emit one single particle?        // next line doesn't work, only emits one(?) moving particle        //emitter.start(true, 2000, null, 1);        // next line add particles, but not moving        var star = emitter.create(pointer.x+xsp, pointer.y+ysp, 'particles', null, true);    }}

Any help would be much appreciated

[XekeDeath]

Calling start basically only sets the emitter to start on the next update. So, call that update manually.

 

emitter.start(true, 2000, null, 1);

emitter.update();

[BdR]

Okay, nice that works, thanks.

 

Although, it now adds particles taking a random sprite from the 6 available particle sprites. I'd still like to have more control over the individual particles, for example if you want to alternate 2 colors. So one burs of alternating blue/green particles and the next yellow/red particles or something like that. Is it possible to do it the other way, by adding particles like so:

var star = emitter.create(pointer.x, pointer.y, 'particles', null, true);

star.frame = (i % 4); // alternate blue/green

// but it still won't move..

[XekeDeath]

You may be getting into 'roll your own' territory there.

The Phaser emitter isn't a complete suite of particle options.

 

What it is, is an extension of the Phaser.Group.

The create function comes from there, so you are not creating a particle, but just a sprite.

 

The makeParticles function of the emitter does a little more than just creating a sprite, but you should only do that once.

 

I had to do something similar once. Different end result, but I had to force frames on individual particles.

I ended up just adding a variable onto the emitter to tell it what frame I wanted the next particle to be, and altered the emitParticle function to use that frame instead of a random one.

 

particles/arcade/Emitter.js

    if (Array.isArray(this._frames === 'object'))    {        // See if we set the custom frame variable here        if ( this.customFrame != null )        {                particle.frame = this.customFrame;        }        else        {                particle.frame = this.game.rnd.pick(this._frames);        }    }    else    {        particle.frame = this._frames;    }

[totallybueno]

EDITED: Sorry, I didn´t see the makeParticles line, it works that way

 

 

 

 

Hi guys, I was trying exactly the same and I´m having the same problem, the particles are not moving, did you fix this? I don´t know what to do with that. I create de circle of particles but they´re not moving

 

This is my code:

var emitter = this.game.add.emitter();        var EXPLODE_DIAMETER = 40.0;        emitter.x = this.ball.x;        emitter.y = this.ball.y;        for (var i = 0; i < 360; i=i+36) {            var xsp = Math.cos(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER;            emitter.setXSpeed(xsp, xsp);            var ysp = Math.sin(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER;            emitter.setYSpeed(ysp, ysp);            emitter.start(true, 2000, null, 1);            var star = emitter.create(this.ball.x+xsp - EXPLODE_DIAMETER, this.ball.y+ysp - EXPLODE_DIAMETER, 'stars', null, true);            emitter.update();        }

[BdR]

I know it's a late answer, but..

 

This is my code:

 

If you remove the "var star = emitter.create(.." line then it works.