Phaser: Spine plugin in 3.19 corrupts when switching scenes

[olilanz]

Version

• Phaser Version: 3.19
• Operating system: macOS
• Browser: Chrome, Safari

Description

Rendering and switching scenes worked fine in the Spine plug-in prior to 3.19. Since 3.19 the plugin seems to corrupt when switching scenes. The error I see is:

SpineWebGLPlugin.js:22315 Uncaught TypeError: Failed to execute 'getUniformLocation' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLProgram'.
    at Shader.window.SpinePlugin.Shader.getUniformLocation (SpineWebGLPlugin.js:22315)
    at Shader.window.SpinePlugin.Shader.setUniform4x4f (SpineWebGLPlugin.js:22311)
    at SceneRenderer.window.SpinePlugin.SceneRenderer.enableRenderer (SpineWebGLPlugin.js:22177)
    at SceneRenderer.window.SpinePlugin.SceneRenderer.begin (SpineWebGLPlugin.js:21761)
    at SpineGameObjectWebGLRenderer [as renderWebGL] (SpineWebGLPlugin.js:30765)
    at WebGLRenderer.render (WebGLRenderer.js:2072)
    at CameraManager.render (CameraManager.js:603)
    at Systems.render (Systems.js:402)
    at SceneManager.render (SceneManager.js:585)
    at Game.step (Game.js:491)

Example Test Code

The test code contains two almost identical scenes. When clicking on the button, the scenes are swapped. The spineboy renders well on the first scene. On the second scene, no rendering occurs. When switching back to first scene, the error occurs.

import "phaser";
import "phaser/plugins/spine/dist/SpineWebGLPlugin";

class Scene1 extends Phaser.Scene {

    constructor() {
        super({ key: 'Scene1' });
    }

    preload(): void {
        this.load.setPath('assets');
        this.load.image("imageBtnRight", 'button_right.png');
        this.load.spine("spineSpineBoy", 'spineboy.skeleton', 'spineboy.atlas', true);
    }

    create(): void {
        this.add.sprite(0, 0, "imageBtnRight")
            .setInteractive()
            .setPosition(50, 50)
            .setDisplaySize(50, 50)
            .on('pointerdown', function (this: Scene1) { this.scene.start('Scene2'); }, this);

            this.add.spine(200, 700, "spineSpineBoy", "idle", true);
            this.add.spine(500, 700, "spineSpineBoy", "run", true);
        }
}

class Scene2 extends Phaser.Scene {

    constructor() {
        super({ key: 'Scene2' });
    }

    preload(): void {
        this.load.setPath('assets');
        this.load.image("imageBtnLeft", 'button_left.png');
        this.load.spine("spineSpineBoy", 'spineboy.skeleton', 'spineboy.atlas', true);
    }

    create(): void {
        this.add.sprite(0, 0, "imageBtnLeft")
            .setInteractive()
            .setPosition(50, 50)
            .setDisplaySize(50, 50)
            .on('pointerdown', function (this: Scene2) { this.scene.start('Scene1'); }, this);

        this.add.spine(200, 700, "spineSpineBoy", "idle", true);
        this.add.spine(500, 700, "spineSpineBoy", "run", true);
    }
}

window.onload = () => {
    'use strict';

    let config: Phaser.Types.Core.GameConfig = {
        type: Phaser.WEBGL,
        plugins: {
            scene: [
                {
                    key: 'SpinePlugin',
                    plugin: window.SpinePlugin,
                    mapping: 'spine'
                }
            ]
        },
        scene: [Scene1, Scene2],
        scale: {
            parent: "game-canvas"
        }
    };

    let game = new Phaser.Game(config);
    game.scale.resize(window.innerWidth, window.innerHeight);
}

Additional Information

For convenience, the repro can be obtained from the following repo/branch: https://github.com/olilanz/mini-game/tree/spine-repro

To run it:

npm i
parcel ./src/index.html -p 1234

[cristlee]

Have the same issue

[gastonkirsman]

Same issue here !

[DCoin]

Is it possible to get an estimate on when this will be fixed?

[photonstorm]

Sorry, no, I don't give time estimates any longer. All I can say is that the 3.20 release will contain fixes for it. Keep an eye on commits in the coming weeks.

[DCoin]

Sorry, no, I don't give time estimates any longer. All I can say is that the 3.20 release will contain fixes for it. Keep an eye on commits in the coming weeks.

Still good to know it is being looked at. Thank you.

[RichardSneyd]

Having the same issue, good to see I'm not the only one, and that it's beeing worked on.

[olilanz]

@photonstorm, do you need more from us in terms of isolating the issue, or do you have all you need to repro?

[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.

[olilanz]

Great! It works now. Thank you!

NOTE: The new phaser spine plugin uses the spine runtime version 3.8. As the spine runtime 3.8 is not backwards compatible, using the new phaser spine plugin requires upgrade of existing animations using spine 3.8. Otherwise it won't work.

[paweltank]

hi!photonstorm
I've same issue.
I'm using spine plugin and it's working well.
But after restart the scene it's not working with errors.
Please help me!