Rain effect in Phaser 3

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

Thanks

1 Like

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

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

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'
});
1 Like

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

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.

https://canada1.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?

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.

This is pretty much exactly what you want 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.

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',
    });
1 Like

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

1 Like

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

4 Likes

very nice!!

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