Welcome Guest ( Log In | Register )

[ Big| Medium| Small] -



Post new topic Reply to topic  [ 60 posts ]  Go to page 1, 2  Next
    Calibre
  Thu Feb 15, 2007 1:47 pm
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
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:#

STEP 3 IMAGE


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 4 IMAGE





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 5 IMAGE






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 6 IMAGE





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





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.

FINAL SCREENSHOT


The Fog Film Layer




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.

_________________
ImageImage

ImageImage


Last edited by Calibre on Mon Apr 02, 2007 4:30 am, edited 1 time in total.

Top Top
Profile      
 

    tiduskeegan
  Thu Feb 15, 2007 8:24 pm
Member

Looks good. I'm gonna try it now ^_^ Thanks~


Top Top
Profile      
 

    Danny
  Thu Feb 15, 2007 8:28 pm
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

_________________
http://seattle.rhinocap.net/images/banners/userbar4.gif[/img]


Top Top
Profile      
 

    Siege
  Fri Feb 16, 2007 12:38 am
User avatar
Member

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! ^_^


Top Top
Profile      
 

    ama55
  Fri Feb 16, 2007 4:23 am
User avatar
Member


Location: Ohio
Is there any way to do this on large maps?

_________________
Image
Image
Image
Image


Top Top
Profile      
 

    ImmuneEntity
  Fri Feb 16, 2007 4:35 am
User avatar
Sponsor


Location: Minnesota, USA
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...


Top Top
Profile      
 

    Calibre
  Fri Feb 16, 2007 4:38 am
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
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.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    ImmuneEntity
  Fri Feb 16, 2007 4:42 am
User avatar
Sponsor


Location: Minnesota, USA
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


Top Top
Profile      
 

    Calibre
  Fri Feb 16, 2007 4:46 am
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
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.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    ImmuneEntity
  Fri Feb 16, 2007 4:49 am
User avatar
Sponsor


Location: Minnesota, USA
Crap, no it's white. I am using GIMP...that could maybe be part of the problem. But it looks just fine when I have the image layer below it...


Top Top
Profile      
 

    Calibre
  Fri Feb 16, 2007 4:55 am
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
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.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    ImmuneEntity
  Fri Feb 16, 2007 5:02 am
User avatar
Sponsor


Location: Minnesota, USA
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.


Top Top
Profile      
 

    Calibre
  Fri Feb 16, 2007 5:04 am
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
Everyone should post the maps they've made so we can discuss on how to improve them etc. Glad you found it useful.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    Petros
  Fri Feb 16, 2007 9:40 pm
User avatar
Sponsor


Location: London, UK
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.

_________________
"There are no original stories... just new ways to tell them..."

Image
www.finalfantasyzero.com

Image
Image


Top Top
Profile      
 

    Jason
  Fri Feb 16, 2007 10:25 pm
User avatar
Awesome Bro

Generic Townsperson
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 !

_________________
This is a block of text that can be added to posts you make. There is a 9999 character limit.


Top Top
Profile      
 

    Calibre
  Sat Feb 17, 2007 1:27 am
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
Hey jbrist, I use the shadows script and I've never even had the brains to do that. Very good point. I feel dense.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    Grandor
  Wed Apr 18, 2007 3:53 am
User avatar
Member

I've always wanted to do this type of lighting. Adds a lot more atmosphere and looks to the game. Thanks.

_________________
http://i29.tinypic.com/29pwa3r.png[/img]


Top Top
Profile      
 

    rataime
  Wed Apr 18, 2007 8:47 pm
User avatar
Sponsor

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.

_________________
On annual visit here.
NEW :  Rataime's Image Save Files Script. More eye candy !


Top Top
Profile      
 

    Grandor
  Wed Apr 18, 2007 9:12 pm
User avatar
Member

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"

_________________
http://i29.tinypic.com/29pwa3r.png[/img]


Top Top
Profile      
 

    rataime
  Wed Apr 18, 2007 9:28 pm
User avatar
Sponsor

You mean my shadow script ? Yes, it kinda works, but doesn't have overlays, and the events must be manually created...

_________________
On annual visit here.
NEW :  Rataime's Image Save Files Script. More eye candy !


Top Top
Profile      
 

    Grandor
  Wed Apr 18, 2007 9:51 pm
User avatar
Member

Yeah, I see your point. Also, it's a pleasure to finally meet the guy who created the infamous shadows script.

