Fog/Mist

[EvilKris]

Just a quickie for Flash Coders of Wisdom out there.

Does anyone have any good ideas for simulating a 'mist' effect in Flash?

What I have in mind is a layer that contain a large transparent cloud/fog that routinely scrolls across the screen. What's easier on Flash, having one screen-sized transparency-chanelled png? Lots of small spawning pngs? Or making a normal animated gif within a movie and setting the layer at Alpha-50%.

What do you think would be the most processor efficient method? Or is there another way I haven't discovered yet, perhaps using bitmapData filters?

[mentuat]

grant skinner has an attractive example of fog and mist here with a basic description of methods used:

http://incomplet.gskinner.com/index2.html#clouds

[marmotte]

wow, that looks great!

I had an example like that too: i produced a fog thanks to photoshop, and used 3 layers of that image (using alpha) scrolling at a different speed (horizontally, the demo was for a side view), and i think it worked quite well... i'm not sure about the performances though, and today with flash 8 you can even add some blurs here and there).

are you working on a Silent Hill flash game, maybe? heh heh.

[EvilKris]

are you working on a Silent Hill flash game, maybe? heh heh.

I'll show you what I mean below.
As you can see, the background looks fine, but if you saw the thing in motion, you would notice that it seems as if the demon guy is walking on a cloud.

I'll fiddle around with the perlin noise/alpha maps idea, and see which one runs better. Thanks for your replies, and keep 'em coming. Any links would be highly appreciated!

[lesli_felix]

It depends whether you want it to animate, without animation, just scrolling, then use whatever format you like (probably png) and embed it a movieclip then set bitmapCaching to true. It'll be fast as you like.

For animation, there are hundreds of solutions, though I'd first be tempted to play around with multiple movieclips embedded in a parent, with a blur applied to the entire thing. Check out the clouds in this example, it would be really easy to animate them!
http://justin.everett-church.com/Flash8/thrust2.html

Another method would be copying clips to a bitmap data object and then transforming it with a blur or fade like this: http://codycodingcowboy.cahlan.com/post/BlurFade.htm
Not a mist effect but the principle is the same.

[crashlanding]

I created a game which from that picture looks similar to what you're making. I tinted all the sprites white and added a white to transparent gradient over the background.

The 'final' (e.g. as final as I can be bothered with) game is: http://livescripts.net/flash/downloads/swfs/thelights/

[marmotte]

if you saw the thing in motion, you would notice that it seems as if the demon guy is walking on a cloud.

Ha, something you should do then is to dynamically change its coloring: when he's in the background, he's totally gray (same color than your bg in fact), and the more he's close to you, the more he displays his "real" colors... also play a bit with the alpha...
it might be totally great, you'll see some weird shapes in the background and will not be sure if it's a monster or not unless he comes closer, and imagine some random monster noises, you are SURE that one of them is hiding in the fog, but never show up... (ok, i should stop playing SH)

also if you put an extra foggy layer above everything, it will defenitely look better i think.

[EvilKris]

That The Lights game is almost what I'm talking about. I'll have a crack with that technique.

Ha, something you should do then is to dynamically change its coloring: when he's in the background, he's totally gray (same color than your bg in fact), and the more he's close to you, the more he displays his "real" colors... also play a bit with the alpha...

By sheer coincidence, that is pretty much what I did for the second level of this game I've been making.

Here check it out. Full of bugs, runs too slow. Needs work. But you can see the alpha-effect in the works.

HERE

p.s.Preloader is in the menu.swf so just wait. SPACE reload. Chainsaw is his weak point (one of them).

[EvilKris]

I've been fiddling around with it all night now (the game ).

Here

Here's a peek at it so far. Looks OK I suppose, especially in conjunction with the alpha trees and the like. Sorry it's the raw swf so it's not set in the proper dimensions.
I still can't find a quick fog method, but I'll try again tomorrow. I love Flash, but it just can't seem to handle anything other than quite primitive games.


Oh Boss comes on at 1000. All he does is run towards you.
Thanks for your tips so far guys.

[marmotte]

not that bad ^_^ It will be better with a smooth gray transition though (regarding your trees for example), but i know it's a WIP...

about the fog i'm not sure, maybe having 3 fog layers zooming at you, when the front layer is almost in front of your eyes, fade it out and create a new one behind the other layers... and repeat, repeat, repeat... it might slow down the game though... or just have a fog movie (or animated gif) that is able to loop... many interesting things to try

(that chainsaw massacre guy was terrifying!!)