Add a light type of entity for lighting effects

[eonarheim]

Context

It would be useful to have the ability to utilize dynamic lighting effects.

Proposal

Something like this

// x, y, radius, luminosity
var light = new ex.Light(100, 100, 10, 1);
game.currentScene.addLight(light);

[jedeen]

This might be worth looking at: https://github.com/gre/illuminated.js

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.

[luttje]

I hope you don't mind me bumping this old issue, but I'm looking for something like this. In the meantime while we wait I've got something that may help others looking to light their scenes.

I've conjured up a very cheap way to fake lighting:

This is the general process:

1. Overlay the game canvas with another canvas (#lightingCanvas), match the game canvas size and position
2. Paint the whole #lightingCanvas translucently black (this mimics darkness)
3. Ask all objects which type of 'light mask' they emit and where. Example mask:
   
4. Using globalCompositeOperation = 'destination-out' cut out the lit part from the darkness on the #lightingCanvas

Objects can register their lighting in their constructor like this:

const lightSprite = Resources.light_Spot.toSprite();
LightingManager.instance.on(LightingEventTypes.RegisteringLights, (ev) => {
  // This event handler is called everytime lighting is updated

  // Let this big light be drawn:
  ev.lightingManager.registerLight(
    new GraphicLightEmitter({
      pos: this.pos,
      graphic: lightSprite,
      scale: vec(5, 5)
    })
  );
});

I quickly made a little demo based on the platformer demo and it's custom-loader.ts shows how to light the whole screen on loading.

Of course it isn't realistic lighting at all, but for some style of pixel art it may just be enough.

I hope this helps someone.

[eonarheim]

@luttje Wow this is very cool!