How-To Rain in AGS (part 2)

2010-08-27T04:36:00.000-07:00

Okay, so we have the frames of the rain and the very nicely raindrops. Concerning the raindrops I gave on the first part, it's wise to have many kinds of them. Apparently a raindrop that appears as it spreads too much is ideal for body collision. Just try and make many sprites and see what fits per each purpose.

Now create 3 GUIS that need to be always shown. Set them all to non-clickable.
Let's assume the GUIs are named like this:

gMRain
gFRain
gCharCol

Now, you need to define their transparency. I go 91, 84, 60. And the Z-Order should be 2,1,0. Depends on your needs though. Those are the presets for the rain.

Now, how to make it work?
1) Get the "module" from here.
2) Import it in your game.
3) Check the script for the comments.
4) All you need is the following code that just works like this:
On:
RainUpdate(true); //placed on a repeatedly execute or rep exec always
and Off:
RainUpdate(false); //just once or constantly (though that's just stupid, but it works)

Rain Drops:
This is a part of the same module, but there's no standard recipe. You have to set it to your needs that's all. Inside the same module you'll find the way on how. All then you need it to work is put this:
(preferably per room) On a repeatedly execute function.
Raindrops();

There are many ways to do reflections with my favorite being just a copy of the room, flipped upside down, and placed on a object with an increased transparency. Same goes for Characters, with the difference that they have to copy each frame,which isn't hard to do at all.

You can easily reach to what follows below in no time.
So go ahead, see the effect here.

And that's the end. Feel free to question me at any time.

How-To Rain in AGS.

2010-08-26T05:14:00.000-07:00

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.

WATCH

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

The Thin Ice

How-To Rain in AGS (part 2)

How-To Rain in AGS.