Rain rolling down windows...

Started by LRH, Wed 04/05/2011 01:47:30

Previous topic - Next topic

LRH

I'm working on this background but I'm really having trouble making it look like rain is rolling down the windows. Any suggestions?

Pinback

#1
I find the best start is usually to find some good references;

http://www.youtube.com/watch?v=4jaGyv0KRPw&feature=related

Which in this case is mostly droplets hitting the window and staying still, with the occasional streak forming.
I find for animations like this Photoshop CS4's 'tween' feature helps a quick atmosphereic animation look a lot smoother.



LRH

That's a good suggestion but I don't know if that's something this resolution can handle...not to mention my art skills are fairly limited. I'm trying to work with a simple looping animation, maybe only 4-5 frames.

Shane 'ProgZmax' Stevens

#3
This link got me into all that relaxation music and soon I was getting sleepy so thanks.

Basically,you'll first animate a droplet falling across the surface with a small transparency level and then go back and blend the edges of it so there's some distortion as it passes background elements.  It's simple enough to do and the smaller the window the less effort you're going to need to make it work.

InCreator

#4
Make a dot. Gray, let's say (RGB 128,128,128), 1 to 4 pixels.

During 5 frames, fade it to black (or 10% opacity if you're going to add stuff behind window) and moving down a bit. 5-10 pixels.

Now copy different animation states of same dot to the whole window area and animate them.
What you'll end up is rain hitting window, sliding down and disappearing. Not 100% realistic maybe, but I think it'll look awesome. Only tedious part is making the animation, but 5 frames is not very much work.

E:


Went procedural: animated a single raindrop, then used Game Maker to make a little program that makes random drops over windows area and spits out PNG frames for animation. With proper tinkering, I think it could do whatever you like.

Looking back, this edit has 440 animated raindrops, so it would be crazy to animate all this by hand.

Here's code if you want, you need at least Game Maker 8 to peek (it's free!). Code well commented, and there's not much of it really.
For some reason, output looks better if you don't use very first frame.

http://www.indrek.org/i/critshelp/rain.rar

Single frames for this particular edit are inside archive too; but using program generates random drops every time.

LRH

Progz, thank you... I think I might have to give that a shot in another room with a window on a slightly strange angle.

InCreator, that's amazing! Thank you so much! I'll *have* to tinker with this later. I'll have to credit you for sure. :)

abstauber

Palette rotation might also be your thing, since your backgrounds don't have thathigh color count.

Here are some example how powerful palette rotation can be:
http://www.effectgames.com/demos/canvascycle/

And a free (and awesome) tool which can export palette rotated backgrounds is here, so there's no need to create an 8-bit game for this effect.
http://code.google.com/p/grafx2/


So in order to archive the effect, you need to add a  gradient in the palette with all the colors of the running down raindrop: e.g. a ramp from light gray to your sky's color.

Now you draw little stripes, containing all the colors of your gradient on the window - you can also do that on a separate layer if you wish.

Now start the rotation and see for yourself :)

LRH

For now I like to play with this game maker program...but abstauber, that's incredible O_O

I mean, I know the art is really there, but it looks so good. The atmosphere it creates is amazing. This is something I'll definitely want to toy with in the future.

abstauber

I'm looking forward to it. To both actually  :)

SMF spam blocked by CleanTalk