Fooflexible's Cosmetic fog tutorial

[lost miracle]

[quote name='fooflexible' date='Jan 26 2006, 03:59 PM' post='73314']
Fooflex's Unlocking the POWER OF FOG!!! Tutorial.


CAN SUPPORT OVERSIZED MAPS!!!
I know this was the biggest complaint about cosmetic fogs and many said it couldn't be done on oversized maps but below in Ragura's post he shows a very easy way to do it, and it works perfectly. In fact to get the most of the fogs check out this demo. It shows an oversized map with a few fogs from a thematic one to an intstruction type fog and an indoor fog that loops more then one fog to illustrate the flicker of shadows from a fire place. So check it out and post your thoughts and questions. enjoy!!!

Demo Link: Fooflex's Fog Demo on savefile.com



I think it was Slipknot a few weeks ago talked about using fog layer for some inovative concepts, and I was at the time thinking up some of the same things. So now I wanted to share these concepts with you! Now I won't be discussing the traditinal intended use for fogs, fogs were meant to add atmosphere they could move around and add a form of weathered look. But the use I'll be discussing I refer to as a cosmetic fog(not intended for motion). For example makeup is applied to enhance a look, and that's exactly what fogs can do, they can make it dark, make things glow add realistic shadows, make it look like lights are on, and plenty more. In fact I'll let pictures speak for themselves::

here is a nice castle room:
::::
http://www.dubealex.com/asylum/index.php?act=Attach&type=post&id=1924

Now here's that same room with a cosmetic fog layer(created in photoshop!(I'll explain later))
http://www.dubealex.com/asylum/index.php?act=Attach&type=post&id=1925



here is the same home with the cosmetic fog:
http://www.dubealex.com/asylum/index.php?act=Attach&type=post&id=1927


here' s the sea port with a cosmet fog to simulate night time.:
http://www.dubealex.com/asylum/index.php?act=Attach&type=post&id=1929

Just to clarify the fog layer is created in photoshop but the shot your looking at have all been captured in-game. To create this type of effect you can use photoshop/coreldraw or simply any photo software that allows you to create layers. layers are like virtually placeing a transparent film on your picture and then painting over it so the different layers can be manipulated seperatly.

Now lets get to the tutorial. One nifty concept that can be employed would be to create a fog that would simulate a room in the dark and have it linked to an event that could be a light switch, allowing the gamer to turn lights on and off within a house(or lighting the fireplace, you can use your imagination.)The first is to create your screen fully then load up your game, when your have the screen loaded that you want to create a cosmetic fog for, press the PRINT SCREEN BUTTON on your keyboard, now load up your photo software.

I'll be describing the process used in Photoshop being that's what I have, I'm sure it's similiar in other software, if you have questions or problems let me know, otherwise if you don't have photo software with layers, there is another way of doing this, but you'll have to request that info it's too long to explain.

Now if you hit File and New, a blank window will appear in photoshop, and select PASTE off the IMAGE menu your print screen will now show of course everything open on your terminal will come up so you have to carefully create a SELECTION BOX over your game window(try to get as close to the edges as possible as this will effect how well the fog layer sits on your other layers later on) after selecting your game window, select CROP off the IMAGE menu, you should now only see your game window.

