Light cookies, using masks for retro lighting on tileset game

[Jammy]

Hi guys,

I've been making a game project recently which I wanted to add some relatively basic lighting effects to. I really struggled with anything I found online and basically everything seems broken. After researching alpha masking and texture rendering at runtime I've come up with a demo which finally puts the entire piece together so people can use it.

I really hope this makes a difference to peoples learning experience, their games and their appreciation for PixiJS.

I welcome any mods to the pen as I'm not the best at writing super hot JS, I just want it to work.

The demo includes moving a light cookie, changing its alpha, and overlaying a rectangle to emulate day/night - all which blend together nicely.

Quote

THIS REQUIRES NOTHING MORE THAN PIXIJS

The code can be found here: 

 

Thanks a lot guys,

Some footage inside a working game demo can be seen here:

And some more of my game concept can be seen here: 

 

This is the effect it has when used as lighting in my game, keeping in mind i have extra shadows on the tileset:

 

 

Jammy.

 

Edited March 26, 2017 by Jammy
Added video to show demo in game, added screenshot to show effect in game

[ivan.popelyshev]

nice, i have a plugin for that kind of effects: http://pixijs.github.io/examples/#/layers/lighting.js, it uses only blendmodes, no masks. the only problem might be interaction, you have to set interactiveChilren to false for all lights.

the difference is that you can add the lights wherever you want, as a child for a character too. when you remove character, light is removed automatically, because its his child. ill add more demos later, including deferred rendering. 

i understand that some people want "pure" pixi, but i will fight for that plugin to be included into the core.

ill add your demo as a reference to the guide ill write later, "without layers" vs "with layers"

also, regarding tilemap, if you see some problem with performance, you can use pixi-tilemap. its low-level tool, it wont restrict you to some preset algorithms. works like graphics - when your camera hits the edge of buffered part, just clear and fill it again. doesnt use extra videomemory, except packing 4 tilemaps into one to get more of them working silmultaniously

[Jammy]

Hi ivan, thanks for the tips I'll check out tilemap as I do need any perf gains I can get!

I did try pixi-layers but it appeared to have a conflict with pixi-display which I had already been using in the project to good effect.

 

[ivan.popelyshev]

pixi-layers is better version of pixi-display, you just have to use different name of classes, and actually create layers where certain elements will be rendered. pixi-display detects the place of virtual placement of elements automagically, and it does not work with filters/masks.  The changes in API were caused to support the lighting that you use, when you know which element must render lights inside.

[que]

This looks neat, but I'm not able to get the pen working. Is it still working for you, or is something missing?

I'd like to create something like this as well, to keep it super simple.