Jump to content

Light cookies, using masks for retro lighting on tileset game


Recommended Posts

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.



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:






Edited by Jammy
Added video to show demo in game, added screenshot to show effect in game
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...