How should I go about a lighting system?

Fayabella

  • Posts: 194
Hi,

I want to make a lighting system. I've made a lighting system in Gamemaker, but I have no idea how I could implement it into Stencyl. In Gamemaker I drew a black rectangle on the screen and used masks around the lights, but it was inefficient and only had one colour.

I want it to look like Ponytown's lighting system. Here are a few pictures:

This is just a single light shining on multiple objects:

Note that the torches emit coloured (yellowish) light.

Here are multiple lights close together:


And here's a sunrise. I want to make a day/night system, and I'd like a coloured sunrise/sunset.



What would be the best way to go about this?

Thanks!

« Last Edit: February 13, 2019, 06:36:47 pm by Fayabella »

rob1221

  • *
  • Posts: 9424
You would certainly want to use a shader for this assuming you aren't making a Flash game.  You could check out the multiple lights shader I created but it's a fairly simple circle light shader and will not look like the screenshots you posted.
http://community.stencyl.com/index.php/topic,50356.0.html

merrak

  • *
  • Posts: 2474
It is possible to achieve the images you posted using software rendering, but probably* not with the built-in tools the Image API gives you. (* as of build 9867. I haven't looked to see if there are changes to the Image API in the recent 4.0). I used a third party library to render the image below in software.

http://www.anorthogonaluniverse.com/misc/vallas/2017-07-17-03.png

Assuming you aren't constantly refreshing the screen, you're familiar with working with Haxe code, and you're good with memory management, you should be able to get something like that implemented and get acceptable performance. Just note that I'm planning to replace this software-based solution in my own game before too long. If you're targeting Flash then take a look at it, but otherwise you're probably better off using shaders like rob1221 said.

Fayabella

  • Posts: 194
Ok, wow. I thought this was possible with the Image API.

I'm targeting Flash, so no shaders.

I've never used Haxe, and I don't know much about memory management.
Are you absolutely sure there is no way I can use the Image API? Drawing an image on the screen (opaque black rectangle) and getting rid of areas with light or something? Perhaps using blend modes?
 
P.S. You guys seem to be helping me with all my problems. I hope I'm not bothering you.

« Last Edit: January 31, 2019, 07:22:07 am by Fayabella »

Luyren

  • *
  • Posts: 1712
Are you absolutely sure there is no way I can use the Image API? Drawing an image on the screen (opaque black rectangle) and getting rid of areas with light or something? Perhaps using blend modes?
The Image API can get rid of the dark areas using a mask actor as a "light source", and you can use blend modes. The problem seems to be lighting it appropriately afterwards, to get the sunrise/sunset effect, or an actual color for the light source, and blending multiple light sources.
Working.

Fayabella

  • Posts: 194
Perhaps two rectangles drawn onscreen, and one has holes where the masks are (the darkness rectangle) and one only shows where the lights are (a golden coloured rectangle)?

rob1221

  • *
  • Posts: 9424
On Flash, the image API and blend modes are both options you can use.  I think using blend modes (including layer blend modes) will be easier.  For a basic lighting system using blend modes you can use light actors with the screen blend mode along with a dark layer using the multiply blend mode.

Fayabella

  • Posts: 194
Okay, I have a layer called 'light' with 'screen' on, and a 'dark' layer with 'multiply'.

This is what I get. Attached is a screenshot and a picture of my mask. The light just looks like whiteness, not removal of darkness.

rob1221

  • *
  • Posts: 9424
The light actors get the screen blend mode, not the layer.  Also the actors can be on the same layer as the dark layer as long as they are above the dark image.

Fayabella

  • Posts: 194
I get the same thing when I put the mask actors in a normal blending layer above the dark multiply, and set the actors to 'screen'.

Only difference is that they don't cut out of eachother, they merge together like the images I showed.

So, some progress. But it still looks like whiteness above the torches instead of cutting out of the darkness.

What else could I be doing wrong/should I try?

rob1221

  • *
  • Posts: 9424
I did some testing and it looks like the lights do have to be on the same layer as the darkness for this trick to work.  Putting them on a higher layer won't work, probably because the darkness gets applied before the lights but that ruins the lower layers.

Luyren

  • *
  • Posts: 1712
You probably want the light source draw using screen in the dark multiply layer. What rob said.

Is the attached image sort of the effect you are looking for? I got something with multiple layers of color, and removing the individual layers, but I have no idea if that would be enough to simulate the image in your first post.

Working.

Fayabella

  • Posts: 194
That looks a bit close to what I'm trying to replicate. I also got it to work with rob's idea, but it still glitches (there seems to be a black shadow ring around the lights and the light masks are visible even when the opacity of the darkness is set to 0.) I've attached images demonstrating this.

So, 1: is there a way to fix that, and 2: Luyren, what is your method exactly? I'd like to try it out.

Luyren

  • *
  • Posts: 1712
Luyren, what is your method exactly? I'd like to try it out.
I attached the following:
1- A rough explanation on what I do. It's tint the screen with multiply and clear the tint with light sources, basically.
2- Where in my code you could replace the "clear" with a drawing of a light source, if you want to try that route.
3- A resource pack with my code, just import that into your game or a sample game to test it. Again, I'm not sure if it can get perfectly the effect you want. If you want to try it, feel free to ask me anything about it.
Working.

Fayabella

  • Posts: 194
It appears that perhaps you haven't attached the resource pack correctly, I get a PNG image when I download it.

I couldn't understand what you said too well, but what I gathered is that you have multiple colour layers and the light masks erase from the darkness and add to the light?

« Last Edit: February 02, 2019, 04:19:10 pm by Fayabella »