Now click on your layer menu and select NEW LAYER. Now on the bottom right(it's usually where it is) you have a tool menu with a layer tab. Make sure you're on the new blank layer. Now you can paint on this layer, you can select the paint brush, set the mode to Darken and set your color to black change your opacity to 80% and paint a dark film over your entire screen(that's what I did in the above night port shot) This create a dark fog for the page, now if you select the eraser tool and change the opacity, and make sure that your brush is a soft edge brush you can erase the darkness from the lights(as if the lights were lighting up the area) then you can use the paint brush again to paint in a yellow glow on the lights. I encourage all to experiment allot.

REMEMBER what you see is what you get the new layer your painting on will be the fog layer planted on the screen in your game, since you have that screen loaded up behind this fog layer your actually looking at the final product, so make it the exact way you want it. When your finished go to the Layer tab I mentioned earlier right click the layer with the game shot and delete that layer, also delete the white background that photoshop most likely created, you should only have one layer, the fog layer! When done save it as a .png file.

Back in RPG MAKER XP go to your material base add the fog layer and create a Parell process event that automatically shows the fog layer, when you select to show a fog layer remember to set the zoom to 100( the default is 200) and set the opacity to 255. Now when you play the game you'll see your fog layer the exact way it was in photoshop!!! Enjoy!!!

post any questions.
[/quote]
This guide i found excellent! I did a search here first, and looked over the boards to see if it was here. It wasn't so i decided to share it from creation asylum ^_^

 

[Despain v.1]

To tell the truth, these kinds of effects look terrible and tend to be used as a way to distract from a game's terrible story or gameplay.

 

[Scribblette]

Serenade mentioned elsewhere that he doesn't like most overlays and such effects, so he just might be biased against them... ^_^

Me, personally, I'm all for such touches adding to the atmosphere of a game. If you want a day/night cycle, well, then all the better. A lot of fancier looking games using hand drawn art use such effects with pictures and may find doing it through a fog very useful.

I personally wouldn't use a fog because of the amount of work involved doing one for each room and whatnot. I'd rather make character sets for lights and windows instead (and so I have been). They animate better.

The advantage with fogs would be you wouldn't need to tint the screen of course, so you don't lose color value by walking into the light and all. That in itself is lovely, as opposed to trying to break through a screen tint with pictures.

Also, my concern with fogs is that some machines that play games that use them (notably a friend who tried out MOTW Arc I) find that they lag their PC. *shrug* At least he called it the fog, maybe it was something else.

 

[Prexus]

I think it adds a nice bit of atmosphere but its very structured and not as dynamic as using events and such to draw the lights.

 

[Andy6000]

It can be used to basically the same effect, though the only problem I see is that this only works for maps that fit onto the screen, what about scrolling maps?

 

[lost miracle]

I liked it because of the feel it gave maps.
As he said, once you get the hang of it, it only takes 5+ minutes to make one for a average 30x30 map. (10 for me, i got lots of lag with PS)

But i think this adds a bit of depth to it, though it doesn't look excellent, it is a neat feel with outter town maps.

 

[Alastyr]

So long as you don't sacrifice the story and gameplay, I'm fine with these effects. In fact, I think they look quite nice.

 

[ryanwh]

events are better for drawing light because then they can animate.
I mean, it looks alright but imo the effort outweighs the end effect because its not versatile at all--you basically have to do a new one for every room.

 

[lost miracle]

Drawing lighting effects with events?
As in how?

 

[Alastyr]

Using a character of a glow. You place it over light sources to make it look like it's glowing..

Check the first row of '185-Light02' for a basic glow. You can also use battle animations for better effects.. but it lags.. badly..so don't unless the maps are small.

 

[Chronic]

Some of those lightning effects looked wierd, but i actually liked that room lighting.

 

[Sailor Taurus]

But how exactly do you "animate" these atmospheric lights. I've seen Scribblette's characterset example (at least, I THINK it was Scribblette), and the light did look quite animated, but what DO you animate? Dust? Transparencies? How exactly would you animate light for charactersets?

 

[Scribblette]

I think you're talking about this one - one of my early attempts at spriting, but good enough to work as a placeholder until I came up with something better, and the size I required.

http://i19.photobucket.com/albums/b170/ ... window.gif[/IMG]

This example is at maximum fullness/opacity in a dark room, to show it in full, though it's not a setting you'd usually use unless you were in a dark room with very bright light falling through, probably. To pick the color I just used the reverse of the tint of the room (a dark green) and set it to add when placed in game.

First I designed the outer most layer, the initial 'scattering' of light into the room. That itself does not animate, but serves as a transition between the main beam and the room. Then there's a primary beam of light around the animated part, falling from the window. I did that itself over a couple of layers to get the brightness how I wanted it to be.

When you see light falling through a window, usually what you see animated is the dust, and light breaking through in spots. So I took the beam of light and using a paintbrush tool with soft edges, broke it up, made it into a 16x16 tile, then I moved it down and to the right by 4 pixels for each step to get the flow right. I think it still needs work, but for now it's good enough, and for me it's better than the average 'circle of light' which is just expanded and retracted (and what is usually used).

I could have just had the entire thing 'flow' so there were no obvious transitions, but then the effect is rather different to the 'moonbeams/sunbeams' - and if the opacity is lowered, it blends together a lot more like that and works well.

 

[Degree]

Nice idea. I think it looks great.

 

[Casker]

Here's my re-version of the first lighted room, I wanted to do that with more realistic lights, because the "lost miracle" version have the lights too many exaggerated. Well, here's the comparison image, and the animation to see the evolution of the map with my "Photoshop" manipulation, I hope that you like it ^^

Comparison Image:

http://img475.imageshack.us/img475/8237/editwd4.png[/IMG]

Animated:

http://img201.imageshack.us/img201/7010 ... lorhu9.gif[/IMG]

Bye's!

P.D: Sorry for my bad english, I'm Spanish. I'm Sandor with a new nickname, if you remember, I'm one of the creators of Chara Maker XP & Chara Editor XP, and the administrator of the official web page :3

 

[ScriptKitty]

Casker, that looks very nice! Definately something for folks to look at if they doubted cosmetic fogs before.

 

[CERU]

I guess I couldn't use these sort of lighting effects all that much for large areas.

 

[Casker]

I must say that you can use that for estensive areas, "Las Aventuras de Pepe" use a similar system to do that with large areas, and that works fine. Use your imagination to do an effective system to implement that effect

bye'2

P.D: Thx ScriptKitty ; D

 

[Shifter]

My original project (started..what a Year back?) has cosmetic fogs just like this..I love em

 

[Pega]

Ya I liked the effect of it, but it does seem like to much work for me.