This tutorial will show you how to setup a seamless flashlight effect between two parts of a map. In the tutorial, the scenario is an ancient scroll room, which fades to darkness as you move away from the lamps. This tutorial shows to event a system, but explains a lot about events along the way.

Materials

If you want to create the tutorial as we go (and I hope you do), I'll provide you with a demo which contains all the materials used in the video, just without any events. In the demo are the map, a BGM, a BGS and an image which will act as our flashlight. I recommend download the demo and using it for this tutorial, rather than following instructions and creating your own.
flashlight-tutorial.zip (3.53MB)


Setting up the map

The first step is to create the map, simple enough. For our flash light, we are going to be using a graphic which has a hole, or transparent center. This is where we will see our character, and a couple of steps ahead. The first issue we will come across is the player going to the edges of the map and moving away from the center of the graphic. Therefore, apart from the entrance of the room, the map needs to extend a decent amount of tiles past the edges of the room. Sort of like a 'buffer' of tiles. So your map should look something like this:

If you don't do this, here's what can happen:

But by using this technique you shouldn't run into any problems, and the character should be visible when you're right up against the wall, like this:

After you have created your map and made it looking all pretty, we want to add a BGS(background sound). Download the demo above and steal the BGS from it to use, and add it in your Map Properties. Set the volume to about 70-75%. Our BGS is going to playing throughout the entire map, but our BGM(background music) is going to fade depending on where we are on the map, so we are going to initiate using events.


Setting up Parallel Process Events

All of our events are going to have their trigger set to parallel process, but I will leave the last one separate as it is the main part of the tutorial. In the mean time we'll be setting up two other events: the first to set the screen color tone, the second to store the players Map Y(explained below).

 

Create an event anywhere on the map, preferably somewhere you can see easily. We are going to set the screen color tone when we first see the map in-game. In the commands list, add the following commands:
-Change Screen Color Tone(2nd tab): Red(-110), Blue(-110), Green(-110), Gray(140), Time(0 Frames).
-Erase Event(1st tab)
Finally, set the Trigger to Parallel Process. Parallel Process will run the event commands alongside other events. This is in contrast to Autorun, which will stop everything else until the event commands are run, which you typically use in cutscenes to keep the character stationary. The erase event is there to set the screen tone color once, when we first see the map. We will later be changing the screen tone color, so it's necessary to delete the event as soon as the tone is changed. The event will run again each time we return to the map. Your event should look like this:

The next parallel process event we are going to create will store the players Map Y which will allow us do run event commands depending on where the player is on the map. Each square represents 1 X(horizontal) or Y(vertical) movement. Hopefully this diagram will clear things up if you don't understand:

We also refer back to this picture as we use this technique to find which Y value is the minimum before the the lights go out. Ok, lets setup the event. Create another event, preferably beside the one we just made, and set the Trigger to Parallel Process. In the events commands, add the following:
-Control Variables(1st tab): Variable(Single->select a variable and name 'Player Y'), Operation(Set), Operand(Character->Player->Map Y).
And that's all, we will use conditional branches with the value of this variable in our next event. The event should look like this:

Alright, at this point we should have our map made, a dark screen color tone, and a variable telling us where our character is vertically. Now its time to setup the main event, which controls the flashlight and BGM.


Main Event

Create a new event, and set it the Trigger to Parallel Process. We will do this for all our event tabs. Now, this is the point where we decide at which point on the map our flash light comes into play. On this particular map, we are only concerned with where the play goes vertically, so we need to find a maximum Y point. To find the value of the point where the flash light comes on, go to the map editor and click on the square. On the bottom bar of RPG Maker XP, it will tell you the coordinates. Here's an example:

They Y value is the one on the right. We are going to use 47 for the tutorial. You should know this by now, but this means that when the character is above 47(squares) the flashlight will come on. If below, the flashlight will turn off.


Page 1

This is a simple page, it will basically determine whether our player is below 47(within flashlight range). If it is, Self Switch A turns on, and the event commands of page 2 run. The event commands are as follows:

-Conditional Branch(1st tab): Variable(Player Y, the variable we setup before)->Less Than->Constant(47)
-Control Self Switch(inside the conditional branch, 1st tab): Self Switch(A), Operation(On)

It should look like this so far:


Page 2

This page is what happens when our flashlight turns on. You can tinker with these to suit your preferences, but this is how I set it up.

 

Set the Trigger to Parallel Process. Turn On Self Switch A(if you don't know what this is, refer to the next screenshot and look at the left pane).

 

Event commands:

-Change Screen Color Tone(2nd tab): Red(0), Blue(0), Green(0), Gray(0), Time(40 Frames).
-Show Picture(2nd tab): Picture Graphic(the graphic at the top of the post), The Origin(Upper Left), Constant(X->0, Y->0)
-Move Picture(2nd tab): Number(1, or from the Show Picture command), Time(20 Frames)
-Fade Out BGM(2nd tab): Time(4 seconds)
-Control Self Switch(1st tab): Self Switch(A), Operation(Off)
-Control Self Switch(1st tab): Self Switch(B), Operation(On)

It should look like this(if the settings above are unclear, you should see them in the screenshot):


Page 3

This page is very similar to page 1, it waits until the character is back out of the flashlight area(above 47) and then goes to the next page.

 

Set the Trigger to Parallel Process. Turn On Self Switch B.

 

Event commands:

-Conditional Branch(1st tab): Variable(Player Y, the variable we setup before)->Greater Than->Constant(47)
-Control Self Switch(inside the conditional branch, 1st tab): Self Switch���©, Operation(On)
-Control Self Switch(inside the conditional branch, 1st tab): Self Switch(B), Operation(Off)

It should look like this:


Page 4

This page controls what happens when the character exits the flashlight area. It will erase the picture, play the BGM, and change the screen color tone. After that it will return to page one and wait until the player goes back into the flashlight area.

 

Set the Trigger to Parallel Process. Turn On Self Switch C.

 

Event commands:

-Change Screen Color Tone(2nd tab): Red(-110), Blue(-110), Green(-110), Gray(-110), Time(10 Frames).
-Move Picture(2nd tab): Number(1, or from the Show Picture command), Time(20 Frames), Opacity(0)
-Play BGM(2nd tab): Choose one of your choice, or use the one from the demo
-Control Self Switch(1st tab): Self Switch���©, Operation(Off)

It should look like this:


Conclusion

That's it. One thing you should notice about the last event is that it's a loop. Four pages isn't necessary, but it makes things neat and tidy and easier to understand and come back and change if you need to.

 

Here is the demo (same as above)
flashlight-tutorial.zip (3.53MB)

Share


About the Author

Comments

5,396 Posts
3,746 Points

Marked   said 22nd September 2013

Great tutorial Mark.

 

(first ever tutorial comment, wooh)

Quick Reply

Guest

Enter a username

Security check: What is 8 plus 2?