Struggling with particles

Hey there :wave:

I’m building a game as a side project. I’m struggling with my particles to result the same way I did in my artwork :

Here is a demo of the current state of the game. https://youtube.com/shorts/-kcjdRjAXm0?feature=share

(Edit : better quality) https://www.youtube.com/shorts/UirFrriJDNM

As you can see. The gas particle on the bottom of the screen is not rendering the same way it does in my art. Even if I used the same brush and same colors for the particle (one purple one black).

Do you know how I could get a better result ?

Also, if you have any advice to improve the global render It would be a pleasure to read it since I’m not a professional game developer. Thanks

PS : here is the code that manage the gas particles

import {BlendModes} from "phaser";

export class ToxicGas {
    private scene: Phaser.Scene;
    private particles: Phaser.GameObjects.Container;

    constructor(scene: Phaser.Scene) {
        this.scene = scene;
        this.initToxicGas();
    }

    private initToxicGas() {
        const { width, height } = this.scene.scale;

        this.particles = this.scene.add.container();

        const lightParticles = this.scene.add.particles(0, 0, 'toxicGasLight',
            {
                x: { min: 0, max: width },
                y: height,
                lifespan: 2000,
                speedY: { min: 0, max: -100 },
                scale: { start: 0.5, end: 1 },
                alpha: { start: 1, end: 0 },
                blendMode: BlendModes.NORMAL,
                quantity: 10,
                frequency: 200,
            }
        );

        const darkParticles = this.scene.add.particles(0, 0, 'toxicGasDark',
            {
                x: { min: 0, max: width },
                y: height,
                lifespan: 2000,
                speedY: { min: 0, max: -100 },
                scale: { start: 0.5, end: 1 },
                alpha: { start: .5, end: 0 },
                blendMode: BlendModes.DARKEN,
                quantity: 5,
                frequency: 200,
            }
        );
        this.particles.add(lightParticles);
        this.particles.add(darkParticles);
        this.particles.setDepth(-100);
    }
}

:wave:

What’s the main difference visually?

There’s no DARKEN blend mode in WebGL. MULTIPLY might be similar.

I don’t know, it doesn’t feel like a heavy toxic gas. Maybe it’s because of the upward translation on the y-axis.

I just used DARKEN to try but indeed it does not change anything

With particles you often have to try a lot of things until you get something that looks right.

const lightParticles = this.scene.add.particles(0, 0, 'toxicGasLight', {
  lifespan: 2000,
  quantity: 10,
  frequency: 200,

  x: { min: 0, max: width },
  y: { min: height - 200, max: height },
  speedY: { min: 0, max: -50 },
  gravityY: -50,

  scale: { start: 0.5, end: 1 },

  alpha: { start: 1, end: 0, ease: 'Cubic.In' },

  blendMode: BlendModes.SCREEN
});