Phaser - Struggling with particles

Question

I'm building a game as a side project. I'm struggling with my particles to result the same way it does 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 particles 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 can get a better result ?

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);
    }
}

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

Answer 1

I'm not 100% sure, if I understand what "doesn't look as in your art", since I'm only a developer, and I'm not good with graphics. That said, I think if you alter the scale function of the emitter, so that on each height, there could be different sizes of particles, your smoke might seem more realistic/ "cloudy" since the particle sizes are more mixed.

Alternatively: You could also overlay several "dark" emitter over each other, to make it more "organic" add it add's more movement. And/Or you could increase the particle quantity.

Short Demo, with different Sizes:
(One could also alter the scaling, from lifetime start to end to make it more active, but for the demo I wanted to keep it small)

let imageBase64 = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB5SURBVChTjdCxEYJAEEbhB4GMAR2YG1oGFdgKFRhZARZCC8Qam1ICQ+QAyVs8iPiD+25vd25uDv4pkj3ASbP08KatVtppvi7ApIPO+lEAao3hSNSbZ700bgqvCsBDfxpDvQJw1mh+d3Wjm7z1qWPSW3PR+Le7lnosC4Z0FKkp4Q8RAAAAAElFTkSuQmCC`

class DemoScene extends Phaser.Scene {
preload(){
this.load.image('smoke', imageBase64);
}
    create () {
        
        const { width, height } = this.scale;

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

        const emitter1 = this.add.particles(0, 0, 'smoke',
            {
                x: { min: 20, max: 120 },
                y: height,
                lifespan: 2000,
                speedY: { min: 10, max: -100 },
                scale: {  onEmit: function(p){
            let scale = Phaser.Math.FloatBetween(.1, 4);
            return Math.random() > .9 ? scale * -1 : scale;
        } },
                alpha: { start: 1, end: 0 },
                blendMode: Phaser.BlendModes.NORMAL,
                quantity: 10,
                frequency: 200,
            }
        );
        
        const emitter2 = this.add.particles(0, 0, 'smoke',
            {
                x: { min: 160, max: 260 },
                y: height,
                lifespan: 2000,
                speedY: { min: 10, max: -100 },
                scale: {  onEmit: function(p){
            let scale = Phaser.Math.FloatBetween(.1, 4);
            return Math.random() > .9 ? scale * -1 : scale;
        } },
                alpha: { start: 1, end: 0 },
                blendMode: Phaser.BlendModes.NORMAL,
                quantity: 30,
                frequency: 200,
            }
        );


    }

}

var config = {
    width: 540,
    height: 180,
    backgroundColor: '#ffffff',
    scene: DemoScene,
}; 

new Phaser.Game(config);

console.clear();
document.body.style = 'margin:0;';

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
Right Emitter has just more particles<br/>