Making an advanced lighting system

23

Index

Contributors

Stats

11,355 visits, 26,235 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 3 Jun, 2019. Last updated 24 Jun, 2019

The idea💡

Before we move forward I need to explain the idea behind the system.

Additive canvas

In this system I render the light on a canvas. Since pasting without effects doesn't need the object to be visible, it makes it possible to keep the shadows invisible and with disabled collisions so they take as little processing power as possible.

The canvas needs to be set to additive since it needs to render "like a light", but a good thing about additive is that you can draw black shapes on it, and it will act as a mask, and cut the light at that place.

Since the additive is per canvas object instead of on the whole layer, it allows each light to have its own set of shadows without affecting other canvases.

That way, we need to paste the light circle object, then paste the black shadowlight object to cut all of the shadowlight shadows, and then we loop through every shadowcaster object, position a shadow where needed and paste the shadow with a black tint to cut every shadow on the canvas.

If we disable the additive mode, the lights look like that:

Object pooling

Something that is done to make the system more efficient is the use of pooling.

Instead of creating and deleting shadow instances on every frame, or creating and deleting them when needed, we create a pool of shadow objects, and never delete them. Since the objects are invisible, have disabled collisions and don't get looped through when unused, they don't eat any CPU power.

That saves a few FPS since creating and deleting often affects how well the game runs.

That also allows us to setup shadows once and to be able to use them immediately when taken from the pool without the need to setup anything else.

Built in tint

I used C3's built in tint a lot in this system. A few things to note is how the tint actually works.

Any value below 255 will subtract to the color channels, so a tint of 0,0,0 will set the sprite to black. I use that when setting up the shadows.

Values above 255 however will add to the color channels, making the sprite actually tinted.

A tint of 255, 255, 255 is the default sprite's tint. A tint of 255,255,350 will give the sprite a blue tint. A tint of 0,0,255 will make the sprite 100% blue and black.

Blur effect

The blur is the best looking part of the system and yet the idea behind it is very simple.

First you paste the shadow once with a lower opacity, and then you loop over each angle of the blur, and paste the shadow again with that angle offset on each side, and with a lower opacity. This is what the blur would look like with a step of 5° when looping over the angle offset.

  • 3 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • This great! Thanks!

  • trying to follow your tuto, great so far but I'm confuse on the page 5:

    OBJECT POOLING and PLACE THE SHADOW screencap don'tseem to show the same nested script.

    On the first one you see the event showcaster>>> pick instance with UID=uid with direct action linked to it and other events following (not sub event) and in the 2nd screenshot you see that the condition showcaster>>> pick instance with UID=uid has some other sub event.. which one is correct?