How I made rain using pencil and GZDoom feature

It's been almost 4 months since the last update, but so much stuff happened. War, for example, right behind my border. But I haven't been slacking and here's a progress update. Also, demo is almost ready, waiting only for sounds to get finished.

But, I wanted to talk about something else. Rain.

The idea is that visually, each level has something new to show, and one has rain. This was possibly the biggest pain for me because making rain look like rain, and making it still look hand-drawn, was super hard. I probably spent more time just thinking how to do it than actually doing it.

It all started with level layout. I wanted to have something like Half-Life's cliffside level to be able to use heightened jump that you get right before this part of the game. It's a 2D platformer level in 3D, basically. So it's a cliffside - which I chose because it also shows a nice vista.

So here's the first step, the most basic geometry. I knew that I would make rain consist of different layers - rain visible close to you and further away - to keep this hand-drawn look. "Closeup" rain from afar looks like dots, so I assumed that for faraways droplets carried by wind gushes, I'd make these line-y scribbles so they don't turn into grain. Here are the two first layers.

Both types of rain are generated by spawners that spawn either individual droplets (for closeup rain) or sprites with gushes (for faraway rain), randomly, carried in certain direction. They spawn only at certain proximity from you and become inactive when you're too far to avoid too much visual noise.

Here it's important to note that wind is a factor. When you're close to the cliff, the drops reaching you drop almost vertically because there is no wind to move them. But further away, you can see they travel also horizontally.

Having this basic idea I could start doing some work on the level geometry. Next step was making the rain look right. Because it didn't at this point. It looked quite awful, in fact.

As you see in the screenshots above, the gushes looked like blobs. From what I can see with my own eyes, they should be more flattened. When wind carries rain, it looks like waves. So I flattened them.

As for waves, since there is a river, there should be some interaction between rain and water. At first I had just splashes on the surface, but in real life it's more complicated - wind also makes it look like waves of droplets hitting the surface. So I emulated that by spawning the splashes on the river, in waves. Here's an early version. A bit better.

To add more variety to rain, more noise, I created one more layer. So there are four rain layers now:
- the closeup rain, where each drop generates its splash,
- the background noise animated rain with 2 frames of animation that quickly changes the droplets' position,
- another background noise layer but less pronounced,
- water splashes, which work separately of everything else.

Last two things were interactions with rocks, and clouds.

As for the rocks, I added an animation of water pouring down some of them to make the whole scene look more wet. At first, this layer was omnipresent, on every rock, but this just didn't look good, everything suddenly was in motion. So I left it only on some surfaces.

As for clouds, they were a pain. The ones in the distance are easy, they're sprites, actually just two, but at different heights they look varied enough. It was hard to make the clouds look good directly above you. I tried a bunch of stuff, sprites with billboarding and without, but I don't recommend it - they're spinning with you and it looks ridiculous.

Eventually I settled for a 3D floor with a scrolling texture. At first I tried to have the entire sky covered with this cloud layer, but it made the scene look ugly and unreadable. So I had to add just enough clouds for it to look cloudy, but not too much so it's still nice and readable. Finally, I chose to have two layers of textures scrolling at different speeds.

Here's the result.

I'm happy how this turned out. There are still some things to fix, like the drops splashing on the screen, and maybe animating the plants that get hit by droplets. But in general, I hope this rain looks rainy enough and hand-drawn enough. Let me know what you think.

I have a Twitter and a Facebook channel if you'd like to follow. Thanks!