Lights breaking with sprite depth & text

[davidsmorais]

Version

• Phaser Version: 3.55.2
• Operating system: Windows 11
• Browser: Brave Browser (Chromium)

Description

hey guys 👋 I'm having some issues with lights on the game I'm building as you can see in this clip 👇 https://imgur.com/a/REqLiLG

Clip has two parts, one with the text in the HUD (top right corner) the other without. Both have an issue when starting the game scene, but now everything is breaking, and it can be solved by removing the text from the hud (second part)

• it started off with the weird flicker some time ago when I added lights. I assumed it was because I'm adding lights to alot of entities on the map by itterating through tiled layers
• now, I've added text (see top right corner), and the light is completely broken on the player sprite and also on some objects

I've noticed that if I remove depth from the player sprite, it fixes the light for the player, but not for the objects when I remove the text, it works, but the initial flicker is still there

Example Test Code

HUD (top right corner with text)

If I remove the this.scene.add.text() part, the lighting issue goes away, but the flickering remains

    this.sprite = {
      collectible: this.scene.add
        .sprite(origin.x, origin.y, "obj")
        .play({ key: spriteName, frameRate: 0, startFrame: 0 })
        .setScale(0.25)
        .setScrollFactor(0),
      text: this.scene.add
        .text(origin.x, origin.y + 8, "0", { fontFamily: "OldWizard" })
        .setScrollFactor(0)
        .setScale(0.25),
    };

Player

If I remove setDepth(1) the most recent issue goes away, but I need depth.

    this.sprite = scene.physics.add.sprite(x, y, spriteName);

    this.sprite.setDepth(1).setPipeline("Light2D");
    this.light = scene.lights.addLight(x, y, 32 * 4).setIntensity(1);

Sphere Object

In the GIF, you can see that the sphere's lighting is completely broken on the first part.

      const sphere = spheres
        .create(sphereObject.x, sphereObject.y - 32, "sphere")
        .setOrigin(0, 0)
        .setScale(1)
        .setDepth(1)
        .setPipeline("Light2D");
      const light = scene.lights
        .addLight(sphereObject.x, sphereObject.y, 32 * 2, 0x53ca3c)
        .setIntensity(1);

Additional Information

https://imgur.com/a/REqLiLG

[photonstorm]

This needs boiling down into an example we can actually run I'm afraid. If it's as simple as a sprite + some text and a light, it should be easy to create one, but I suspect it's actually more involved than this.

[davidsmorais]

I'll try to replicate it on a Codepen as soon as I get home :)

[davidsmorais]

I've been trying to replicate this issue with the provided examples. Indeed, it is not as simple as "sprite + some text and a light" as that seems to be working, using the examples as a base.

I've removed all lights except for the player sprite & the scene lights by leaving this in my Scene 👇

    this.lights.enable().setAmbientColor(0x333333);

My player light is following the player sprite. If I comment that part out, I can see that the issue is happening because of this same light not properly displaying over my sprite.

Regarding the sprite, I'm using an Aseprite atlas to render mostly everything in this game, I've read somewhere that this could be an issue as lights and sprites are currently broken, but this was about a previous version and the last coment is from November.

I'm not very experienced in dealing with WebGL, and I think that trying to replicate this on an outer repo will not bring any results, so if anyone's willing to look into this, I'm willing to provide access to my repo.

[davidsmorais]

@photonstorm i've closed this by mistake 🤦

[ubershmekel]

Thank you for reporting this. Luckily for you, I'm working on a game jam so have a very small repro. Unlucky for me that I'm running out of time to make a game 😝 . Try to drag the cards around here:

https://ubershmekel.github.io/phaser-light-depth-bug/

You'll see the card changes into the cubicle texture. I did not implement that behavior. Also, it stops happening after one time.

If you comment out the setDepth call at https://github.com/ubershmekel/phaser-light-depth-bug/blob/77b86b2e07d67b3845951c9a548163b3046e5755/src/obj-card.ts#L61 then the texture does not get swapped and everything seems to be working fine.

To mess with https://github.com/ubershmekel/phaser-light-depth-bug locally you should:

1. Clone the repo
2. npm install
3. npm run dev
4. Open http://localhost:3000

Another issue that I found was that if I create images in the wrong order, then the normal map will be the wrong texture.

[ubershmekel]

https://github.com/photonstorm/phaser/issues/5476 is probably the same issue as this one.

[davidsmorais]

@ubershmekel Thanks for keeping this one alive :+1: If it helps for your game jam :arrow_down: my 'patch' has been to avoid using setDepth and rendering the sprites/textures in the correct order

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

Just to add - I pulled down the phaser-light-depth-bug repo, updated to phaser@beta version and ran it and it works fine now.

[davidsmorais]

Awesome news !! Thanks 👍