Directional Light Soruce(FlashLight)

じ☆ve冰风

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:
Spoiler






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:
Spoiler






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:
Spoiler






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:
Spoiler






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:
Spoiler






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.
Spoiler















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:
Spoiler






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.
Spoiler






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.


本贴来自国际rpgmaker官方论坛作者:Bigbaddevil7处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/directional-light-soruce-flashlight.93660/