dcsimg
A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Fog/Mist

  1. #1
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796

    Fog/Mist

    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?

  2. #2
    ********* mentuat's Avatar
    Join Date
    Mar 2002
    Location
    out of office
    Posts
    718
    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

  3. #3
    DOT-INVADER marmotte's Avatar
    Join Date
    May 2002
    Location
    Dot-Switzerland
    Posts
    2,601
    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.

  4. #4
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796
    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!
    Last edited by EvilKris; 08-25-2007 at 03:33 AM.

  5. #5
    ....he's amazing!!! lesli_felix's Avatar
    Join Date
    Nov 2000
    Location
    London UK
    Posts
    1,507
    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.

  6. #6
    Flash hates me. crashlanding's Avatar
    Join Date
    Nov 2003
    Location
    UK
    Posts
    439
    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/
    "wen i found my gerbil dead my other gerbil was eating it i just cried and screamed"
    http://www.livescripts.net

    --------------------------------------------------------------------------------
    Last edited by some moderator : Today at 9:01 PM.

  7. #7
    DOT-INVADER marmotte's Avatar
    Join Date
    May 2002
    Location
    Dot-Switzerland
    Posts
    2,601
    Quote Originally Posted by EvilKris
    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.

  8. #8
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796
    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).

  9. #9
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796
    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.

  10. #10
    DOT-INVADER marmotte's Avatar
    Join Date
    May 2002
    Location
    Dot-Switzerland
    Posts
    2,601
    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!!)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center