# Directional Light Soruce(FlashLight)

##### Aka SteamPunkDevil
At the time I am making this tutorial, I am making a horror game and I really wanted a flashlight. So I thought I would show how I did it. Now the lights are just examples, they can all be tweaked to look better in an image editor. I didn't spend too much time on the images to make sure this concept at least worked.

I've seen as well as I imagine many others have, the "Lantern Effect" where all you do is make a picture that is a circle of the light you wish to give off, and then show that picture in reference of your ScreenX and ScreenY variables.

As seen here:

Now there is nothing wrong with this method, and have seen it used in some really good RPG Games. There are a couple things that don't fit the bill for me here.
1. This is a modern era for this map, a lantern would be non-existent.
2. I don't like how it lights up the entire character. This can be done a lot better I know, so that it's not washed out as bad, but this is just an example. If you like this method there are plenty of places you can go to learn how to make a really nice lantern effect.

So onto my preferred light source.

A flashlight as seen below:

Luckily it is not too much more to pull this off. Add one more Variable, 4 Conditional Branches, and 3 more images.

1. Make a new event (name it whatever you want) and set it to Parallel Trigger.
2. You will need 3 Control Variables:
• Player X = Screen X of Player (Make sure its screen X and not Map X)
• Player Y = Screen Y of Player (Again make sure its Screen Y)
• Direction = Direction of Player (its in the same character dropdown as the ScreenX & Y)
That's all the variables needed, here is what it should look like thus far:

3. The next part is you need to make a some nested conditional branches so they act as an ELSE IF statement. This is what is going to determine which way we are looking determined by our "Direction" Variable (2 = Down, 4 = Left, 6 = Right, 8 = UP).
• Conditional Branch
• Variable "Direction" = Constant 2 (This will check for if the player is looking down)
• Check the "Create Else Branch"
Should look like this:

4. Make another conditional branch inside the first one after the "Else", and copy the same settings except for changing the Constant from 2, to 4, and repeat that 2 more times changing the constant to 6, and 8. When it's all done you should have something that looks like this:

5. Now onto the hardest part in my opinion, and really up to you on how you do this, but make 4 Light Images, name them something that easy to reference, so for me it was 'lightLeft', 'lightRight', 'lightUp', 'lightDown'.

What makes this harder is when we draw them to the screen its either "Center", or "Upper Left", meaning that you will need to offset the light to account for the character size. What I decided to go with is to format them for the "Center", and offset the image to account for the character within its own canvas, but remember the character will have to sit in the center of the Image so it will need to be doubled in size on the Axis's.

In other words if you want a 2x1 Tile light, then make it 4x2 (192x96px), X being 4 because again it needs to be doubled for the fact its being centered. The Y is 2 because you need to raise the light up slightly because if not its at your feet. Look at the lantern picture I posted and you see where the starting point is.

I am not going to show how to do that, as it can vary depending on your needs, and you may want slightly different positions. I have added my light pictures that I reference above. However I do strongly recommend you make your own as these are quite bad, again just to be used as example and reference.

6. Now all we have to do is draw those pictures, so going back to the conditional branch we set up, under the first 'IF' make a new "Show Picture". Since this was Direction = 2 for that IF, then we need to draw the 'lightDown' picture (or whatever you named yours).
• Origin is "Centered" if you downloaded my examples, or decided to go with that format.
• "Designation with Variables" setting the X to the Player X variable and the Y to the Player Y Variable that we setup earlier.
• Set the blend mode to Additive.
Should look something like this:

7. Repeat that for all the directions in the nested Conditional Branches that we made when you are all done it should look like this.

Just note the Image names.

With that you should now have a working flashlight! Of course if you want it to turn on/off, have the event require a Switch and when you set that Switch it OFF it will stop the event and stop showing the pictures.

