Light / shading only works from one side

Phaser 3
1

Hello, I am having issues with lighting my sprite up using my torch object. That is, when I set the light at the same spot as the torch, the model will light up facing left. Then I flip the “container” to the right using a negative scalex value, and the player goes black (i have tested with flipx and same thing). I have also tested flipping all images in the container using negative scalex and flipx, same results. If I set the light source on the left side of the player, and don’t have the light follow the torch, my character will light up from both sides. Does anyone know what might cause this, or how I can fix this?

Some extra info, I am using dragonbones plugin to generate the model, which I am not sure how to add a “normal map” for. I think this might be part of the issue, but I am not sure why it would light up facing left if this was the case. Playing around with the code, I found a workaround for the missing normal map. If I do not add this code, the image will not show up at all.

$player.getAll().forEach(function(img:Phaser.GameObjects.Image){
                img.texture.dataSource.push({}); //required for image to show with 2d pipeline
                img.setPipeline('Light2D');            
            });

Torch facing left (works)
left_torch
Torch facing right (doesn’t work)
right_torch

Light source on left (works)
left_notorch
Light source on left facing right (works)
right_notorch

2

incase someone else runs into this issue, I found a workaround for my case.

The issue was related to not having a real normal map. So, I created a simple normal map to apply to my object. I load this in as an image, then I extract the datasource from it to apply to the textures.

var fakemap = this.add.image(0,0,'fakemap');
            var texture  =  fakemap.texture.dataSource[0];

            $player.getAll().forEach(function(img:Phaser.GameObjects.Image){
                if(img.texture) {
                    img.texture.dataSource.push(texture);
                    img.setPipeline('Light2D');
                } else {
                    (<any>img).getAll().forEach(function(img2:Phaser.GameObjects.Image){
                        if(img2.texture) {
                            img2.texture.dataSource.push(texture);
                            img2.setPipeline('Light2D');
                        }
                    });
                }              
            });

            fakemap.destroy();
1 Like