Creating basic lighting system

[cseibert]

Hey again, I'm trying to create a basic lighting system in my game.  Currently, I have a transparent PNG with blank pixels for places the player can't see through, and transparent for the flashlight.  This works pretty good, but I'm going to run into an issue when I have multiple players' flashlights on the screen at once. 

Is there an easy way to take all of these transparent PNGs and merge them together to create a single png for my lighting?  I read a tutorial related to using bitmasks, but it was for phaser2.  

What is the best way to achieve multiple flashlights?  I saw that phaser3 has a lighting system, but I wasn't sure how complicated it would be to setup without having to define bump masks for all my sprites / tiles.

 

 

[NoxBrutalis]

As far as I can tell, the lights aren't working in phaser 3, well, I tried to make one and it wasn't working. On a side note though, the docs only list a point light, type of light, so I don't think you would be able to have a cone/torch like you have in the pic even if it does work. I had a look because I've used glsl  - open gl shader language before, and lighting is the kind of thing you can implement in shaders, but the example for the effects layer - Phaser's way into gl shader land, isn't working so it's probably best that you stick to your current approach.

In regards to that, is there a way you can have the server keep track of the position, origin and rotation, or something like that, and pass that to the clients when they're in range of each other to see? Basically the same as you're doing, with a couple more data. Otherwise, what problem do you see arising from the multiple lights - that it's too intensive?  the rotation would just be the same as the players, the position would be a small offset value of the player's position, and the origin would possibly be the same on all your player torches, so you could assume, it will be 0, 0, or centre, which means you don't even have to track the info, it's all possible to work out from the player that owns the torch. Maybe a bool to say whether it's switched on or not.

[cseibert]

The issue is I'm not sure how to achieve it.  If I combine them both, I get a darker scene.

[cseibert]

I read something that I should somehow combine all my light images together using an "additive blend mode", and then draw it on top of my scene using a "multiply blend mode"....  I have no clue how to combine those light images together into a single images with phaser3 =(

[NoxBrutalis]

Okay, so an additive blend mode is one where the colour that you're adding to an image is added to the existing colour, whereas a multiplicative blend multiplies it. So the problem is that your light cone is transparent, not white. if your scene had a layer of darkness separate from the lightcone image, and your lightcone image used white, then you could use additive blending and the white from your light would be added to the darkness beneath, negating it. 

So you light cone should be white, or a light yellow or something, surrounded by transparency. 

Does that make sense?

here's a link to a phaser blog about custom blend modes. I don't know if this stuff is working or not, but could be worth a shot, and at least hopefully you get what I mean now, though feel free to ask more questions. Sorry it took me so long to get back to you btw ?

https://phaser.io/phaser3/devlog/92

[cseibert]

Thanks for the help.  I changed the light to be white like you recommended, and that seemed to have fixed it! 

Note, I also had to do the following approach in order to get multiple flashlights on the same scene:

• I created a texture called 'lights'
• set the context operation to 'lighter' (same as add)
• draw my flashlight images
• create a new phaser3 image based on that texture key 'lights'
• set the blend mode to multiply

Question: the context.drawImage needs an html DOM image, but I wasn't sure if a phaser3 images would work or not.  Is there a better way to do what I did?

// There has to be a better way to load the HTML dom image in phaser3 instead
// of this approach:
window.flashlight = new Image();
window.flashlight.src = '../assets/flashlight2.png';
window.flashlight.addEventListener('load', () => {
  const game = new Phaser.Game(config);
});


// inside my create function
this.lights = this.textures.createCanvas('lights', 1600, 1600);
const context = this.lights.context;
context.globalCompositeOperation = 'lighter';
context.drawImage(window.flashlight, 0, 0);
context.drawImage(window.flashlight, 0, 200);
context.drawImage(window.flashlight, 0, 100);
this.lights.refresh();
this.lightsImage = this.add.image(0, 0, 'lights');
this.lightsImage.blendMode = Phaser.BlendModes.MULTIPLY;

 

[cseibert]

Final update... I managed to get most of this working as desired.  Inside my update method I loop through all my player objects, and render the flashlight at the player's location:

 

// somewhere inside update
const context = this.lights.context;
context.clearRect(0, 0, 1600, 1600);
for (const player of state.serverState.players) {
  const positionX = player.x - this.player.x + 800;
  const positionY = player.y - this.player.y + 800;
  context.save();
  context.translate(
    positionX,
    positionY,
  );
  context.rotate(player.rotation);
  context.drawImage(window.flashlight, -800, -800);
  context.restore();
}
this.lights.refresh();