_________________
http://i29.tinypic.com/29pwa3r.png[/img]


Top Top
Profile      
 

    PrinceXP
  Sat Apr 28, 2007 9:47 pm
Member

Amazing O.o

Wow

Thanks for this

_________________
http://img337.imageshack.us/img337/9014/princesig22tv1.gif[/IMG]
http://safffah.jeeran.com/rpg_maker_xp.png[/IMG]
No More Sorrows


My heart is still beating ^^


Top Top
Profile      
 

    Calibre
  Sat Apr 28, 2007 10:02 pm
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
It's funny, I look at the example I used and it's kinda sucky! I think I used it for the sake of simplicity in this instance. Thanks for noticing this tutorial though, it fell into the abyss for quite some time! Perhaps that may give me some motivation to build upon the first demonstration and show how to support larger than default maps correctly. Thanks everyone for your appreciation.

@ Rataime,

I understand your idea for a script, but I don't think a script could ever replace the flexibility offered to the user through generating it in a more artistic manner such as this. I never know though, maybe you could produce something stunning! At the moment both the shadow script and reflection script really benefit this method so thanks for that.

_________________
ImageImage

ImageImage


Last edited by Calibre on Sat Apr 28, 2007 10:10 pm, edited 1 time in total.

Top Top
Profile      
 

    Kyoru
  Mon Apr 30, 2007 11:48 am
User avatar
Member


Location: Malaysia
I've been thinkin...Won't the counter's shadow overlay the character instead of being under him?

_________________
Image


Top Top
Profile      
 

    Calibre
  Mon Apr 30, 2007 1:51 pm
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
You are right yes, but the film layer really isn't that dark and with the player moving about you don't really notice it unless you look out for it.

It's kind of a trade off, I think for the overall ambience it creates, a little thing like that isn't really that much of an annoyance, though I warrant your point.

It's up to the creator to decide if its too much of a distraction or not.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    Kyoru
  Wed May 02, 2007 1:01 pm
User avatar
Member


Location: Malaysia
the pros outnumbering the cons eh? I suppose that makes sense.

_________________
Image


Top Top
Profile      
 

    Calibre
  Wed May 02, 2007 1:07 pm
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
Not only that, i'm sure with the combination of the photoshop stuff and a bit of scritping it is easily resulvable, providing you can use photoshop. You could make the overall fog layer, then when your done, cut out all the stuff that should be below the character and leave the rest. Then you could display 2 fog layers - one with the z values above the player and the second layer always being below the player. As you cut out the second layer from the first, as long as you set it to display at the same percentage, you wouldn't have to concern yourself with overlapping.

Would that work? I can't script at all but it seems feasible to me.

_________________
ImageImage

ImageImage


Top Top
Profile      
 

    Omarfr
  Wed Jun 20, 2007 7:18 pm
Member

This is a good tut. I didn't make my as good as yours but it works.

http://img158.imageshack.us/img158/9120/piccyrb6.png[/IMG]

_________________
http://img339.imageshack.us/img339/2059 ... ousqz3.png[/IMG]
The Pernicious


Top Top
Profile      
 

    Reives
  Wed Jun 20, 2007 9:30 pm
User avatar
Sponsor


Location: Canada
Just two suggestions to that map and its lighting, Omar :):
-Soften the eraser's edges a lot, that way you can make it bigger and have a diminishing effect; as if light is being spread realistically.
-The room's too big for a square-shape, with too much unnecesary space.


Top Top
Profile      
 

    Calibre
  Wed Jun 20, 2007 10:10 pm
What are you supposed to write here because I don't know.
User avatar
Sponsor


Location: South of England
Two more bits of advice for that omarfr, firstly, when you are erasing areas, try and deselect the ceiling autotile area so that the map light doesnt flood over it as it has done in the top left of your map.

Secondly, when you set the fog, in this instance reduce the opacity by a fair bit in the event editor because it is far too overwhelming.

_________________
ImageImage

ImageImage


Top Top
Profile      
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 60 posts ]  Go to page 1, 2  Next


Who is online

Users browsing this forum: No users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

We are an independent, not-for-profit game making community.
Homepage
Board Index
About Us
Downloadable Games
Free Browser Games
Games in Development
RPG Maker Support
Game Maker Support
Construct 2 Support
HBGames the eZine
Advanced RPG Maker
Site Announcements
Powered by phpBB © phpBB Group