Flashlight - Shadow Casting Plugin

1

Index

Stats

7,451 visits, 14,000 views

Tools

Translations

This tutorial hasn't been translated.

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 20 May, 2018. Last updated 19 Feb, 2019

Creating shadows

It is possible to use Flashlight in many different ways depending on the effect and appearance you want in your game. I am just going to highlight what I think are probably the two most likely options you are likely to use. One of them offers very good performance, allowing you many different Flashlight objects to be drawn on-screen at any time, and the second method is more demanding on the GPU but the overall effect is.

Use alpha blend

The c2 WebGL is very good at rendering a large number of objects at any one time. The simple use of alpha blend can give good performance results on moderate hardware with a reasonable effect quality. Quite simply, the Flashlight object is created with Alpha Blend set and the opacity varied during test until it achieves the desired effect. Here’s an example of what that might look like:

Use multiply effect

This is similar to the method used in the multiple colored lights Shadow Light template provided with c2. The ground layer is placed above the Flashlight layer and is given the Multiply effect. The next layer is the bottom layer and it is given a background color of medium grey to provides enough illumination to the ground layer (the Multiply effect uses this as the ambient light setting). Flashlight objects that are drawn on the bottom layer (with Additive blend an option) add to the brightness and color of the ground layer. This is a very effective way to get realistic shadow and light effects. The only down-side is that it is demanding on the GPU. The plugin’s example capx has both methods so you can compare their performance and quality of appearance. Here’s an example of the use of Multiply effect:

  • 9 Comments

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