# Rain effect in Phaser 3

**URL:** <https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130>\
**Category:** Phaser 3\
**Created:** [July 16, 2019, 1:22pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130 "2019-07-16T13:22:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![peteroravec](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@peteroravec](https://phaser.discourse.group/u/peteroravec)\
**Post date:** [July 16, 2019, 1:22pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/1 "2019-07-16T13:22:06Z")

</div>

Hi,  
I tried to find realistic rain effect for camera view but with no luck, is there anything like this?

[![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3e9457a7c99e54d70bb6f24453c5db7348fd20c3.gif) ](https://media.giphy.com/media/l1BgQOc1Jj7L86BA4/giphy.gif)

Thanks

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 16, 2019, 1:33pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/2 "2019-07-16T13:33:21Z")

</div>

I played around with the particle emitter and got this:  
[http://labs.phaser.io/edit.html?src=src\game%20objects\particle%20emitter\y%20position%20range.js](http://labs.phaser.io/edit.html?src=src%5Cgame%20objects%5Cparticle%20emitter%5Cy%20position%20range.js)

Hope it can be of use to you. You can fiddle around with the particle shapes and colours to get the desired effect.

---

<div class="post-metadata">

**Author:** ![peteroravec](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@peteroravec](https://phaser.discourse.group/u/peteroravec)\
**Post date:** [July 16, 2019, 1:38pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/3 "2019-07-16T13:38:19Z")

</div>

Thanks,  
I also played little bit with it and this looks fine…

```
    particles.createEmitter({
    frame: 'blue',
    y: 0,
    x: { min: 0, max: 800 },
    lifespan: 2000,
    speedY: { min: 200, max: 400 },
    scale: { start: 0.2, end: 0 },
    quantity: 3,
    blendMode: 'ADD'
});
```

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [July 16, 2019, 1:50pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/4 "2019-07-16T13:50:20Z")

</div>

I also played around with trying to achieve a similar particle effect. It’s quite fun! Here’s my try:

```javascript
particles.createEmitter({
        frame: 'blue',
        x: {min: 0, max: 800},
        y: 0,
        lifespan: 1000,
        speedY: 800,
        scaleY: .5,
        scaleX: .01,
        quantity: 10,
        blendMode: 'ADD'
    });

```

Also, this does not yield great performance. So if performance is important to you, I would suggest looking into shaders. Shaders are a bit difficult to wrap your head around, but if you do, the result will likely be more realistic and run smoother.

---

<div class="post-metadata">

**Author:** ![peteroravec](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@peteroravec](https://phaser.discourse.group/u/peteroravec)\
**Post date:** [July 16, 2019, 1:51pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/5 "2019-07-16T13:51:42Z")

</div>

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/11cf7e8ee2a2e2934760a91b625693364178659c.mp4](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/11cf7e8ee2a2e2934760a91b625693364178659c.mp4) There is a movement issue when my camera is moving… can I somehow make this rain particles independend from camera movement?

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [July 16, 2019, 2:18pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/6 "2019-07-16T14:18:53Z")

</div>

Yes. Add your `emitter.manager` to your map, at the topmost layer. Then when your character moves, adjust the x and y value of the particle emitter.

---

<div class="post-metadata">

**Author:** ![stupot](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@stupot](https://phaser.discourse.group/u/stupot)\
**Post date:** [July 17, 2019, 8:20pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/7 "2019-07-17T20:20:32Z")

</div>

This is pretty much exactly what you want [https://neutrinoparticles.com/en/gallery/detail/39](https://neutrinoparticles.com/en/gallery/detail/39), but the runtime hasn’t yet been ported to Phaser3. It might not be too much work if you want it bad enough. Works well in Phaser2.

---

<div class="post-metadata">

**Author:** ![Thoracius](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thoracius/32/3259_2.png) [@Thoracius](https://phaser.discourse.group/u/Thoracius)\
**Post date:** [April 26, 2020, 2:40pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/8 "2020-04-26T14:40:06Z")

</div>

Played around with the above responses to make it more dynamic-feeling:

```
particles.createEmitter({
        frame: 'blue',
        x: {min: 0, max: 800},
        y: 0 ,
        lifespan: {min: 100, max: 400},
        speedY: 1500,
        scaleY: {min: 1, max:4},
        scaleX: .01,
        quantity: {min: 5, max: 15},
        blendMode: 'LIGHTEN',
    });
```

---

<div class="post-metadata">

**Author:** ![thorty](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@thorty](https://phaser.discourse.group/u/thorty)\
**Post date:** [August 26, 2020, 7:29am UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/9 "2020-08-26T07:29:32Z")

</div>

My try based on your examples:

particles.createEmitter({  
frame: ‘blue’,  
x: {min: 0, max: 800},  
y: 0 ,  
lifespan: {min: 5, max: 3000},  
speedY: 200,  
scaleY: .4,  
scaleX: .01,  
quantity: {min: 2, max: 5},  
blendMode: ‘LIGHTEN’,  
});

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [November 13, 2023, 4:20pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/10 "2023-11-13T16:20:00Z")

</div>

I’m late to the party, but I guess I shouldn’t open a new thread. 😀  
This is my proposal based on a simple shader using PostFXPipeline:

https://codepen.io/jjcapellan/embed/preview/WNPOLOo?default-tab=result&theme-id=dark

---

<div class="post-metadata">

**Author:** ![pyf](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pyf/32/7754_2.png) [@pyf](https://phaser.discourse.group/u/pyf)\
**Post date:** [November 14, 2023, 1:22am UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/11 "2023-11-14T01:22:28Z")

</div>

very nice!!

---

<div class="post-metadata">

**Author:** ![Pixelsmith](https://avatars.discourse-cdn.com/v4/letter/p/8e7dd6/32.png) [@Pixelsmith](https://phaser.discourse.group/u/Pixelsmith)\
**Post date:** [May 6, 2024, 3:00pm UTC](https://phaser.discourse.group/t/rain-effect-in-phaser-3/3130/12 "2024-05-06T15:00:59Z")

</div>

Thanks for this post. This works great with Phaser 3 where emitter method can be a little confusing…