I've been looking a lot around the forums and the internet, but there are few tutorials on how to make your own rain that are worth it. So I took the best out of them and I created my own. You can see the end result below.
There's some lag due to the cam studio, so bear in mind the effects are smoother than hell. Also those are place-holder graphics, please don't judge me.
Now, well, let's see what a realistic rain consists from.
1. Depth/Perspective
2. Reflection
3. Collision
1.Depth means that as any 2d game has some illusion of depth, aka perspective, so should the rain have. The rain should consist of some rain layers. The more the merrier. Depends on what we prefer, but two is all right as well.
2. When it's raining certain surfaces become mirror-like and project a reflection. Bearing that in mind you can create a very eye-candy result.
3. Collision the rain shall eventually fall on anything we see. A lamp light, our own characters even. And very importantly on the floor.
RAIN LAYERS:I've made two rain layers and those were the ones I was happy with. One front and one back. I presume there's a version of photoshop, cause it's needed for this.
1.Okay, so create a blank document at your game's resolution size.
2.Using the bucket paint it black.
3.Now click on Filter>Noise>Add Noise
4. Have the following settings: Amount - 400% , Uniform, Monochromatic
5.Click on Filter>Blur>Motion Blur. Set an angle of your choice, and distance around 30-40 pixels, and click on OK.
6.Click on Image>Adjustsments>Levels or if you like CTRL+L, and on input levels set 148 - 1.00 - 255. 148 is what will determine the raindrops.
7.Clip the canvas or re-size the picture to avoid what you see on the bottom and top. The clustering of raindrops. Make sure your image will retain its resolution that will fill the screen of your game.
We're halfway there.
1. Repeat this process creating however NEW documents to create as many frames as you like (4 are enough). That is because the noise pattern must differentiate, otherwise you'll be creating same frames.
2. For each frame do the following:
-Create a layer
-Duplicate the background layer
-Delete the background layer(not the duplicated)
-Place the empty layer under the duplicated background layer.
-Click on the magic wand, and click on something black.
-Press delete.
-Press CTRL+I to invert the raindrops from black to white.
-Delete the empty layer.
-Save as PNG.
3. When you're done that means you have Middle Rain.
4. Now you can Scale those frames by Edit>Transform>Scale, to zoom them and create Front rain.
You can see my results on the rain here.
To finish the drawing part for the tutorial part 1, just create some rain drop falls, something like those sprites. I will even supply the scripting part, so don't worry. :P
Read more
There's some lag due to the cam studio, so bear in mind the effects are smoother than hell. Also those are place-holder graphics, please don't judge me.
Now, well, let's see what a realistic rain consists from.
1. Depth/Perspective
2. Reflection
3. Collision
1.Depth means that as any 2d game has some illusion of depth, aka perspective, so should the rain have. The rain should consist of some rain layers. The more the merrier. Depends on what we prefer, but two is all right as well.
2. When it's raining certain surfaces become mirror-like and project a reflection. Bearing that in mind you can create a very eye-candy result.
3. Collision the rain shall eventually fall on anything we see. A lamp light, our own characters even. And very importantly on the floor.
RAIN LAYERS:I've made two rain layers and those were the ones I was happy with. One front and one back. I presume there's a version of photoshop, cause it's needed for this.
1.Okay, so create a blank document at your game's resolution size.
2.Using the bucket paint it black.
3.Now click on Filter>Noise>Add Noise
4. Have the following settings: Amount - 400% , Uniform, Monochromatic
5.Click on Filter>Blur>Motion Blur. Set an angle of your choice, and distance around 30-40 pixels, and click on OK.
6.Click on Image>Adjustsments>Levels or if you like CTRL+L, and on input levels set 148 - 1.00 - 255. 148 is what will determine the raindrops.
7.Clip the canvas or re-size the picture to avoid what you see on the bottom and top. The clustering of raindrops. Make sure your image will retain its resolution that will fill the screen of your game.
We're halfway there.
1. Repeat this process creating however NEW documents to create as many frames as you like (4 are enough). That is because the noise pattern must differentiate, otherwise you'll be creating same frames.
2. For each frame do the following:
-Create a layer
-Duplicate the background layer
-Delete the background layer(not the duplicated)
-Place the empty layer under the duplicated background layer.
-Click on the magic wand, and click on something black.
-Press delete.
-Press CTRL+I to invert the raindrops from black to white.
-Delete the empty layer.
-Save as PNG.
3. When you're done that means you have Middle Rain.
4. Now you can Scale those frames by Edit>Transform>Scale, to zoom them and create Front rain.
You can see my results on the rain here.
To finish the drawing part for the tutorial part 1, just create some rain drop falls, something like those sprites. I will even supply the scripting part, so don't worry. :P
