[Tutorial] Cosmetic Fog Layers (Basic)

[Tomo2000 60]

Hey, guys, how's it goin'?

 

Anyway, I'm sure you've seen this tutorial around here and there, or maybe you haven't. Anyway, this is my version of a Cosmetic Fog Layer tutorial. This is also a tutorial you may need to go over if you're reading my Cosmetic Fog Layer (Advanced) tutorial, which is entirely made by me just to show you guys some pretty cool stuff I've discovered while working on Hope Afloat.

 

So, for those who don't know, Cosmetic Fog Layers are a great way to add some serious atmosphere into games. I really love these for Hope Afloat, it just adds this massive gloom over everything... It's pretty great :D But can be used for anything, from zombie horror games to nighttime campfire scenes. Here are a few examples from Hope Afloat;

 

This is the starting room, Kyle's Home, from the new Hope Afloat. A lot has changed..... xD The CFL you see is producing the light coming through the crack in the window. This one was a little hard to make, but, by just drawing what I want and then removing parts where walls and objects are, I think it turned out pretty well.

 

This right here is the first street you step onto. The basic round lights are the CFLs we'll be making in this tutorial today. Note: That thing in the top right corner fades away after a few seconds.

 

This one here was, admitedly, a bit of an experiment. It's a CFL with a colour tone in the background to make the CFL appear fire-like.

 

So, yeah, today I'll be teaching you guys how to make stuff like that. For this tutorial, you'll need;

• Photoshop, or the equivelant
  
• RPG Maker XP (obviously, but I assume this could also be used for VX)
  

Step 1:

So, for the first step, we're going to want to take our map, whatever map we want to CFL, just straight out of the editor with the Print Screen function. So, print screen that to your graphics program, and trim it so that you got it trimmed exactly, with nothing sticking out. For this tutorial, I'll be using one of the maps above. More specifically, Example 3.

 

So, once you crop your map out of the editor, it should look like this:

 

 

You should have all those tiles and your events around it and such. Well, all those don't matter, you just need to know what your map looks like.

 

Step 2:

Open up Photoshop, or your equivelant, and open your tiled image. You're going to want to make a new layer above it, and use the fill tool to make it completely black. That's right, so you can't see anything. Now, with that done, start messing with how dark you want your room by changing the opacity. Usually anywhere between 50% and 85% is good, anything above that is practically unseesable. Now, with this done, grab the eraser and select a circular brush that has a large fade-out, not just the circle brush. This is to give it a nice fade-out effect. You can adjust the size to suit your need, then erase a section, with the centre on the source of the light. You can always much around with this, and make shapes, like in Example 1, but, for this simple tutorial, just a circle.

 

So now, in photoshop, it should look something like this:

 

 

 

Step 3:

This step is incredibly easy. Delete the bottom layer so that the only layer left is your top layer, which makes the light. Now save it, and your should look something like this when viewed outside of photoshop (because of transparencies and such):

 

 

 

 

Step 4:

Okay, so, this is the step where we add it to RPG Maker XP. Import it into the fogs folder, and make a new event, set to Parallel Process. Add the Event Command "Change Map Settings", and under fog, use the following settings for your fog:

 

 

 

 

Test it:

Tah-dah! You're done :D Go ahead and test your new lighting, and if you have any issues you can always PM me. Hope you guys found this tutorial useful. Peace.

~Tomo2000.

Edited September 24, 2012 by Tomo2000

[albertibay 0]

Good thing you posted up a basic version. I was abit lost in the Advanced one. Still Great Tutorial