Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Calibre's Cosmetic Lighting Tutorial

Calibre's Cosmetic Lighting Tutorial

Note: I am aware there is an existing cosmetic fog tutorial created by Fooflex, and I have up until now been directing people to it. However, many people have Pm'ed asking how I create the lighting for my project and that they cannot follow the existing tutorial at all. Therefore I have created my own. It is a comprehensive step-by-step to making the most basic level Cosmetic lighting. Please do not keep posting saying that there are easier methods and shortcuts for things, I've made this to hopefully be fool-proof.




STEP 1: WHAT DO I NEED BEFORE I GET STARTED

- A map to work on

- A photo manipulation program (Photoshop for this demonstration)

- An idea of what sort of light you want




STEP 2: CAPTURING THE IMAGE

Okay, now for the first example we will be working with a standard default sized rmxp map,20 x 15. This requires a fog that is 640 x 480 pixels, the same size as an rmxp screenshot. I'm assuming you have already created your map and know what form of light you want.

Test play the game in full screen on the map that you want the dynamic light to appear on, remember for this example it must be a default sized map. Press the Print Screen button on your keyboard down, on my keyboard that us located to the right of F12. Hold it for a second or two and release.
Wait a few more seconds to allow that to register and quit the game.




STEP 3: PASTING IT INTO PHOTO MANIPUALTION SOFTWARE

[From hereon, instructions apply to photoshop CS, I cannot account for any differences in other programs]

1. Open up your photo-editing software.

2. File > New

3. It should say a size of 640 x 480, click OK (Go to 8)

4. If it doesn't, but does have a resolution size then still click ok, we'll just need to crop the image.

5. Press paste and you should just see your screenshot.

6. If you see a screenshot with any kind of border do the following:

7. Select the marquee tool, thats the top left tool. Drag it from the top left corner to the bottom right corner of your screenshot. Copy that, then File > New, make sure it is now 640 x 480, click OK and paste into that.

8. Now we should have something that looks like this:#


As you can see, I've already added a slight tint screen to mine to give it a more bright and cheerful feel. This will compliment the dynamic lighting that is to be added. Do the same if your map is either cool, dark, or any other visible mood in colour.




STEP 4: ADDING THE COSMETIC FOG LAYER

1. Make sure you can see your layers tab, if you can't go to Window > Workspace > Reset Pallette Locations

2. On the layers tab, add a new layer by clciking the folded paper icon.

3. Click in the top left colour box that is on your toolbar

4. Select the darkest black by entering the number "0" into the R, G and B fields.

5. Now select the paint bucket tool, if you cannot see it, hold down the left clicker on the gradient tool next to the eraser and select it that way.

5. Fill the new layer with the black. The whole image should be solid black now for the time being.

6. Back on the layers tab, we need to set the blend mode to darken. Pull down the menu that says normal and select darken. Next to that, lower the opacity to whatever you see fit to. Remember though, the image you can see as you decrease the opacity is exctly the same as it will appear in the game.

So now we effectively have a new dark film layer that will be the new fog, now we need to start taking away from it to leave the light there.





STEP 5: CREATING THE COSMETIC LIGHTING

1. Select the eraser tool from the toolbar.

2. As it stands, you are likely using a hard edged brush, that can sometimes be useful, but more often than not we need a faded brush. In the top panel, select the pulldown menu where it says brush and select a faded brush. Place hardness to 0% and select a pixel size of around 90, but this can vary greatly depending on your desired lighting.

3. Place the top of the circular brush just a little below the top of the window. This ensures that light only travels across the room and not up to the ceiling. Click the left click down to begin erasing our black film. Click it down in the same spot around 5 times to see what you get. This is the most basic lighting you can get for a window.

Now we have made a dynamic fog layer. But this type of window works best for darker rooms on darker days, I want bright sunlight coming through the window. If you want to leave your lighting like this, skip to STEP 8






STEP 6: ADVANCED LIGHTING METHODS

[Note: For beginners, this bit can be pretty tricky]

1. Delete that film and reinsert a new black one as before. Alternatively, hold down CTRL + ALT and keep pressing Z to go backwards in history, effectively undoing the old light.

2. Now the tricky part and the decision making bit. We need to seperate all the areas that are prone to light hitting them, with all the areas that won't be affected by this ray of light. We do this by using the marquee tool and the magic wand tool.

3. First, select the layer with the screenshot on it rather than the black film, this is so we can select various parts of the screenshot itself. Choose the magic wand tool from the toolbar, it's diagonally down from the marquee tool. Click the black of the ceiling and the whole black area should beocme selected.

