Why doesn't this run in the JS environment?

Nepster

Hello.

I want to check spine with base character in js environment. I took base example:
(I used latest versions: "pixi-spine": "4.0.4", "pixi.js": "7.4.0")

import * as PIXI from 'pixi.js';
import { Spine } from 'pixi-spine';


const app = new PIXI.Application();
document.body.appendChild(app.view);

PIXI.Assets.load("./assets/spineboy2/spineboy-pro.json").then((resource) => {
    const animation = new Spine(resource.spineData);
    app.stage.addChild(animation);

    // add the animation to the scene and render...
    app.stage.addChild(animation);

    if (animation.state.hasAnimation('walk')) {
        // run forever, little boy!
        animation.state.setAnimation(0, 'walk', true);
        // dont run too fast
        animation.state.timeScale = 0.1;
        // update yourself
        animation.autoUpdate = true;
    }
});

And something seemed to go wrong.

Mario

Note that we do not maintain pixi-spine, but have our own runtime for Pixi called spine-pixi, examples of which can be found here

I'm afraid I can't quite tell why ou are not seeing anything in your test app. The most likely cause is a mismatch between the Spine Editor version you exported the skeleton from, and the Spine Runtimes version that pixi-spine implements and supports. I'm not up-to-date with pixi-spine and what is and isn't supported. I suggest you try our spine-pixi runtime instead.

Nepster

Mario, thank you for reply

interesting, I didn’t even immediately notice the difference between spine-pixi and pixi-spine.

I think I could figure out what was going on. The problem was in the coordinates relative to the scene and the character. The character was simply off scene.