2D lighting engines

[Bobble68]

So I've been thinking about this for a while now, I've just been unsure how to start so I thought I'd start by asking here.

In short, I've realised my game (In the Heavens) needs a proper lighting engine - for a game so focused around flying in an otherworldly realm, it's flat lighting doesn't do it any favours.

example.png (156.11 KiB) Viewed 27295 times

The problem is, this is the first time I've looked into coding anything like this, and my knowledge of shader techniques is limited at best, so does anyone have any suggestions or ideas on where to start?

[RNavega]

Hi. The way I'm thinking about it, the most important thing is to know what end result, visually, that you would like to have.

This means creating a mockup of your ideal game scenes in your favorite image editor(s), and the concern at this point is just to make them beautiful and interesting.
If you were in a big studio, I guess this would probably be handled by the concept artists.

Only after settling on an art direction is when you'd worry about implementing it with shaders, textures etc. It's also easier to ask for help, "I want it to look like this (shows mockup)".

[Ross]

The basic lighting that many 2D games use, like so:

how-to-point-light.jpg (21.6 KiB) Viewed 23775 times

is quite simple to do. It requires very minimal shader knowledge. It's just an overlay. The lights are just images with the "add" blend mode, drawn to a separate canvas. Then you multiply the lighting canvas color with the regular canvas color (it does require that your normal rendering is done on a canvas).

Actually you might be able to do it with the "multiply" blend mode and no shader at all, but I haven't tried it.

You can get pretty nice effects with just this, but there are also various simple ways to enhance it, like drawing foreground objects on top of the lighting, or drawing things to darken the light canvas to add "shadows", etc.

I will second RNavega's point that you should have a clear idea of the overall look you want first though, otherwise it may just look out-of-place and not actually improve things.

[knorke]

Only after settling on an art direction is when you'd worry about implementing it with shaders, textures etc. It's also easier to ask for help, "I want it to look like this (shows mockup)".

I do not disagree but sometimes it is also the other way around.
Sometimes the question is more like "What can I do, what are my skills?" and then the answer dictates your art direction. Or you come up with some code doodle without having thought about how it will fit in art-wise.

This thread has some examples:
viewtopic.php?p=256194#p256194
this one too: viewtopic.php?p=244842#p244842

[RNavega]

Sometimes the question is more like "What can I do, what are my skills?" and then the answer dictates your art direction. Or you come up with some code doodle without having thought about how it will fit in art-wise.

That's fair.
There's also the case when the visuals might be decided later, as you progress in writing the story. Like you coming up with an intense moment that really needs the help of all the visual tricks that you have, like vignettes, color grading, contrast and so on.

By the way, thinking about it again, I think there's already some mileage to take by adjusting the graphics offline, without shaders. But that's up to taste.
GIF:

temp.gif (170.42 KiB) Viewed 21458 times

[Bobble68]

I think there's already some mileage to take by adjusting the graphics offline, without shaders.

Opps, too late, already made a lighting system



I probably will use photoshop to mess with it though, hopefully it could add some appeal to it.

[zingo]

I think there's already some mileage to take by adjusting the graphics offline, without shaders.

Opps, too late, already made a lighting system



I probably will use photoshop to mess with it though, hopefully it could add some appeal to it.

That's a neat effect...almost looks like some kind of "normal mapping". There have been a few similar lighting/shadow systems...but such effects tend to become rather "resource heavy" when combined and applied to larger areas or multiple entities, so optimization is very important. Although...I am curious as to how you did achieve that, if you wouldn't mind sharing a bit of code. If not, that's okay too. Looking forward to what you come up with next, it's always interesting seeing what kind of visual effects people implement in their projects.

[Bobble68]

That's a neat effect...almost looks like some kind of "normal mapping".

Ah that's because that's what it is! It looks much more impressive than it really is, it's essentially just edge detection to generate a normal map, then using a slightly modified lambert shading - no idea how optimised it is currently as this is a pretty basic test. Though there aren't any real shadows, though I don't think I'll need them, at least not yet. I'll only really know once it's implemented, though I'm currently battling against some pretty poorly thought out draw functions, so it'll take time.

Actually, I could do with some help for it - currently the lighting is very smooth, and I'd rather it's pixellated and alligned with the texture, which could help with optimising if its at it's native resolution, however short of rendering each texture to a canvas every frame, I can't think of a good way of achieving it.

Oh, guess I should include this demo - currently the mouse controls two coloured lights, scrolling changes it's z coordinate. (Also full disclosure, this is based off of this https://twitter.com/Securas2010/status/ ... 1086307328)

[zingo]

I really wish I could help...but this sort of stuff is pretty far out of my league . For my own project, I may just use "stencils" for some basic blended lighting/shadows, and probably not mess about with normals (as that would require a whole seperate set of sprites for everything that's lit, and would also become somewhat tricky for animations, etc.)

As I understand it, many systems usually utilize some sort of "gouraud" or "phong" shading. There are quit a few articles about this sort of thing, here's one for gamemaker: https://gamemaker.io/en/blog/using-norm ... ur-2d-game although, I'd imagine that the method could be adapted.

I hope you can accomplish the atmosphere you're going for. You may also want to consider including "god rays" in some areas, as that would look awesome with the dragon flying around in front of it.

[vilonis]

Actually, I could do with some help for it - currently the lighting is very smooth, and I'd rather it's pixellated and alligned with the texture, which could help with optimising if its at it's native resolution, however short of rendering each texture to a canvas every frame, I can't think of a good way of achieving it.

Two options I can think of off the top of my head:
* render the world to a virtual canvas that is 1:1 with your pixel graphics, then scale the whole thing up afterwards. That way your pixel shader is running on each graphical pixel.
* In your pixel shader code, have each screen pixel determine its (approximate) graphical pixel by dividing and rounding its screen pixel coordinate by the scale factor, then use that for the lighting calculations

Both of those have complications that would need to be worked out, but they’re a start.