How to make letters rain effect (ideas)

[mb07]

Finally, I could achieve what I wanted, but now I have time to post here my solution (though maybe a bit late).

import lettersTexture from "../assets/letters.png";
import lettersDescription from "../assets/letters.json";

class Main extends Phaser.Scene {
    constructor() {
        super({
            key: "main"
        });
    }

    preload() {
        this.load.atlas('letters', lettersTexture, lettersDescription);
    }

    create() {
        // Set the backgrond color to white
        this.cameras.main.setBackgroundColor("#ffffff");

        // Define the zone where we want the particles to be emitted from
        let emitZone = new Phaser.Geom.Rectangle(0, -10, 540, 20);
        // Create a numbered array just to access the letters texture atlas by index
        let letterIndices = Phaser.Utils.Array.NumberArray(1, 25).map(String);
        // Create the particle emitter with the previous created objects
        this.utils.createParticles(this, "letters", emitZone, letterIndices);
    }
}

Being the createParticles() function like this:

createParticles(scene, atlas, source, frames) {
        return scene.add.particles(atlas).createEmitter({
            alpha: {
                start: 1,
                end: 0.25,
                ease: 'Expo.easeOut'
            },
            angle: 0,
            blendMode: 'MULTIPLY',
            emitZone: {
                source: source
            },
            frame: frames,
            frequency: 150,
            lifespan: 7000,
            quantity: 1,
            scale: 0.5,
            tint: 0x000000,
            gravityY: 30
        });
    }

The letters.png and letters.json assets were generated with TexturePacker tool following the instructions in their page. Then, I preloaded them with load.atlas() and finally used it with a particle emitter as you can see in the code.

This is the result: