How do I change particle tint?

Phaser 3
1

In my game, the player is matching objects. Whenever they match, I want particles of the colors of the matched objects to explode from them, and this is a mechanic I currently have working. Where I have trouble is setting the tint of the particles to account for more matchable objects (so that I don’t have to draw all the sprites for all the particles).

How do I change the tint of a particle emitter?
I found the tint property (https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Particles.ParticleEmitter.html#toc0__anchor) but I’m struggling to change it.

Here is where I’m creating the emitters:

     let ntParticleConfig = {
        x: 150,
        y: 510,
        speed: { min: -800, max: 800 },
        angle: { min: 0, max: 360 },
        scale: { start: 0.5, end: 0 },
        active: false,
        lifespan: 600,
        gravityY: 800,
        tint: 0xFFFFFF // white by default, trying to find some way to set this property later.
    };
    this.ntparticle = {
        "adenine": this.add.particles("ntparticle_adenine").createEmitter(ntParticleConfig),
        "cytosine": this.add.particles("ntparticle_cytosine").createEmitter(ntParticleConfig),
        "guanine": this.add.particles("ntparticle_guanine").createEmitter(ntParticleConfig),
        "thymine": this.add.particles("ntparticle_thymine").createEmitter(ntParticleConfig),
        "uracil": this.add.particles("ntparticle_thymine").createEmitter(ntParticleConfig),
        "white": this.add.particles("ntparticle_white").createEmitter(ntParticleConfig)
    }

Here is what I’ve tried:

// Particle explosion upon correct match
let that = this;
let particle1, particle2; // particles to explode upon correct match.

// original code
particle1 = that.ntparticle[headNTName];
    
/* Attempt 1
particle1 = that.ntparticle[headNTName].tint = 0xff0000;
*/
/* Attempt 2
particle1 = that.ntparticle[headNTName].forEach(function(particle) {
    particle.tint = 0xff0000;
});
*/
particle2 = that.ntparticle[pairNTName];

Here is how particle1 and particle2 are used later:

        this.game.time.addEvent({
            delay: 100,
            loop: false,
            callback: function () {
                particle1.resume();
                particle1.explode(50);
                that.game.time.addEvent({
                    delay: 100,
                    callback: function () {
                        particle2.resume();
                        particle2.explode(50);
                    },
                    loop: false
                });
            }
        });
2

You can change the emitter’s tint with

emitter.tint.onChange(0xff0000)

You could also do

particles.addEmitter(
  Phaser.Utils.Objects.Merge({ tint: 0xff0000 }, ntParticleConfig)
);
5 Likes
3

Thank you so much, works perfectly.
Why is it that I need onChange and can’t just directly set a tint value?

4

All of the EmitterOp properties work that way. The odd thing is that ParticleEmitter doesn’t have a setTint() method, needs adding I guess.

1 Like
5