It seems like a lot when you first look at it, but all it really is, is just the "Lantern Effect", but changing the image when you turn. So all it is is adding 1 more Variable and 4 Conditional Branches. Like I said the hardest part is making the images, just because you will need to mess with offsetting the image within its own canvas.

Technically the last IF isn't needed because if the first 3 are false then you can assume the last direction. I personally don't like doing stuff like that, due to other coding experiences, I've fixed a lot of other people's code, because theoretically X should happen, but then an outside variable messes with it and then you have an issue. With this way you are checking everything. Up to you though.

Hopefully, this at least can help you with some ideas. Like I said I highly recommend you make your own lights and just fiddle with the positioning to suit your needs perfectly.

If anyone has anything to add to this, feel free to post it below.

##### Veteran
This helped out a lot, thanks!

##### Aka SteamPunkDevil
This helped out a lot, thanks!
Glad you liked it. Was hoping it would be clear enough to follow, if I find people are having issues I may decide to make a video on how to do so.

##### Veteran
Glad you liked it. Was hoping it would be clear enough to follow, if I find people are having issues I may decide to make a video on how to do so.
I only had two issues, but those were my own idiotic faults... The first issue was me setting it to map X & Y instead of screen X & Y, and then just not setting it to parallel process... Other than that, I think that this is pretty basic in itself, but you can definitely expand off of this to make an actual functioning light source, which I'm working up to in my current game.

##### Aka SteamPunkDevil
I only had two issues, but those were my own idiotic faults... The first issue was me setting it to map X & Y instead of screen X & Y, and then just not setting it to parallel process... Other than that, I think that this is pretty basic in itself, but you can definitely expand off of this to make an actual functioning light source, which I'm working up to in my current game.

Yea even I expanded off this to make a better light, will be interesting to see how you expanded it.

#### yumolb

##### Villager
Only up and down show up... why?

#### Attachments

• Screenshot (335).png
248.3 KB · Views: 8

##### Veteran
Only up and down show up... why?

That's because you only have 2 if functions. You need 1 for each direction the character faces, which in most cases is 4. As shown above.

So if you have 4 directions, then you're going to use 4 if statements, increasing the variable number for direction by 2 each time.

You could also be doing a lot of other things wrong, but the information I've seen is limited, so I wouldn't know. Either way, just copy the script above block for block, and letter by letter. I even implemented this in VX Ace, so it's really not difficult to do. You got this!

#### yumolb

##### Villager
Yeah, all I needed were or if statements XD. I thought that as long as I put some of them in else branches it would be alright. Well, it's working great now. thanks

##### Veteran
Yeah, all I needed were or if statements XD. I thought that as long as I put some of them in else branches it would be alright. Well, it's working great now. thanks

#### huda

##### Villager
Great work! i want to ask if i can use your images for my project ?

#### huda

##### Villager
At the time I am making this tutorial, I am making a horror game and I really wanted a flashlight. So I thought I would show how I did it. Now the lights are just examples, they can all be tweaked to look better in an image editor. I didn't spend too much time on the images to make sure this concept at least worked.

I've seen as well as I imagine many others have, the "Lantern Effect" where all you do is make a picture that is a circle of the light you wish to give off, and then show that picture in reference of your ScreenX and ScreenY variables.

As seen here:

Now there is nothing wrong with this method, and have seen it used in some really good RPG Games. There are a couple things that don't fit the bill for me here.
1. This is a modern era for this map, a lantern would be non-existent.
2. I don't like how it lights up the entire character. This can be done a lot better I know, so that it's not washed out as bad, but this is just an example. If you like this method there are plenty of places you can go to learn how to make a really nice lantern effect.

So onto my preferred light source.

A flashlight as seen below:

Luckily it is not too much more to pull this off. Add one more Variable, 4 Conditional Branches, and 3 more images.

1. Make a new event (name it whatever you want) and set it to Parallel Trigger.
2. You will need 3 Control Variables:
• Player X = Screen X of Player (Make sure its screen X and not Map X)
• Player Y = Screen Y of Player (Again make sure its Screen Y)
• Direction = Direction of Player (its in the same character dropdown as the ScreenX & Y)
That's all the variables needed, here is what it should look like thus far:

