Module: FOG v1.00 - Create FOG in your AGS games!

[Dualnames]

Ever wondered how to handle and create FOG in an AGS game?

Authors: Dualnames and Ryan Timothy
AGS Dependencies: AGS 2.72 and Later!

Here's the answer to your question. The Fog Module. Mostly scripted by Ryan Timothy.

• Download Fog Module Version 1.00 + Template Files
  

And Video Demonstration

[markbilly]

I could do with something like this too, but I'm no scripter...

[Ryan Timothy B]

If I were to make it, I'd more than likely use a GUI.  It seems like the most reasonable approach.

[Calin Leafshade]

I think it would be nice to use a series of objects which were each wispy elements of fog. You could move them across the screen slowly infront of and behind the player.

You could even parallax them.

[monkey0506]

Well seeing as graphical overlays don't support partial transparency (alpha channels) you would have 5 options:

1. Use a GUI. Possibly slow for a full-screen effect.
2. Use objects. Could be slow, probably not as impacting as a full-screen GUI, and more versatile.
3. Apply the fog only to the background. This would look silly as all the characters and objects in the room would be drawn on top of the fog.
4. Use an overlay after all, using a screenshot as the base of the drawing. This would probably be slightly slower than using a GUI because you have the additional step of capturing a screenshot every loop. It would also look silly to have the fog drawn on top of the mouse cursor.
5. Again, use an overlay, but rebuild the entire screen to avoid the cursor being behind the effect. This would definitely be slower than using a GUI because you have to manually redraw the entire screen from scratch. Also there's currently no way for this method to support walkbehind areas so that could look silly too if the effect could be turned on and off dynamically.

So the best two options are either objects (as Calin said) or a GUI (like you've already thought about). I've never actually conducted a speed test against two such methods myself, but I imagine objects would probably be slightly faster than a full-screen GUI. Also as Calin says, that provides for a much more versatile effect.

One question though...is there a reason people hate indenting their code? Even if it's pseudo-code...this is still a big peeve of mine. Ah well... :

[Dualnames]

1. Use a GUI. Possibly slow for a full-screen effect.

Okay, granted.

One question though...is there a reason people hate indenting their code? Even if it's pseudo-code...this is still a big peeve of mine. Ah well... :

Nope, not at all.

Why do people do this other annoying thing with brackets?

Code: ags

function room_Load() 
{

}

So how to do it now? How do you draw fog? Any ideas? (This probably means it should go to the Critics Lounge)

[monkey0506]

Okay. As for the brackets that's a matter of preference and is one common style. I just prefer people to pick one and use it consistently instead of not using one at all or mixing it up.

You've changed the title of the thread but haven't changed your question at all...You've mentioned using a DrawingSurface but there is a problem with that which is that DrawingSurface.DrawImage makes use of alpha channels in images, but does not copy the alpha channel. Practically this means that if you draw a sprite with an alpha channel onto a blank sprite (cleared out to COLOR_TRANSPARENT) then the resulting sprite will actually appear flattened against a magenta (RGB 255, 0, 255) background. IIRC even using the transparency setting of DrawImage will produce the same effect as no alpha channel is created by the function.

So unless your fog effect is using entirely solid colored pixels (no partial transparency) then a DrawingSurface wouldn't work for you. You could use solid colored pixels and then use GUI.Transparency or Object.Transparency but if you understand alpha channels then you understand that for such an effect as this having varying levels of transparency would be much preferable.

To sum it up, you most likely would not want to use a DrawingSurface for this type of effect (unless using options 3, 4, or 5 as described above, none of which I would recommend over options 1 or 2).

[Dualnames]

Okay, so technical sector solved. On to the drawing!

[Jim Reed]

Some Dutch painters when painting ships, used a fog effect for producing depth.

This could be apllied to this problem also.
Basically, fade everything in the distance progressively more white (if the fog is white). For characters, use .y coordinate to tint them more white as they go to the distance, draw the background elements that are more distant more faded, and add some objects to represent particular wisps of fog, making them fully white and adjusting their transparency to less transparent the further they are.

[Dualnames]

Some Dutch painters when painting ships, used a fog effect for producing depth.

This could be applied to this problem also.
Basically, fade everything in the distance progressively more white (if the fog is white). For characters, use .y coordinate to tint them more white as they go to the distance, draw the background elements that are more distant more faded, and add some objects to represent particular wisps of fog, making them fully white and adjusting their transparency to less transparent the further they are.

And we back to basics, how in the name of god, do you draw fog? Images would really help, because I can't.

[Ryan Timothy B]

Pretty much just a top-down gradient at different depths could work.

http://anordinarymom.files.wordpress.com/2009/01/fog.jpg

[Jim Reed]

Well, the only things you need to draw using this method would be individual clouds of fog.
A nice way to draw it...hm...well, you could draw floor clinging, long, horizontal "clouds" of purelly white, and then make them transparent, according to the before-mentioned method. They should slowly move to one side, pushed by a breeze. Note that strong winds dissipate fog, so make that movement pretty slow.
Fog as you probably know, is just water vapour (just like clouds). If rain falls on a hot day, it would turn into steam (which is warmer than air), and go up. If it gets cold (night falls) the steam cools off and drops to the ground. That's when you get fog. Also, fog is present around marshes, because there is much water there to be turned into steam.

If this doesn't help, try googling marsh/swamp for some reference pictures.

[Jim Reed]

Pretty much just a top-down gradient at different depths could work.

http://anordinarymom.files.wordpress.com/2009/01/fog.jpg

I doubt it. Foreground elements should show more, not the ones near the bottom.  In this pic, the gradient shows mostly because of the perspective, but check the tree on the left; it's upper part shows normal, emphasizing my point.

[Dualnames]

Well, the only things you need to draw using this method would be individual clouds of fog.
A nice way to draw it...hm...well, you could draw floor clinging, long, horizontal "clouds" of purelly white, and then make them transparent, according to the before-mentioned method. They should slowly move to one side, pushed by a breeze. Note that strong winds dissipate fog, so make that movement pretty slow.
Fog as you probably know, is just water vapour (just like clouds). If rain falls on a hot day, it would turn into steam (which is warmer than air), and go up. If it gets cold (night falls) the steam cools off and drops to the ground. That's when you get fog. Also, fog is present around marshes, because there is much water there to be turned into steam.

If this doesn't help, try googling marsh/swamp for some reference pictures.

I want to find a reference image that can be used in a video game, or can be easily replicated, but I find this impossible. Aynone have any ideas? I tried doing some clouds, but that's the result I came up on the already version of the game.

[Jim Reed]

Go near a river at daybreak and bring a camera. =)

