Destroying a Spine game object and then switching scenes and adding a different Spine causes a rendering issue

[Stever1388]

Version

• Phaser Version: 3.86.0 and Spine 4.1

• Operating system: Windows

• Browser: Chrome, Edge, Firefox

Description

If you add a Spine game object to a scene, and then destroy it, go to another scene, and then try to add a different Spine game object ("different" in this case means a different key) to the scene, the texture that is used for the Spine will flash on the screen for a frame. I'm guessing there's a binding issue somewhere.

Example Test Code

The following code will demonstrate the issue:

export default class TestScene1 extends Phaser.Scene {
  create() {
    this.cameras.main.setBackgroundColor(0xffffff);
    this.testSpine = this.add.spine(500,500, "spine0");

    this.time.delayedCall(5000, ()=> 
    {
      this.testSpine.destroy();
      this.scene.start("Test2");
    });
  }
}

export default class TestScene2 extends Phaser.Scene {
  create() {
    this.cameras.main.setBackgroundColor(0xffffff);

    this.testSpine = this.add.spine(500,500, "spine1");
  }
}

Note that the Spines used in the 2 different scenes must be different ones, if you use the same key for both, the issue does not happen. Other ways to prevent it from happening:

1. If you add the TestScene1 Spine again in TestScene2 FIRST, when you add the other Spine, the issue won't happen.
2. If you don't call .destroy() on the Spine game object in TestScene1, the issue won't happen in TestScene2.

There are probably other ways to prevent it from happening. I tried a few different sets of our Spine objects and it's happening no matter what I use, but it's possible there is something in our Spines that causes the issue.

Additional Information

I wasn't able to test using Spine 3.8.

[Stever1388]

I'm also able to replicate the issue with this code:

export class TestScene1 extends Phaser.Scene {
  create() {
    this.add.spine(500,500, "spine0");
    this.add.image(300,300, "atlas", "frame")

    this.time.delayedCall(5000, ()=> 
    {
      this.scene.start("Test2");
    });
  }
}

export class TestScene2 extends Phaser.Scene {
  create() {
    this.add.image(0,0, "atlas", "frame");
    this.add.spine(500,500, "spine1");
}

Note that it only happens on the first switch between TestScene1 and TestScene2. If you go back to TestScene1 and then go back to TestScene2, it won't happen again.

Placing an image or a container (and possibly anything) after the Spine in the rendering order seems to cause the flicker.

[Stever1388]

I'm also able to replicate it with this:

export class Test0 extends Phaser.Scene {
  create() {
    this.cameras.main.setBackgroundColor(0xffffff)
    this.add.spine(500, 500, "spine")
  }
}

What's a bit odd is if I set the background color to be white via the game config (so that I don't have to set the background of the camera), it doesn't happen.

If I had to take a wild guess, I would bet that the binding of the texture is wrong somewhere, and it's binding the game render to the Spine texture for 1 frame, which causes the spine texture to display instead of the game.

I've also tested using Spine 3.8 and Phaser 3.86 and I don't see the issue, so the problem must be in the Spine 4.1 implementation.