# How to make letters rain effect (ideas)

**URL:** <https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941>\
**Category:** Phaser 3\
**Created:** [April 1, 2019, 11:56am UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941 "2019-04-01T11:56:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mb07](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@mb07](https://phaser.discourse.group/u/mb07)\
**Post date:** [April 1, 2019, 11:56am UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941/1 "2019-04-01T11:56:12Z")

</div>

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):

[![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/8adf6b314fb3cfe5d91dffa41cb62c09eb92ae7f.gif) ](https://media.giphy.com/media/65AT7cbbc8KyE51hGG/giphy.gif)

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). 🤔

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

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 1, 2019, 12:25pm UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941/2 "2019-04-01T12:25:34Z")

</div>

> [@mb07](#):
>
> 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). 🤔

Hey @mb07  
it’s right [here - digital-rain](http://labs.phaser.io/view.html?src=src%5Cgame%20objects%5Cparticle%20emitter%5Cdigital%20rain.js)  
it’s under game-objects/particle-emitter/digital-rain.js

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 1, 2019, 4:14pm UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941/3 "2019-04-01T16:14:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mb07](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@mb07](https://phaser.discourse.group/u/mb07)\
**Post date:** [April 3, 2019, 3:35pm UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941/4 "2019-04-03T15:35:23Z")

</div>

Thanks for the response. 🙂

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:

 ![03](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/71aa71ffc3024962bd19af3a5beacdb1da7c4249.png)

This is the spritesheet I generated with [TexturePacker](https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3) (if I did well) (I quote the image just so you can see the white letters):

> ![letters](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/81e5cb6ad837cc31428204cf36d906a4346e2381.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 3, 2019, 3:46pm UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941/5 "2019-04-03T15:46:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mb07](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@mb07](https://phaser.discourse.group/u/mb07)\
**Post date:** [July 21, 2019, 12:25pm UTC](https://phaser.discourse.group/t/how-to-make-letters-rain-effect-ideas/1941/6 "2019-07-21T12:25:09Z")

</div>

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:

 ![letter-rain](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/daf613b2158e23016c1a00adbc3ef8bc9e37c5fe.gif)