EDIT: Also, show us what you got, maybe I could make you a room and export it? I still owe you for thoose songs 

[Dualnames]

Go near a river at daybreak and bring a camera. =)

EDIT: Also, show us what you got, maybe I could make you a room and export it? I still owe you for thoose songs  

It sucks badly so I keep avoiding the chance to share it publicly.

[Ryan Timothy B]

Pretty much just a top-down gradient at different depths could work.

http://anordinarymom.files.wordpress.com/2009/01/fog.jpg

I doubt it. Foreground elements should show more, not the ones near the bottom.  In this pic, the gradient shows mostly because of the perspective, but check the tree on the left; it's upper part shows normal, emphasizing my point.

Dude, I said layers depending on depth.  Heavy at the top, less at the bottom.  Very light transparency, and with all the layers on top of each other, it would look just like the image I showed.

And when do you see fog moving around like a cloud?  The only time you really see it is if you're driving down the road with your car lights aiming directly at it.  And it still barely moves.

Needing to animate fog, or having 'cloud shaped' fog would be almost dreamy or fairytale.  Don't get me wrong though, you can still have an 'animated' effect with the fog, just very very very faint.

Better yet, I'll do a quick mock up with 3 layers of fog and some tree silhouettes (which can easily be done in AGS with characters/objects).



Edit: Here you go.  Took me only a few minutes to make it, and it looks very similar to the example I had shown.  (obviously if this were my project I would have spent a little longer than a few minutes):
http://www.bryvis.com/entertainment/other/agsf/fog_dualnames.png

And this is the before image of the sunny day with the path:
http://upload.wikimedia.org/wikipedia/commons/3/34/God%27s_Path_is_Higher_than_Men%27s_Path.jpg

I only used 3 layers of gradient fog, and 3 layers of trees.  If a character were to walk through this, they'd slightly 'flash' to the other color, I imagine.  It would require some testing.  But yes, the characters contrast should be lowered the further back they get.

[Shane 'ProgZmax' Stevens]

My advice on drawing the fog would be to keep it simple.  Take four colors from the grays (light gray, mid gray, gray, dark gray) and draw a fog bank in each of those colors.  The sprite can be identical, the point is to have a few of them (like the Castlevania IV intro) to work with.  Draw them sort of like wispy torn clothing at the sides and then write up a function that takes four objects (characters would work even better and could be easily switched to a new room) and slides them across the screen at different speeds in a looping fashion (brightest fog sprite to darkest).  With 40-60% transparency on and the fog sprites overlapping you should see nice results without having to break your head.  I actually used an approach somewhat like this for Mind's Eye, though the images were much much bigger.  Obviously you could extend this to have as much fog as you like, though at some point you'll notice a performance loss.

[Dualnames]

My advice on drawing the fog would be to keep it simple.  Take four colors from the grays (light gray, mid gray, gray, dark gray) and draw a fog bank in each of those colors.  The sprite can be identical, the point is to have a few of them (like the Castlevania IV intro) to work with.  Draw them sort of like wispy torn clothing at the sides and then write up a function that takes four objects (characters would work even better and could be easily switched to a new room) and slides them across the screen at different speeds in a looping fashion (brightest fog sprite to darkest).  With 40-60% transparency on and the fog sprites overlapping you should see nice results without having to break your head.  I actually used an approach somewhat like this for Mind's Eye, though the images were much much bigger.  Obviously you could extend this to have as much fog as you like, though at some point you'll notice a performance loss.

This came really handy. So what comes up is should I build this into a GUI, and have each "fog" object inherit the transparency property from the GUI, or should every "fog" object have an individual transparency?

[Jim Reed]

Sorry Ryan Thimothy, as Al Yankowitc (sp) would say: "Close, but no cigar" 

It looks pretty nice, but things in the fog go more white according to depth, not height. Your tree (on the left) appears more white nearer the top than bottom. Mathematically, that's not correct. I see that you managed the depth issue correctly, but the gradient isn't correct.

Hmm...actually, according to perspective, it should be more white on the top (the top is farther away from the viewers eyes than the trunk), but more in line of a ~2% difference.

Now I have to nail you to a burning cross, because you disagree with me.