graphics Create Lighting Effects without Scripts

[Capt_Elfimis 55]

This is my first VX Ace tutorial which simply came into fruition by not already existing and the frustrations I went through myself going over other tutorials which while not bad, were just simply lacking in information for what myself and many others wish to achieve: Simple Lighting Effects like the ones shown below .

-without the use of Scripts

-how to make them

-how to implement them.

 

Now, there is already a  decent bit of documentation on simple things like this but again, it's spread out in bits in pieces across the web so I've created my own tutorial that shows the entire process from start to finish with added tweaks, tips, lighting practices, and methods to get the most out of simplicity (sound complicated lol. It's 1a.m. ....i've had a lot of coffee).

Step 1:
Creating the images to be used for your lights. You will need an image editing software such as Photoshop or Gimp (I prefer Photoshop so this tutorial will be using Photoshop images/hotkeys but just apply the same methods in a different program and you should get the same results).

In Photoshop create a new document (ctrl + N) set the Width to 333 pixels and the Height to 484 px. Next go to the View drop down menu and choose Rulers. Drag rulers onto your document from the Top and Left side rulers to set up a template like this:

 

Each square section will be a Light Radius, the number of segments (from Left to Right) will determine the complexity of flickering light effects (Candles, Lamps, Torches, etc.) but i'll get into that a little further down. Duplicate your base layer 2x (ctrl+j), Select the 2nd layer, get your Paint Bucket Tool and make the background of Layer 2 Black, this will provide a contrast for your to work with so you can visually see the fall off radius of your lights. 

Step 2:
Select the Elliptical Marquee tool and make a selection (holding Shift keeps the marquee uniform) of a single square on your template. Select the Gradient Tool, Set the type to Radial Gradient, and make it's fill type "Foreground to Transparent". Set your Foreground color to whatever color you would like your light to be then inside your Marquee Selection place your cursor in the center of the circle (sometimes slightly above), hold shift and left click + drag down slightly outside the bottom of the circle, this will fill it with the Gradient. At this point you should have something like this:

 

While you technically could stop here (without the black background of course, needs to be transparent) and have a semi decent looking light, Lighting is such a beautiful and critical aspect of a game and it can completely change the mood, tone, atmosphere and many other factors of a scene so we are going to polish this up. 

Step 4:

Next, Select your Filters drop down menu, Blur, Gaussian Blur and set the px from about 6-10px. MAKE SURE YOUR MARQUEE IS STILL THERE WHEN YOU DO THIS. If it's not and you blur the light, the color may run to the edges of the image which will cause your lights to appear square and not circular.

Note: The more blur, the softer the light. Try not to go crazy with blur in your image editor as there are easy ways to tweak the softness of the light in RPG Maker, but for arguments sake,
More Blur = Softer Light.

That's it as far as a static light goes that will not flicker or animate. 

Animated Lights/Flickering Effect:

This is really just a couple more steps and some repetition of the previous process with just a few simple editing rules to keep in mind while creating your lights.
1. RPG Maker reads the image sheet from Left to Right so your softest light will be at the left and the brightest at the right.

2.Logic from step 1. Flickering Lights should be ordered softest to brightest within their color range. This allows a smooth natural looking flicker/transition between the contrast tones without the player noticing any sharp ugly rapid changes in color. 

3.Color Range should make sense. Let's use a candle as an example with the above template. You would have a very soft orange tone/color in box 1, a little more orange saturation/hue in box 2, then more orange/red-ish tone in box 3. Color spectrum of a light is a noticeable thing to say the least. If player walks in and your candle goes from orange to red in 1 flicker, they will notice lol.
4. THIS IS IMPORTANT: Make each Light on the grid on it's OWN LAYER ,(ctrl + shift + N for New Layer) this will save you tons of editing grief when/if you need to adjust the tone of a light. Failure to do so can result in rage inducing headaches. _{*CaptElfimis is not responsible for any actions a user takes during a rage inducing headace for failure to follow instructions.}

 

Once you are finished creating your lights and you are satisfied with them, delete the layer with the black background.

Save your Light/Light Sheets as $Lights or whatever you want to name them as long as it has $ as a prefix and file type as .png (or atleast that's what I used, feel free to correct me if there is a better file format, I'm fairly new to this).

Open your RPG Maker VXAce project, go to your Resource Manager (F10)

)

