How do I make a rain effect WITHOUT performance loss

Hi there,

I know how to handle C2 and create rain effects using bullet behaviour or particles.

Both ways decrease the FPS significantly. This is a problem as I am developing for smartphones which have even less computing power than PCs.

So the question is: How do I create a rain effect with the lowest impact on performance?

Hey CreativeMind,

Different devices can behave pretty differently depending on how they handle rendering. It's been a while since I've looked into this in depth, but I recall hearing that some even have a limit for the maximum number of overlapping drawable objects that can be rendered in a single frame refresh period.

There's a good overview of Construct 2 mobile performance considerations in this article

Performance Tips

Another good general article is,

Optimisation: don't waste your time

That said, I can try offering some thoughts and suggestions that might help out.

Rain is a bit tricky though because even the tips I'd normally think to give for optimization can be double-edge swords on mobile devices.

Two possible approaches

Particles will probably give you better performance than sprites, because particles exploit some render optimizations, and eliminate a bunch of sprite features you don't need to use like animations and collisions.

You still end up with a lot of individual things that need to be updated moved and drawn though, if each rain drop is it's own particle. A workaround is to put a lot of droplets on a single particle texture.

("Droplet cluster particles" below)

Another option would be to use a single tiled repeating texture and scroll it downwards, as it would only require 1-step to render it, instead of 1 step per particle. This takes up much more memory than a single raindrop texture, but probably not much more than any of the other larger textures in your game, like backgrounds and such.

("Scrolling tiled rain texture" below)

Both of these workarounds ("Droplet cluster particles" and "Scrolling tiled rain texture") involve using images with large amounts of transparent area. Normally this is something you'd want to avoid on a mobile device, but in this case the transparency isn't just superfluous uncropped area, and the alternative blizzard of individual raindrops might be worse. Again it partly depends on the device.

Scrolling tiled rain texture

With the tiled scrolling rain approach, you risk loosing the randomized look of raindrops, so you might want a largish texture. If you want a more randomized look, you can use two tiled textures of different sizes, overlap them, and then scroll them at different speeds. The interplay between the different textures will help break up the appearance of repeating patterns.

This also gives you the option of changing the angle of the rain drop graphics, which can't be done with particles as far as I know. (One of the optimizations used by C2 particles relies on all the particle textures maintaining the same angle, if I remember correctly)

Also just a note, you wouldn't scroll the tiled texture in the same direction forever, just until it got to a looping point where you could snap it back to its starting point, giving the illusion of continuous scrolling.

Droplet cluster particles

If you want to try using fewer particles to create the same visual density of rain drops, you can use a larger texture with randomly placed raindrops on it. This takes up a little more memory, because of the larger texture, but if each texture has 30 droplets on it, then the number of particles needed becomes 30 times smaller. which should improve the performance of the rain effect. However, this depends a lot on how the mobile device renders things. As I mentioned earlier, sometimes, it's the number of overlapping objects that causes problems, in which case particles may not help you.

Some care must be taken in drawing/creating this kind of droplet texture, because otherwise it will look like the droplets are falling in clumps.

When drawing this texture, it's usually good to have a fairly uniform distribution of droplets, with about the same amount of space between them. Avoid placing two right next to each other or you'll see that unique pair on every texture. It can also be good to build up the droplets from the center of the texture outward, with the vary outermost set of droplets at about half the density of the more central cluster. This edge drop off in density helps the particles (each one a cluster of droplets) blend together more seamlessly, because there's not a hard all-to-nothing density transition on every texture. You can think of it like feathering, but with amount instead of opacity.

finally you'll need the emitter to create enough of the particles (droplet clusters), so that any spot on the screen is covered by two particle clusters on average, kind of like house shingles. Since there will always be about 2 clusters overlapping any given spot, when drawing the texture, you should put the droplets about twice as far apart as you want them to finally appear in the resulting rain.

Thanks for the advice! I'll try using cluster particles and compressing the sprites with PNG Quant before usage.

Evaluating whether that works might take some time as I'll have to try different devices.

No problem.

Compressing the png files will help with download times, but I believe when the game is running the images will be fully decompressed in memory, so prior compression won't have an effect on runtime performance.

If you want to see an example of the rain cluster approach, it's what I used in a project I'm currently working on,

. The graphics are based on the GameBoy hardware, so they are a bit simplistic, but only the spacing of droplets really matters, they can look like whatever you want. In that video I have two layers of rain, a foreground layer, and a background layer. The background has smaller droplets, falling a little slower.

To give an idea of the droplet spacing used in the example above, the texture would look something like this,

            !
   !
                    !
        !
              !
                      !
 !
            !   
                   !
      !
[/code:16eaui5v]

Hey CreativeMind, sounds like fisholith has this covered. just thought I'd add to it though in case you decide to go with the tiled background method.

I've been working on a game for a couple of years called Wildfire. It's a GameMaker game, so we're not concerned about mobile performance, but one of the ways we handled snow was by creating tiling sprites that are largely empty aside from the snow. By having several of these layers, and working within the current layer order of your game, you can add a greater sense of depth. this can be achieved by having the closest layer with larger drops, scaling down as you go further back. for you it might be dependent on how far you want to push the hardware whether you go multi-layered. You can also change the fall angle for each page to add further differentiation.

One thing I would suggest, if you go this way, is to download a program called Pyxel Edit and create the image to the size you want it, by having a bunch of tiles to display (so, for example, start a new doc, you might want to set it to 20 x 20 tiles, with a pixel resolution of 32x32). You can then assign each tile to be the same, so when you draw on one, all of them get drawn on. This is massively helpful for making tiled backgrounds as you'll be able to see it in a live update as you draw inside the tile.

It's what I used when I did the snow, which looks like this: