Home > database >  Phaser 3: Allow Particles to emit with flipped/mirrored image?
Phaser 3: Allow Particles to emit with flipped/mirrored image?

Time:02-23

I have a particle emitter which emits multiple duplicates of the same image, as usual. However I'd like some of the particles to be flipped, either completely at a random amount, or sort of in the middle, so that particles falling to the left would be flipped and particles falling to the right won't be.

However I couldn't find anything regarding flipping particles without flipping ALL of them. I'd only like some to be flipped. Is this possible in any way?

CodePudding user response:

There are serveral way's, I think the fastest would be using the scaleX property of the emiter

this code flips about 10% of the particles ( 0.9 > Math.random() ), through multiplying it with -1, when it should be flipped.

Example Code:

this.add.particles('sparkle').createEmitter({
    x: 200,
    y: 100,
    scaleX: {
        onEmit: function () { 
            return ( 0.9 > Math.random() ) ? -1 : 1;
        }
    },
    speed: { min: -100, max: 100 },
    quantity: 0.1,
    frequency: 1,
});

But I assume from a earlier question, that you have emitter with a "random scale" property. I that case you woud have to do something like this:

Example Code, for random scaled particles:

gameState.splash = this.add.particles('droplet').createEmitter({
    x: gameState.height/2,
    y: gameState.width/2,
    scale:  { 
        onEmit: function () {
            // create random new scale
            let newRandowmScale = Phaser.Math.FloatBetween(0.05, 0.3);
            return ( 0.9 > Math.random() ) ? -1 * newRandowmScale  : newRandowmScale;
         }
    },
    speed: { min: -100, max: 100 },
    ...
});

UPDATE(QuickFix): Example Code, for random scaled particles:

What the update does: get the current particle from the parameter, and set the scaleY property to the positive value of the scaling. (is abit hacky, but should work. I will see if there is a cleaner solution)

gameState.splash = this.add.particles('droplet').createEmitter({
    x: gameState.height/2,
    y: gameState.width/2,
    scale:  { 
        onEmit: function (particle) {
            // create random new scale
            let newRandowmScale = Phaser.Math.FloatBetween(0.05, 0.3);
            particle.scaleY = newRandowmScale;
            return ( 0.9 > Math.random() ) ? -1 * newRandowmScale  : newRandowmScale;
         }
    },
    speed: { min: -100, max: 100 },
    ...
});
  • Related