[WIP] A Better Way to Create Complex Lighting

0 favourites
From the Asset Store
Fully commented source code/event sheet & sprites to create a space shooter game
  • 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:

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

    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:

    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.

  • 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!

  • That is some pretty lighting!

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

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

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

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

  • 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!

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

  • The colors of the lights look pretty cool. Something like the bloom effect, in games, good job !

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

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

    It's running in low res, 640x360, and the Sampling is set to Point. Nothing fancy going on, it's just a sprite with a bullet behavior.

  • How can i get this effect? I really would like to use this in my project.

    Edit: After reading everything great job!! and when this is complete please let us all use this! i have been wanting to use lighting like this for a long time and is one of a few reasons my main project is on hold. Good luck on this effect!

  • How can i get this effect? I really would like to use this in my project.

    Edit: After reading everything great job!! and when this is complete please let us all use this! i have been wanting to use lighting like this for a long time and is one of a few reasons my main project is on hold. Good luck on this effect!

    It's definitely not ready for in-game use quite yet. It needs to be easier to set up and I want to see if I can put together a plugin that helps manage things a bit better, a kind of helper object that can be placed in the editor that will then generate lights at runtime. Otherwise, it's easy to lose track of which lights are static or dynamic/dynamic with different behaviors.

  • Thank you! please inform me when it is available for use.

  • Quick Update:

    Over the holiday break I've been spending some time getting the lighting working with some pixel art from an old project; looking at grey boxes is boring and with some art to use, I can spend more time getting things to blend properly and see what kind of features are really needed. This is still an early test, and all the lights are the same color, but it's a step closer towards having a workable lighting/shadow system that could actually be used in a game efficiently.

    To start, here's what the scene looks like with no lighting. The pixel art isn't very detailed, and is mostly made of flat colors.

    Here's how the lighting overlays onto each layer that's affected. There's 4 Paster objects on 4 layers. The light shapes/shadows get pasted into the Paster objects on each layer after different effects have been applied, to produce varying levels of blur/blending for each layer to help separate the lighting effects. The purple color is what the Paster objects are filled with before pasting the shapes/shadows in, and acts as the "shadow" color for the layer. By changing this RGBA value, each layer with a Paster object can have its own color for this value. The layers with the Paster objects are also set to render to their own texture ("Force own texture" in the Layer properties panel), and the Paster objects are set to the Source Atop blend mode - which confines their effect to only they layer that they're on.

    And when it all blends together, with the Paster objects set to Multiply on most of the layers, and Additive on the overall "bloom" layer.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)