Directional Light Soruce(FlashLight)

Bigbaddevil7

Aka SteamPunkDevil
Member
Joined
Jan 30, 2017
Messages
18
Reaction score
2
First Language
English
Primarily Uses
RMMV
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:
yvr33y9.png

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:
giphy.gif

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:
a4WsgIv.png

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:
HQOO3Sw.png

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:
apVOoNR.png

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.
z9OTy6q.png

kk2foH0.png

Zy5ceNC.png

MMylFj1.png

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:
6XDXaGb.png

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.
Sut89zb.png

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.
 

hypershadic11

Veteran
Veteran
Joined
Nov 25, 2017
Messages
53
Reaction score
27
First Language
English
Primarily Uses
RMVXA
This helped out a lot, thanks!
 

Bigbaddevil7

Aka SteamPunkDevil
Member
Joined
Jan 30, 2017
Messages
18
Reaction score
2
First Language
English
Primarily Uses
RMMV
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.
 

hypershadic11

Veteran
Veteran
Joined
Nov 25, 2017
Messages
53
Reaction score
27
First Language
English
Primarily Uses
RMVXA
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.
 

Bigbaddevil7

Aka SteamPunkDevil
Member
Joined
Jan 30, 2017
Messages
18
Reaction score
2
First Language
English
Primarily Uses
RMMV
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
Member
Joined
Feb 20, 2019
Messages
17
Reaction score
1
First Language
Filipino
Primarily Uses
RMMV
Only up and down show up... why?
 

Attachments

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

hypershadic11

Veteran
Veteran
Joined
Nov 25, 2017
Messages
53
Reaction score
27
First Language
English
Primarily Uses
RMVXA
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! :rhappy:
 

yumolb

Villager
Member
Joined
Feb 20, 2019
Messages
17
Reaction score
1
First Language
Filipino
Primarily Uses
RMMV
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
 

hypershadic11

Veteran
Veteran
Joined
Nov 25, 2017
Messages
53
Reaction score
27
First Language
English
Primarily Uses
RMVXA
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
Glad I could help :D
 

huda

Villager
Member
Joined
Oct 11, 2018
Messages
20
Reaction score
2
First Language
Arabic
Primarily Uses
Other
Great work! i want to ask if i can use your images for my project ?
 

huda

Villager
Member
Joined
Oct 11, 2018
Messages
20
Reaction score
2
First Language
Arabic
Primarily Uses
Other
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:
yvr33y9.png

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:
giphy.gif

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:
a4WsgIv.png

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:
HQOO3Sw.png

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:
apVOoNR.png

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.
z9OTy6q.png

kk2foH0.png

Zy5ceNC.png

MMylFj1.png

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:
6XDXaGb.png

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.
Sut89zb.png

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 Threads

Latest Posts

Latest Profile Posts

Quite the versatile cast so far :p

chars.PNG

Edit: Sprites are made by Alexdraws and TheMightyPalm. I just edited them.
Degica Games Turn Komodo | RPG Maker News #77

Well, rats. Was really looking forward to trying out FPS Creator, but trying to install and set it up was pretty much impossible for my tiny brain to comprehend. So much for that, then.
Ah, home once more! I think I can safely work on my games now.
Let's hope power remains on for the day

Forum statistics

Threads
112,414
Messages
1,068,136
Members
146,065
Latest member
TrooperEddie
Top