Invisible spine game object in an added scene causes the first image to be rendered wrong

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.js"></script>
    <script src="https://unpkg.com/@esotericsoftware/spine-phaser@4.2.*/dist/iife/spine-phaser.min.js"></script>
    <link rel="stylesheet" href="../../index.css" />
    <title>Spine Phaser Example</title>
  </head>

  <body class="p-4 flex flex-col items-center">
    <h1>Basic example</h1>
  </body>
  <script>
    class AddedScene extends Phaser.Scene {
      preload() {
        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
      }

      create() {
        const spineboy = this.add.spine(
          400,
          500,
          "spineboy-data",
          "spineboy-atlas"
        );
        spineboy.scale = 0.5;
        spineboy.animationState.setAnimation(0, "walk", true);

        spineboy.setVisible(false);
      }
    }

    class BasicExample extends Phaser.Scene {
      preload() {
        this.load.image("asdf", "asdf.png");
      }

      create() {
        const image = this.add.image(0, 0, 'asdf').setOrigin(0);

        this.game.scene.add('AddedScene', AddedScene, true);
      }
    }

    const config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      type: Phaser.WEBGL,
      scene: [BasicExample],
      plugins: {
        scene: [
          {
            key: "spine.SpinePlugin",
            plugin: spine.SpinePlugin,
            mapping: "spine",
          },
        ],
      },
    };

    const game = new Phaser.Game(config);
  </script>
</html>

Expected result: the image at the top left corner is 'asdf.png'

What actually happened: the image at the top left corner is the spineboy png image

If you do not set the spineboy to be invisible, then the image will be rendered correctly

    Related Discussions
    ...

    The issue you're experiencing with the Spine object affecting the rendering of your image in Phaser is likely related to how the rendering context is being managed when the Spine object is set to invisible. When you set a Spine object to invisible, it might still affect the rendering pipeline, especially if there are issues with how the rendering context is reset or managed between different objects. This can lead to unexpected results, such as the wrong image being rendered.

    To address this, you can try the following:

    1. Ensure that the Spine object is properly removed or its rendering context is reset when it is set to invisible. This might involve explicitly managing the rendering order or context switching in Phaser.

    2. Check if there are any updates or known issues with the version of the Spine Phaser plugin you are using. Sometimes, updating to the latest version can resolve such issues.

    3. Consider using WebGL rendering if you are not already, as it provides better support for complex rendering tasks and might handle context switching more gracefully.

    4. If the problem persists, you might need to look into how the Spine plugin integrates with Phaser's rendering pipeline and see if there are any specific settings or configurations that need to be adjusted.

    These steps should help you troubleshoot and potentially resolve the rendering issue you're encountering.

    Thanks for reporting this. I've tried our local examples that pin Phaser version to 3.60, and the issue does not occur.
    However, as you reported, when pointing to a higher version, the issue occurs.

    I've opened an issue on our GitHub tracker here. I'll update that issue when I've found the source of the bug and report back here once a new version with the fix is available.

    peterlee

    It was very easy to detect the bug, but eventually we found it. We fixed this in 4.2.75. Since your code point to the latest patch of 4.2, it should be just enough to refresh the page clearing the cache (ensuring to get 4.2.75).

    Thanks again for reporting this. I'm sure others have found the same issue (without reporting it unfortunately).