Emit particles from one point to another ?

[chusek]

http://www.html5gamedevs.com/topic/5448-emitte-particles-from-one-point-to-another/

That post has a great solution only it uses explode.

what I get is a lot of particles exploded and goes to the destination point.

what I need is particle emitted continuously and going to the destination point one by one.

Any idea ?

[lewster32]

Not easily implementable with Phaser's default particle system, which only applies an initial force to particles. You could maybe write your own particle class but that'd be quite involved. I guess you need a particle system which has attractors built in like Proton, which works with pixi and thus with Phaser too.

[lukaMis]

When you start your emitter change explode parameter (first one) to false and frequency (third one) to be less than tween time you use to move particle from one point to the next:

emitter.start(explode, lifespan, frequency, quantity) 

[chusek]

Not easily implementable with Phaser's default particle system, which only applies an initial force to particles. You could maybe write your own particle class but that'd be quite involved. I guess you need a particle system which has attractors built in like Proton, which works with pixi and thus with Phaser too.

Thanks,but  now

How do I use Proton with Phaser ?

[lewster32]

See the source for this example (which is for pixi, but should be fairly easily adaptable to Phaser, which uses pixi internally): http://www.a-jie.cn/proton/example/render/custom/pixijs.html

[chusek]

So what I've got is Proton has its own renderer then it draw thing on canvas.... or in this case PIXI stage by 

pixiStage.addChild(particle.sprite); //particle.sprite was created by Proton

now I have no idea how to do this in Phaser.

[chusek]

I'm looking at the usual Phaser set up with 

game.stage.addChild(particle.sprite);

replacing

pixiStage.addChild(particle.sprite);

but it doesn't work (undefine is not a function).

[lewster32]

I think it would be:

game.add.existing(particle.sprite);

Or:

game.world.add(particle.sprite);

The latter adding the sprite directly to the world group, which is the base group and effectively the 'stage' for Phaser.

[chusek]

Finally got it, !!!!!!!

Original Proton + PIXI

renderer.onParticleCreated = function(particle) {var particleSprite = new PIXI.Sprite(particle.target);     particle.sprite = particleSprite;     pixiStage.addChild(particle.sprite);};

// change into

renderer.onParticleCreated = function(particle) {     var particleSprite = game.add.sprite(0,0,particle.target);     particle.sprite = particleSprite;};

I notice it doesn't pool - recycle particle.

[lewster32]

You can do the pooling yourself in this function, just set the particleSprite to a revived sprite from the pool.

[chusek]

Summary: as lewster32 suggested. It's quite messy to tween particles to the point I want.
The keyword here is the attractor.
Proton is html 5 particle engine with attractor.
https://github.com/flashhawk/spp.js This is another option.

I make my random choice since both doesn't have documentation.
There's this Proton example that draw on PIXI stage 
http://www.a-jie.cn/proton/example/render/custom/pixijs.html

I edit the thing to work with Phaser.

not perfect but works
Tested working with cocoon js

https://github.com/chusek/Proton-phaser/

my first time on github !.

[lewster32]

Nice, spp.js looks very interesting - beautifully simple API!

 

Also, great work with the Proton-phaser project, this will surely help a lot of people out!