Cant load Spine Animation in Phaser Editor

Question

I just purchase Phaser Editor and trying to add an Spine Animation to my game from ,.Atlas and .skel file. Here is link to my file :GGdrive After add those 2, phaser editor seem to cannot load it. My screen just look like this and nothing happen.

Does anybody have same problem? what did i do wrong, please let me know. Thank winner_joiner alot. can i aske you how can i add SpinePlugin pack like you do in super(), because when i try to add to index.html through CDN, it doesnt work. Here my code i added in index:

<script src="https://cdn.jsdelivr.net/npm/phaser/plugins/spine/dist/SpinePlugin.min.js"></script>

<script 
src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-phaser.js">
    </script>

Answer 1

I don't know why in the phaser editor it doesn't display anything, since I don't have the editor, and I don't know your code. Maybe there is an error in your sourcecode. In any case the following code should work:

class Example extends Phaser.Scene {
    constructor() {
        super({
            pack: {
                files: [
                    { type: 'scenePlugin', key: 'SpinePlugin', url: 'SpinePluginDebug.js', sceneKey: 'spine' }
                ]
            }
        });
    }

    preload() {
        this.load.setPath('/');
        this.load.spine('berseker', 'berseker.skel', ['berseker.atlas'], true);
    }

    create() {
        this.add.spine(400, 600, 'berseker', 'idle', true);
    }
}

const config = {
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

As long as all files are in the same folder.

+- [WebRoot]
+- index.html
+- app.js
+- beserker.skel
+- beserker.atlas
+- beserker.png

Update / An Alternative:

If you want to use spine-phaser.js, you will have to rewrite your code:

Load the plugin from the html-file:

<script src="phaser.min.js"></script>
<!-- Load the plugin script after loading phaser -->
<script src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-phaser.js"> </script>

Load the spine file separately and start the animation with a seperate call

class Example extends Phaser.Scene {
    constructor() {
        super();
    }
    preload() {
       // --> Loading the Files Seperate
       this.load.spineAtlas('set1-atlas','berseker.atlas'); 
       // depending on if you have a binaray or json you mist use different function
       this.load.spineJson('set1-data', 'berseker.skel');
    }
    create() {
        // Creating the gameobject
        let beserker = this.add.spine(400, 600, 'set1-data', 'set1-atlas');
        // example starting animations
        beserker.animationState.setAnimation(0, "idle", true);
    }
}

Load the plugin in the gameConfig:
(In genereal you can always load plugins in the gameConfig)

const config = {
    scene: Example,
    // Load the plugin from the game config
    plugins: {
        // here spine.SpinePlugin is a Object/function from teh loaded plugin
        scene: [
            {  key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
        ]
    },
};

const game = new Phaser.Game(config);

Code is loosely based on the official Spin2D github repo example

Update: added the comple code snippets into this github Repo