[WIP] A Better Way to Create Complex Lighting

Show us your works in progress and request feedback

Post » Tue Nov 29, 2016 8:26 pm

A few months ago Ashley made a post on how to handle multiple lights in a single layout (for reference: https://www.scirra.com/tutorials/5005/multiple-colored-shadow-casting-lights)

This approach may work for some, but I found the method described to be extremely limiting, due to a number of factors:

  • Not all lighting necessarily needs to be realtime, and lights that are just used to set mood would be wasting processing time since they re-render every frame for every light.
  • Dealing with a lot of lights becomes extremely cumbersome as more layers are added.
  • Because of limitations in how C2 handles shaders in WebGL, if a developer wanted soft lights, they would have to apply a blur effect to a LOT of layers, destroying performance.
  • Any visual effects lighting, like the flash of an explosion of a player throws a grenade, would have severe limitations, due to needing to juggle layers, with the number of available layers creating a hard limit on how many lights could be used.
  • If all stages take place in a single layout (eg. loading multiple tilemaps within a single layout for various stages), the layer management issue becomes very convoluted to manage, and has a hard limit on how many lights can appear in any stage - and hard limits are bad.
  • In a production environment where you may be working with a team, it simply isn't an option to expect level designers or artists to have to work in the same program/files as the developer. This is a reality of game development that gets ignored a lot, but that doesn't make it any less true.

So, with that in mind, I set about creating a way to manage multiple C2-native Shadow Lights on as few layers as possible. There were some issues initially because of a bug in the tilemap collisions, but Ashely has fixed this in r240 beta and I've been able to make some progress:

Using a simple test layout:
Image

Which looks like this in the browser without lighting being applied properly because they're all on the same layer:
Image

And looks like this in the browser with my solution applied. So far, I've ended up using 3 layers for background, foreground and VFX lighting. Static lighting only needs to render once, eliminating any overhead from having to redraw multiple shadows & layers every frame, and dynamic lighting only has to render when it's being interacted with, such as the light moving/rotating or objects that cast shadows overlapping it. VFX lights render for a single tick and then are removed, so they don't really impact performance very much at all:
Image

Play with the example yourself (arrows move/jump, ctrl/shift shoot and drop grenades respectively):
https://dl.dropboxusercontent.com/u/14245368/C2/LightingTest/index.html

It's not quite ready for use in a production environment, and it needs a lot more flexibility to blend well with artwork and provide the kind of features people typically expect from a lighting system, but as a proof of concept created in a few hours it shows what might be possible. It DOES currently involves the use of the Paster plugin, which is unavoidable; rendering to a texture quickly is really a feature that should be native to C2, but somehow it isn't, which seems like a huge oversight, so there's no way to do it without any 3rd-party add-ons at this time. Some of the shaders could also be optimized if there were a way for the shader to sample the screen at a lower resolution, but I haven't been able to get that to work in C2 at all (which seems like a bug in C2).

I think there's a lot more optimization that can be done, so I'd be curious to hear what kind of performance you're getting if you're on a PC with a slower GPU/integrated graphics.

The end goal is to create a flexible lighting system that's easy to use. I'll update this post as I tweak things and to flesh out what's going on behind the scenes a bit more.
B
71
S
41
G
24
Posts: 518
Reputation: 20,195

Post » Wed Nov 30, 2016 5:45 pm

Surprised no one has replied yet. This looks pretty awesome and I didnt notice any frame drops on my Surface Pro 4. Are you going to release this so we can experiement with it? Nice job man!
B
79
S
51
G
40
Posts: 370
Reputation: 25,205

Post » Wed Nov 30, 2016 8:53 pm

That is some pretty lighting!
B
86
S
43
G
71
Posts: 601
Reputation: 43,619

Post » Thu Dec 01, 2016 6:04 am

Thanks! It needs a bit more work before anything is ready to release. I'll be working through it on and off for awhile, but I'll post updates here. I want to make the lighting easier to work with and see if there's a way to preview some of the effects in the editor.
B
71
S
41
G
24
Posts: 518
Reputation: 20,195

Post » Fri Dec 02, 2016 11:38 pm

First post ever to say I'm keeping an eye on this, and holy hell I would love to try testing it out. I've been struggling with multiple lights natively and through plugins like Paster, especially since I want scalability with a larger layout and many more layers. I know it's not ready for production release, but I would be grateful if you could throw me a bone for how you're generally laying it out using Paster.

Regardless, it looks amazing considering the constraints of C2's engine.
B
8
Posts: 1
Reputation: 302

Post » Mon Dec 05, 2016 10:15 pm

TheFE3C wrote:First post ever to say I'm keeping an eye on this, and holy hell I would love to try testing it out. I've been struggling with multiple lights natively and through plugins like Paster, especially since I want scalability with a larger layout and many more layers. I know it's not ready for production release, but I would be grateful if you could throw me a bone for how you're generally laying it out using Paster.

Regardless, it looks amazing considering the constraints of C2's engine.


The lights aren't composited in to Paster all at once - that would create the same overlapping/incorrectly rendering issues we see without using Paster.

There's a loop that basically does this for all of the static lights:

For each ShadowLight
- Paste ShadowLight into Paster (there's some steps here to run effects on the shadows to soft them, but this is the basic idea)
- Delete ShadowLight

For the dynamic/interactive lights, there are unique Paster objects for each. The ShadowLight isn't deleted, but it's turned off unless there needs to be an update to the Paster object, which is tracked based on the collision polygon of the Sprite that acts as the light stencil (the shape/look of the light). The Paster objects for these lights are sized only as large as needed for the image being used in each Sprite.

So for example, the rotating spotlight:

Here the collision poly is overlapping the Tilemap and player Sprite, so the Paster object needs to be updated with the correct shadows. Note the collision poly isn't actually this big, the lines are just shown for reference.
Image

But here, the Sprite acting as the Light stencil doesn't need to be updated because it's not colliding/overlapping with anything, and so it just rotates the Paster object based on it's anchor point (Image Point, in C2 terms).
Image
B
71
S
41
G
24
Posts: 518
Reputation: 20,195

Post » Wed Dec 07, 2016 10:48 am

Wow! This looks amazing! Never expected to see this kind of lighting in C2! I really love how the grenade explosions light the scene!!!

No performance issues here, but my desktop doesn't have that low of a specs...

This part of the forum is a bit obscured, I believe this topic needs more attention!

Keep up the good work!

:)
composer - multimedia artist
www.eli0s.com/en/
B
68
S
26
G
4
Posts: 1,146
Reputation: 9,649

Post » Fri Dec 09, 2016 8:58 pm

eli0s wrote:Wow! This looks amazing! Never expected to see this kind of lighting in C2! I really love how the grenade explosions light the scene!!!

No performance issues here, but my desktop doesn't have that low of a specs...

This part of the forum is a bit obscured, I believe this topic needs more attention!

Keep up the good work!

:)


Glad to hear performance is okay. The test itself is pretty low-res (640x360) so I probably need to try a higher resolution and optimize from there. I'm not sure what other forum to put it in, since it's not really an add-on/plugin, but events/actions that use the built-in objects a lot more efficiently than their default behaviors...but I'm open to suggestions :).
B
71
S
41
G
24
Posts: 518
Reputation: 20,195

Post » Sat Dec 10, 2016 9:04 am

The colors of the lights look pretty cool. Something like the bloom effect, in games, good job ! :D
B
35
S
9
G
9
Posts: 207
Reputation: 6,805

Post » Mon Dec 12, 2016 6:21 pm

This is outstanding, I'm a fan of these kind of visual additions in games and I'm definitely looking forward to the further progress!

That might be a stupid question and a bit offtopic but.. how do you get the grenade to rotate in the way that pixels don't "change" their angle? Like it doesn't rotate smoothly as it normally does in C2 but instead it rotates like it would be rotated in Photoshop or other softwares. That's how I want to rotate my objects in my project I am working on but I thought it's impossible in C2. :D
B
29
S
16
G
2
Posts: 109
Reputation: 3,380

Next

Return to Works in Progress/Feedback Requests

Who is online

Users browsing this forum: Apollo14 and 0 guests