Lighting using Phaser

[0penS0urce]

I'm trying to find out how I can achieve lighting in Phaser. I've looked into the Illuminated.js framework for Phaser, but it's a bit to limited for what I'm trying to do, like colored lighting. Then I found filters, but I didn't know how to achieve lighting using them. Is it possible to use GLSL shaders to get things like colored lighting with lengths and intensities? Could I dynamically create these shaders as I spawn objects through out the world? And, as the game world moves, do the filters move with them, or could I possibly attach filters to sprites? I know there are a lot of questions, but thanks for your help?

[hexus]

Illuminated.js does support colours. Play with the demo some more.  Maybe the Phaser plugin doesn't though, I'm not sure. I considered using it for a long time but I'd personally rather harness the power of WebGL.

I've been working on a lighting system that does exactly this recently though, it's totally possible to use shaders for this. It's just a bit awkward working with Phaser filters and old Pixi v2 filters to get things to render.

This is the way I'm intending it to work:

• Currently visible light objects in the game world are given to a Phaser filter (it's actually not a filter in my case currently but will be eventually)
• The filter uses a shader to render each light to a render texture, using diffuse/normal textures rendered from the currently visible game world
• Awkwardly use another filter with a basic diffuse shader that can render this resulting texture in front of the game world

There is more to it than that, because I'm also doing shadow mapping, but that's the gist of it. Ultimately I've found it's pretty effective to attach a filter to the game world and adjust the shader uniforms based on object - camera positions to get the 0-1 values used in fragment shaders.

The real pain for me right now is not having access to a filter's resulting texture. I want to reuse a single light filter/shader for every light instead of creating a filter for every single light, and there's a wasteful render of the scene before everything I mentioned above takes place.

Here's a little 2D light shader I made on shader toy that I've been adapting heavily for my current project:

https://www.shadertoy.com/view/MsyXz3

[drhayes]

Cool! If this becomes a plugin please let us know.

[hexus]

3 hours ago, drhayes said:

Cool! If this becomes a plugin please let us know.

Will do! If I do ever make it a plugin it might be difficult to tailor such a thing to different games; there are so many ways of doing things like this. But if I get comfortable with a solution, I'll be sure to!

Only problem I'm facing with this approach right now is performance at large resolutions with many lights, this "problem", and colour banding.

[Cudabear]

A while ago I made a library for using Illuminated.js in Phaser: https://github.com/Cudabear/phaser-illuminated

You're totally right though, Illuminated.js is extremely limited in functionality.  And, the way it renders things on temporary canvases makes things extremely slow if you have dynamic lighting that changes every update loop.  I kind of ditched it because of these problems, ideally we'd need something from the ground up.  I look forward to your work, hexus!