4. Okay, now we have seperated the ceiling we need to select other area's, in my example, the stairwell could not have any of the window light flood into it. So I will also select that. I do this by now selecting the marquee tool.

5. Hold down the SHIFT key and you will see that a "+" Symbol is shown by the cursor, this means whatever you selct now will be added to the selection. Highlight the desried area whilst still holding the SHIFT key and release. The selection will have grown.

6. Repeat this process until all the areas that the desired light can't get to have been selected. Now we need to go up to the top panel and go SELECT > INVERT.

7. Now you have the area selected, remember to click back to your film layer so your not simply deleting the screenshot.

8. This means we can erase everything within the selcted area, but not the area outside of it, just what we want.

9. Repeat the erasing process from earlier, being steady and taking your time.

Now we should have a screen that looks something like this. Once again we could finish it here, if so skip to Step 8, otherwise follow onto the next Step to touch the map up.





STEP 7: FINAL TOUCHING UP

1. This time select the paintbrush tool, the dark black should still be selected, if not choose it now. Select a faded edge.

2. Leave the area highlighted so we are still working within it, if you have clicked off it, CTRL + ALT + Z until you get back to that stage.

3. Now we can paint area's that have we have taken away back on, to add shadows to individual objects and so forth.

4. I've made quick little patches for the left side tree and table with a statue on.

5. Now I'm going to deselect all the areas to see my result. Hmmm, something is still amiss. That counter would leave a large shadow below it. The counter is nice and square, so I'm going to highlight the area beneath it with the marquee tool then paint the black film deeply baack within it. I should get this:





STEP 8: ADDING IT TO THE GAME


1. Select all the layers below the film layer we have been working on and delete them with the trash can icon in the layers tab.

2. FILE > SAVE AS > A .PNG FILE (This is crucial)

3. Open RMXP and your project, add the film image as a fog (note: 20 x 15 rooms can also be added as pictures)

4. Place it on the map using a parallel process as 255 opacity, 100% zoom, and normal blend.

5. That's it! Test play and admire your work.





All feedback is welcome, let me know what you think of it, and remember, a cosmetic lighting does not make a good game nor map on it's own! This has just been example of a bog standard and untidy fog, experiment for all sorts of final effects.
 

Danny

Sponsor

One of the best tutorials I've seen. You've show a great way to add a nice lighting effect to our maps. It's amazing :D
 
I agree with Hydrolic. This is a great tut Calibre, it was really helpful and i will definatly incorporate this in my game.

Thanks Alot! ^_^
 
So there's no way to do this without altering the color tone of everything around the light source? Maybe I'm doing it wrong, but everything is a lot lighter when I put the fog in.

EDIT: Yeah, I must be doing something wrong, because it's supposed to look exactly like it does when you're editing it...
 
It should look exactly the same in photoshop as it does in rmxp, unless you have a screen tone effect. Care to explain what you mean a little better or a screenshot?

@ ama55 Yes there is, but this was the first tutorial for new people to it. I am going to expand it in time. Check fooflex's tutorial to get a rough summary of how to do that.
 
Well first of all I had to change my opacity to 255 like in the directions, but all I see is the actual fog layer...there's no transparency whatsoever...what am I doing wrong? lol
 
Are you definately saving your final file as a .png file. In photoshop, if your opacity for the fog layer is down to around 50%, and you delete everything behind it, you should be able to see a checkered background show through the fog. This means its definately transparent. When you import it into rmxp, if it asks for you to set a transparent colour, insert it into your project instead by putting the image straight in your fogs folder.

BTW, what image editor are you using and what version.

EDIT: If that still doesnt work, post a screenshot of what it looks like i game and the fog layer itslef and ill see if I can fix it for you.
 
Well for now post the images and I'll try and see if its fixable my end. Then tomorrow I'll download gimp and see what the differences are. Remember that I did state this tutorial was run through photoshop CS though.
 
Sorry, I figured it out. It was automatically putting a white background layer, which I forgot about. So I removed that and it works fine now. Nice tutorial.
 
I think that this'll be really handy to help me create certain tones in my game once I get Adobe After Effects later this month. I've always felt a good fog can make the world of difference to a map and it's good to know how the pro does it.
 

Jason

Awesome Bro

This looks amazing if you use the Reflections and Shadow script, you make the light source be the window, and it looks SO cool !. Nice work !
 
Must...resist...urge to create a script to automate that ><

That would be cool, still. You tell it what tile is a window, and it generates the first time the overlays and the dynamic shadow sources.

Tempting.
 
Their is a script that already does that. It's in Near Fantasticas Test Bed. I forget the name. But I think it's something like "Advanced Lighting"
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top