Can't start pixi-spine example

[Southgarden116]

Hey guys!

I tried to start with the pixi-spine plugin to load my spine file. 

I followed the example from https://github.com/pixijs/pixi-spine and did this on app init:

PIXI.loader

    .add('spineboy', '/packages/app-client/src/static/images/avatar/spineboy.json')

    .load(this.onAssetsLoaded);

and my function onAssetsLoaded looks like this:

onAssetsLoaded = (loader, res) => {

     // create a spine avatar

     const avatar = new PIXI.spine.Spine(res.spineboy.spineData);

     // res of the code that is never reached

}

However, I get the error that spineData param is required and when I logged res.spineboy, I saw that the error param was logged with an error "Error: Error trying to parse loaded json: SyntaxError: Unexpected token < in JSON at position 0".
Then I guessed that webpack might be the culprit and I called require(jsonFile) which still gave me the same error "spineData param is required", but with no error in the error param of res.spineboy. 

Then instead of using the loader, I did this:

const jsonData = require('../../../../static/images/avatar/spineboy.json');

const avatar = new PIXI.spine.Spine(jsonData);

Which gave me a whole new error:

Uncaught TypeError: Cannot read property 'children' of undefined
    at new Skeleton

 3021 |     else {
  3022 |         var parent_1 = this.bones[boneData.parent.index];
  3023 |         bone = new core.Bone(boneData, this, parent_1);
> 3024 |         parent_1.children.push(bone);
  3025 |     }
  3026 |     this.bones.push(bone);

in 

new Skeleton

node_modules/pixi-spine/bin/pixi-spine.js:3024

Can anyone help me? 

[ivan.popelyshev]

For a long time, people came up with many ways to load spine files in a plugin. Most of the time when new user starts an app, he wants to modify loading process and of course there are questions like "how do i load it from webpack".

There are several examples in "examples" folder of pixi-spine repo and a number of webpack-related issues. 

spineData is not JSON, its the result of loading JSON+png file, special class with special methods. Please see https://github.com/pixijs/pixi-spine/blob/master/src/loaders.ts if examples and issues are not enough for you.

Unfortunately, if the issue doesnt go away through simple juggling with parameters, you have to debug it.

Prepare to open developer tools and see 

0. Are you sure that your file path is absolute, why is your link starts with "/" and not relative path
1. what exactly is loaded in your app
2. does your web-server supply necessary MIME TYPES for json and atlas files.
3. where is SpineData object formed

Sometimes my telepathy can tell what exactly are you doing wrong, but here its not working, sorry.

[Southgarden116]

Thank you so much for the quick reply!

This helped me: https://github.com/pixijs/pixi-spine/blob/master/examples/preloaded_json.md

now it works

[ivan.popelyshev]

Yay! Just one more person contacted me about "cannot read property xxx" and this time my telepathy worked, same issue as yours, and "preloaded_json" helped! Congratulations, you helped someone else!