How to make letters rain effect (ideas)

Hi, I’m developing my first game with Phaser. Currently, I’m looking for different ideas to achieve an effect like this (the letter in the background not the front “This is” text):

It would be a little simpler: a small bunch of letters that fall slowly from top to bottom with a certain interval of time. Ideally, each letter is nearer or more far from the first plane, this is, I’d like to apply a camera depth field.

Options that I have thought:

  • Create a text object and move it along the Y axis with myText.y += 1 in the update function.
  • Create a sprite with each letter and apply physics to it (but I’m not sure about the performance of this).
  • An important issue is the camera depth field. Searching in Google I haven’t found anything related in Phaser… I don’t know even if this is possible.
  • My final alternative is to create a .gif in After Effects (or some program) and use it in my game.

Note: It comes to my mind that once I saw an example of “matrix” like text rain in Phaser Labs but now I can’t find it to put it here as an example (maybe I saw that in other resource). :thinking:

If you could give me some hint and shed some light on this, I would appreciate it so much. Thanks!

Hey @mb07
it’s right here - digital-rain
it’s under game-objects/particle-emitter/digital-rain.js

2 Likes

I think you can use a particle emitter for this. You don’t need a special emit zone (like the digital rain example), but you may want to use a custom Particle class so you can apply the depth consistently.

Thanks for the response. :slightly_smiling_face:

Is there a simple way to make the particles be just letters?

I tried making a spritesheet made up of letters and used it like in the example of the digital rain. But I can not manage to draw each letter separately in each particle, instead each particle draws a “square block” containing parts of different letters, like if the program was ignoring the different tiles of the spritesheet. See obtained result image:

This is the spritesheet I generated with TexturePacker (if I did well) (I quote the image just so you can see the white letters):

letters

Make sure you’re using load.atlas().

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:

2 Likes