Particle Emitter: Set emit zone to a circle and have the particles move towards the center

Phaser 3
1

Greetings!
As the title suggests, I am trying to create a particle effect that moves the particles towards the center of a circle. Currently it is easy enough to move the particles strictly away from the center, but there doesn’t seem to be a good way to move them towards the center.

Any help or suggestions are greatly appreciated. Thanks!

2

You can define a Circle/Ellipse emitZone in your emitter config, along with moveToX/moveToY values.

   this.shape = new Phaser.Geom.Ellipse(400, 400, 300, 300);
   this.particles = this.add.particles('particleTexture');
   this.emitter = this.particles.createEmitter({
        moveToX:   400,
        moveToY:   400,
        lifespan:  200,
        alpha:     { start: 0, end: 0.7 },
        speed:     2000,
        scale:     { start: 0.5, end: 1 },
        emitZone:  { source: this.shape }
    });
3 Likes
3

Thanks Prob! that’s definitely a good solution to the proposed problem.

Do you know if there is a way to make it not hit the center though? I would prefer the particles to move towards the center, but not touch it.

4

You could fiddle with the lifespan and speed, so that they never make it to the center. Or perhaps add a deathZone to the config.

5

Unfortunately the speed doesn’t actually do anything. The speed is dictated by the lifespan when you use the moveTo properties. The death zone would also make it blink out of existence instead of fade out, unless there is was some way I could customize how the death zone interacted with the particles…