Trail particles on mobile => lag effect

Phaser 3
1

Hi everybody in the forum,

I’m not sure that a solution exist for my problem but maybe…

On desktop, i have a trail effect with particles attach to a player and all is perfect, see my capture screen :

01

My player move with Physics ARCADE and the particles follow them.

But on mobile device sometimes i can see the space between particles.

See capture :
02

My snippet for the particle in my prototype is :

        this.particle = this.scene.add.particles('player_particle').createEmitter({
            speed: {
                min: 0,
                max: 0
            },
            lifespan: 400,

            scale: {
                start: 1,
                end: 0
            },
            quantity: 1,

            on: true,
            blendMode: 'MULTIPLY',
        });

My snippet in update function in my prototype:

  preUpdate(time, delta) {
        super.preUpdate(time, delta)
        this.particle.setPosition(this.x, this.y)
   }

My game is 640px by 1280px with Phaser.WEBGL and my particle is 60/60px.

Is there a solution for that or is it due to mobile ( I hope not, Unity do it right…)?

2

It looks like there aren’t enough particles to complete the effect on mobile. Perhaps have a play around with the quantity and frequency configuration variables for your particles.

frequency is the wait in milliseconds before more particles are spawned.

quantity is how many particles are spawned at these intervals.

Since all of your particles go in the same direction at the same velocity, it would make no sense to set the quantity to anything other than 1 as there particles would just overlap. However, it might help to change frequency, try to make the value as large as possible with the effect working as this will give better performence.

Good example: rexrainbow’s docs

Hope this helps!

1 Like
3

thanks it help me a lot.

here the solution i found by your advice :

  this.particle = this.scene.add.particles('player_particle').createEmitter({
            speed: {
                min: 0,
                max: 0
            },
            frequency: 5,
            lifespan: 400,

            scale: {
                start: 1,
                end: 0
            },
            quantity: 3,

            on: true,
            blendMode: 'MULTIPLY',
        });
1 Like
4

Glad I could help!