Spine documentation for PixiJS

[palanolho]

Hi everyone,

I'm starting to play with Spin and I was looking for the PixiJS documentation regarding spine, but I can't find it anywhere (like  in here http://pixijs.download/release/docs/index.html)

Does anyone know where I can find such documentation? like references to the properties, methods, events, etc...

 

Many thanks  in advance

[ivan.popelyshev]

Pixi integration solutions are here: https://github.com/pixijs/pixi-spine/tree/master/examples

Pixi spine runtime is based  on https://github.com/EsotericSoftware/spine-runtimes/tree/3.6/spine-ts , so everything except work with textures can be learned there.

[jonforum]

also api guire here 

http://esotericsoftware.com/spine-applying-animations

[palanolho]

Many thank for the links.

Just to clarify, I didn't see anything on the pixi examples related to spin the need to include any particular libraries or plugins. This means that spin support is available "out of the box" correct ?

[ivan.popelyshev]

https://github.com/pixijs/pixi-spine/tree/master/bin

[palanolho]

On 6/6/2018 at 4:51 PM, ivan.popelyshev said:

https://github.com/pixijs/pixi-spine/tree/master/bin

@ivan.popelyshev (or anyone else who may know the answer) 

Sorry to ask again, but I downloaded the files you mentioned and included them on my html file, but I'm getting an "Uncaught TypeError: Cannot read property 'Spine' of undefined" on the line below (I'm pretty much copying the example and I have also downloaded and included the spineboy files in my project)

PIXI.loader
.add('spineboy', 'images/spine_animations/spineboy.json')
.load(onAssetsLoaded);

function onAssetsLoaded(loader, res) {

    var spineBoy = new PIXI.spine.Spine(res.spineboy.spineData); // <----- on this line

    var spineBoy = new PIXI.spine.Spine(res.spineboy.spineData);
    spineBoy.x = app.screen.width / 2;
    spineBoy.y = app.screen.height /2;
    spineBoy.interactive = true;
    spineBoy.buttonMode = true;

    // set up the mixes!
    spineBoy.stateData.setMix('walk', 'jump', 0.2);
    spineBoy.stateData.setMix('jump', 'walk', 0.4);

    // play animation
    spineBoy.state.setAnimation(0, 'walk', true);

    app.stage.addChild(spineBoy);

    spineBoy.on('pointerdown', function() {
        spineBoy.state.setAnimation(0, 'jump', false);
        spineBoy.state.addAnimation(0, 'walk', true, 0);
    });
}

Also, do you think you could explain why in the spine example, the "onAssetsLoaded" include the "loader" and "res" in the arguments? what are they user for what are they exactly?

 

Many thanks in advance.

PS: don't know what happened but after adding the post the code snipper got broken and cant add the proper highlight

[ivan.popelyshev]

how exactly did you included "pixi-spine.js", before or after pixi.js?

Those params are the same as for every loader-based example in pixi. Loader itself and its "loader.resources". Also beware that you can call load process only one time for one loader, you can reset it later but it'll lose all the resources. Make sure you add everything you need and only then call the load function.

[palanolho]

ok I was able to sort it out. I think it was something incorrect on the file I downloaded (maybe I didn't download the raw version...).

 

So now I'm having a problem with the "res.spineboy.spineData". He doesn't know what the "res" is (or it's rather undefined).

I have 2 loaders in my project. one for quick assets for the "loading screen" and the default everything else. Is that the problem?

Is there any other way to load it?

(I tried the example below but it complains that "The spineData param is required."

new PIXI.spine.Spine(PIXI.loader.resources["spineboy"].spineData);

 

[ivan.popelyshev]

It should work. dig more.

[palanolho]

OK found the issue... again, the files I downloaded were not the raw ones... >_>.

Thanks for the help