Jump to content

Can't start pixi-spine example


Recommended Posts

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:

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

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);


new Skeleton

Can anyone help me? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...