Arnou’s Lighting Tutorial

Arnou’s Map Lighting Tutorial, ReReleased for VX Ace
Making a good lighting effect can be difficult, and darkening maps in-game can distort color and add saturation.

and some old VX scripts made lighting effects pixelated or look unrealistic

In this tutorial, you’ll learn how to easily create realistic lighting effects that are pleasing to the eye!

What you’ll need:
GIMP or another image editing program with transparency and blurring (like photoshop)
GIMP for free, here for free, here
For maps larger that default size, you will need a script to hold the fog still, so if you are working in LITE, make your map default size. =]

1. Setup
Use Print Screen (Prt Sc – Above Backspace) or Snipping Tool to take a screen shot of your map in-game, and save it.
(You can save the file directly from the snipping tool, or into Paint from Print Screen.)
Open the image in your program of choice (I use GIMP.)
After you have the picture of your map on the new canvas,add a new layer. (in GIMP press Ctrl+Shift+N)
At the moment, it should look something like this:

2. Adding Glow-Second Layer
Select the background (your map) as the active layer. (click on it)
Use the dropper tool to select a color you would like to use for the glow effect.
(one of the colors in a glowing lantern or fire – or pick your own color)

Select the top, empty layer. (click on it in the layer dialog box.)
Now select the pencil tool. Your color must be set to semi-transparent so it does not cover up the image.
Set the opacity of your pencil tool to 30-50%.
You can edit the transparency of this layer if it is too intense, so don’t make it too light.

To make an even, round glow, use the pencil at a size which makes a large dot over the fire.
You can also use a very small pencil and draw an irregular area.
Play around with the smoothness of the circle and get different results. After it’s drawn, fill it in with the same color.

Now, it’s time to give the circle the glowing effect that a fire would have. Go to the upper toolbar and select filter>Blurs>Gaussian Blur.
In my example I chose the radius to be 15. The picture here shows it to be set at 25.

Depending upon the color you choose and the size of the circle you make, you may need to blur the picture bit more or less.

And there you go! The glow should look something like this now:

But what if we want it to be night time? Using events to darken the screen will also darken the glow, defeating the whole purpose. What to do, what to do…
3. Adding Shadow-Third Layer
Start off by adding another layer (Ctrl+Shift+N); on the third layer select the color that you want the atmosphere outside of the fire to be.
If it’s night time, then just select a semi-transparent black or dark grey.
Now do the same thing you did earlier; draw a line. This time, don’t draw it around the fire, but draw it around the glow of the fire.

Now fill everything outside of the circle with the same black color, and use the Gaussian blur (Effects>Blurs>Gaussian Blur) to get the desired effect.
I used the radius of 25 this time, but again, it depends on the size of the circle and the color you chose.
Now it should look something like this:

If you want to go even farther to emphasize the glow of the fire, you can make more circles around the fire that get gradually larger and fill/blur each of them. If you do that, just remember to make a new layer for each new layer of darkness.

4. Putting it into your game
The newest versions of GIMP require you to EXPORT your layered images to PNG.
When export your image and it will flatten all of the **visible** layers into one.
So before you export the image, be sure to click the “eye” on the bottom layer so the map is not visible!

Now save this image as a PNG file and name it Lighting[FIXED].
You can replace the word ‘Lighting’ with whatever you want, but you MUST have the ‘[FIXED]’ for the script to be effective.
Once named and saved, place it in the Graphics/Pictures folder of your project.

Make sure that you already have Modern Algebra’s [VXA]Fix Picture to Map (link at the top) and have placed it above Main and below Materials.
Now, open your game and go to the map in which you want the overlay to display.
Create a new event in the upper left corner (preference) of the map and in it call up the picture ‘Lighting[FIXED]’

Directly after, add an ‘Erase Event’

Set that event to Parallel Process and press OK.
! All done! Test it out and enjoy!

Here’s another example of a map I made using this method of lighting. Instead of the darkness of night, this map is deep within a forest.
Thanks for reading! If you have feedback or questions, feel free to comment or message me!


Simple GIMP: How to make a Sprite Sink in Lava or Water

A tutorial I made for my class. For private, non-educational, non-commercial use only.

Preceded by this tutorial:

The tutorial uses this image – looks funny here with the black background but the image is of water ripples.