Then choose Graphics/Characters Folder (That's where I put mine anyways, organize ya own mess) and Click the Import button:

 

Choose your file and once it's imported, select it and hit preview to make sure the image appears correctly. If it did then you are free to use it as a graphic for your lights

 

Making them work:

For static lights such as lights from a window or source that will have no variation (flicker) you just simply need to follow these steps:

Create New Event (Name it....for the love of god...name your events) and set it up like this:


Choose your graphic

Untick Walking/Stepping

Tick Direction Fix/Through

Priority ABOVE Characters (ignore where it says Same as Characters in that image....i need more coffee)

Trigger: Parallel Process

Movement Type: Custom, click move route, and add Change Blending -> Add. 

 

For a Flickering light source, follow the same steps as above but change the following:
Tick Walking/Stepping

Speed: Fastest

Freq:Highest

 

 

And Viola! Beautiful and subtle lighting effect, no scripts, no hassle. Once you get the hang of creating your own Lights, it's really a fast process to create and implement more sheets to have varying color ranges and light sources. 

 

I may in the near future just create a nice set of Light Sheet Graphics depending on demand.

 

Tips/Tweaks:

-Add Tints to your scenes that use lighting to adjust the overall light appearance of the scene. This can vastly effect the quality and atmosphere of the lighting.

-If your lights appear a bit harsh/bright in game, go to the event and edit the custom move route and change Change Opacity, tweak this until your satisfied.

-You can achieve Light Rays for outdoor lighting as well using this method (I'm working on that now, possibly a future tutorial depending on demand) 

-Experiment with a broad range of colors and light environments. I would make a map solely for testing/editing lights.

-Pay attention to Shadow Placement if you really want to get the most out of your lighting.

-Make sure your lights make sense. Bright Yellow/Orange lights from the sun shining through your window at night would look rather silly and break immersion for the player.

-Study lights and how the interact with environments, search the web, your own home, etc. This can give you excellent perspective to work from.

 

 

If you have any questions/comments or feel like I missed something, please feel free to say what's on your mind.

 

 Capt_Elfimis

 

[Tarq 746]

Thorough; an excellent tutorial.

Judging by the popularity of Khas' lighting effects I'm sure a lot of people will find this useful.

[Rikifive 3,411]

Good job with that tutorial!

*insert stuff, that Tarq posted before here* =)

Edited August 4, 2015 by Rikifive

[xoferew 261]

You are awesome.  I will try this tonight.  I have Game Character Hub so no blur filter - any advice there?  Also, a bit confused, is each frame 111 by 121 pixels?  You end up with a 12 frame file just like a character sprite only bigger?  (Sorry, I baked my brain in the sun today.)

[Capt_Elfimis 55]

You are awesome.  I will try this tonight.  I have Game Character Hub so no blur filter - any advice there?  Also, a bit confused, is each frame 111 by 121 pixels?  You end up with a 12 frame file just like a character sprite only bigger?  (Sorry, I baked my brain in the sun today.)

I'm not familiar with Game Character Hub so I'm not really sure what all it offers, as far as a free program goes consider Gimp (it's very similar to photoshop). With no Blur Filter, just be very careful with how heavy you make your gradients because it's going to be challenging to get the edges to feather off like a proper light fade. You may be able to make a layer mask and change it's opacity to achieve the same effect but it will be alot more work per light (Just a thought, not sure if that will work or not though). 

 

As far as the Grid goes, yes and no. It reads left to right so if you only have 3 columns, you will get a 3 frames per light.

3x4 Grid = 4 3Frame files on 1 sheet. So far that template feels to be the best match I've come up with for size and light radius but feel free to experiment here and share your results.

 

hope that helps, if you have any more questions feel free to ask.

[xoferew 261]

Okay, this is what I have so far (Don't laugh).

I used GCH's "edit radiant gradient."

Obviously I can tone it down to look less like a nuclear inferno.

Dumb question 1:  How do I line it up with where the fire should be?

Dumb question 2:  How do I get the light event and the fire event to share the same space?

 

Thanks for your help!

[Capt_Elfimis 55]

 

 

Dumb question 1:  How do I line it up with where the fire should be?

Dumb question 2:  How do I get the light event and the fire event to share the same space?

1: Move the event down 1 - 2 spaces. You have to test placement depending on the radius of the lights falloff

2:You can't. 2 Events cannot occupy the same space.

 

As far as visual goes, that looks pretty solid. The falloff is excellent, the center is a tad bright so just tweak that (Reduce Saturation/Hue a bit, or play with the Opacity) to get it looking a little less bright. 

 

Let me know how it turns out! Definitely consider adding a Tint to your scene to make the overall lighting atmosphere more compelling. 

[xoferew 261]

 

Hey, I think it's getting better!  It's flickering nicely too.  Thank you so much!  I don't know why I assumed scripts were needed to do this. 

[Capt_Elfimis 55]

 

 

 

Hey, I think it's getting better!  It's flickering nicely too.  Thank you so much!  I don't know why I assumed scripts were needed to do this. 

 

Looking Good!!!! I love it when lighting bring a scene together, glad I could help someone

[xoferew 261]

If/when you have the time I'm eager to learn about outdoor light rays. 

[Capt_Elfimis 55]

I have a set that im working on now. The challenging part of out Light Rays is making them unique to each map which requires a bit more work, it's not as universal as indoor lighting. Im also working on a set of light rays specifically for interior windows to really make that indoor lighting pop! I'll edit the tut and add the new material over the next week or 2 so stay tuned!