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.
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.