3. The next part is you need to make a some nested conditional branches so they act as an ELSE IF statement. This is what is going to determine which way we are looking determined by our "Direction" Variable (2 = Down, 4 = Left, 6 = Right, 8 = UP).
• Conditional Branch
• Variable "Direction" = Constant 2 (This will check for if the player is looking down)
• Check the "Create Else Branch"
Should look like this:

4. Make another conditional branch inside the first one after the "Else", and copy the same settings except for changing the Constant from 2, to 4, and repeat that 2 more times changing the constant to 6, and 8. When it's all done you should have something that looks like this:

5. Now onto the hardest part in my opinion, and really up to you on how you do this, but make 4 Light Images, name them something that easy to reference, so for me it was 'lightLeft', 'lightRight', 'lightUp', 'lightDown'.

What makes this harder is when we draw them to the screen its either "Center", or "Upper Left", meaning that you will need to offset the light to account for the character size. What I decided to go with is to format them for the "Center", and offset the image to account for the character within its own canvas, but remember the character will have to sit in the center of the Image so it will need to be doubled in size on the Axis's.

In other words if you want a 2x1 Tile light, then make it 4x2 (192x96px), X being 4 because again it needs to be doubled for the fact its being centered. The Y is 2 because you need to raise the light up slightly because if not its at your feet. Look at the lantern picture I posted and you see where the starting point is.

I am not going to show how to do that, as it can vary depending on your needs, and you may want slightly different positions. I have added my light pictures that I reference above. However I do strongly recommend you make your own as these are quite bad, again just to be used as example and reference.

6. Now all we have to do is draw those pictures, so going back to the conditional branch we set up, under the first 'IF' make a new "Show Picture". Since this was Direction = 2 for that IF, then we need to draw the 'lightDown' picture (or whatever you named yours).
• Origin is "Centered" if you downloaded my examples, or decided to go with that format.
• "Designation with Variables" setting the X to the Player X variable and the Y to the Player Y Variable that we setup earlier.
• Set the blend mode to Additive.
Should look something like this:

7. Repeat that for all the directions in the nested Conditional Branches that we made when you are all done it should look like this.

Just note the Image names.

With that you should now have a working flashlight! Of course if you want it to turn on/off, have the event require a Switch and when you set that Switch it OFF it will stop the event and stop showing the pictures.

It seems like a lot when you first look at it, but all it really is, is just the "Lantern Effect", but changing the image when you turn. So all it is is adding 1 more Variable and 4 Conditional Branches. Like I said the hardest part is making the images, just because you will need to mess with offsetting the image within its own canvas.

Technically the last IF isn't needed because if the first 3 are false then you can assume the last direction. I personally don't like doing stuff like that, due to other coding experiences, I've fixed a lot of other people's code, because theoretically X should happen, but then an outside variable messes with it and then you have an issue. With this way you are checking everything. Up to you though.

Hopefully, this at least can help you with some ideas. Like I said I highly recommend you make your own lights and just fiddle with the positioning to suit your needs perfectly.

If anyone has anything to add to this, feel free to post it below.
Great work! I want to ask if i can use your images for my project ?

### Latest Profile Posts

I've been working on something on and off for a few years now, and I've been reluctant to share any details on the project before I had anything playable because I did not want to generate hype only for the project to go back on hiatus. That being said I believe what I'm working on is very unique and pushes the boundaries of what RPG Maker projects can be. Bold claims, I know but just wait.
Happy Mother's Day to all the moms
Create Anime Art w/ AI, Tall Sprites with Aurora, Customize Variable Display | RPG Maker News #34

[My favorite slow moving track I've made so far]

I did an experiment to try to solve the art style problem between RTP and 3D models.
But, it feels this grimdark world is going to end even faster.