oler

The spineData param is required !! in pixie-spine project. HELP HELP

Recommended Posts

using PixiJS 4.8.1 and pixi-spine https://github.com/pixijs/pixi-spine/     I am getting " The spineData param is required" . this is ridiculous, because I am just doing the basics and I have read thousands of articles including the examples here : https://github.com/pixijs/pixi-spine/tree/master/examples

and cannot find  what is wrong. can someone help please???

 

Its giving me error: " The spineData param is required "   at the line :  var test = new PIXI.spine.Spine(loader.resources["main"].spineData );

 

var size = [window.innerWidth, 700];
var ratio = size[0] / size[1];

 //Create a Pixi Application
var app = new PIXI.Application({width: size[0], height: size[1]});

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);


var stage = new PIXI.Container();

// load spine data
PIXI.loader
    .add('main', 'required/assets/scenes/arena/skeleton.json')
    .on("progress", loadProgressHandler)
    .load(onAssetsLoaded);

stage.interactive = true;



function onAssetsLoaded(loader, resources){

	 var test = new PIXI.spine.Spine(loader.resources["main"].spineData); <---------The spineData param is required!!!

	//PIXI.loader.resources["main"]
	

	app.stage.addChild(test);


	app.stage.on('pointerdown', onTouchStart);

	

	app.start();

console.log("setup");

}

 

Share this post


Link to post
Share on other sites

Can someone  help please??? I have spend the last 5 days reading and reading and reading to no AVAIL. I have finally reached breaking point. Any good samaritans there??

Share this post


Link to post
Share on other sites

I have also used the variation in the form :

var test = new PIXI.spine.Spine( resources.main.spineData )

 

 

Stiil same error. this sucks!!

 

what is the spinData seen in all the examples with NO SINGLE explanation ?

Full chrome error :

pixi-spine.js:6793 Uncaught Error: The spineData param is required.
    at new Spine (pixi-spine.js:6793)
    at onAssetsLoaded (index.js:22)
    at t.value (pixi.min.js:8)
    at e.t._onComplete (pixi.min.js:9)
    at pixi.min.js:9
    at s (pixi.min.js:9)
    at e.atlasParser (pixi-spine.js:6647)
    at pixi.min.js:9
    at pixi.min.js:9

 

 

Share this post


Link to post
Share on other sites
5 hours ago, jonforum said:

can you send a printScreen of your spine data when you console.log ? 

image.thumb.png.e422f1b0a58713f4a36bad175d858f97.png

You seem doing nothing wrong for me.

you can also try use 

 


    loader.onProgress.add((loader, res) => {
        if(res.extension.contains("json")){
}

    });

 

Hello thank you for responding kind soul, I am really grateful. I am under immense pressure to get past this basic set and a lot of code to write. Here is the spineData in console log output...seems its not defined:


    PixiJS 4.8.1 - ✰ WebGL ✰      http://www.pixijs.com/    ♥♥♥ 


index.js:44 loading: main
index.js:47 progress: 100%
index.js:49 Uncaught ReferenceError: spineData is not defined
    at e.loadProgressHandler (index.js:49)
    at e.o.emit (pixi.min.js:8)
    at pixi.min.js:20
    at t.value (pixi.min.js:8)
    at pixi.min.js:9
    at s (pixi.min.js:9)
    at e.atlasParser (pixi-spine.js:6647)
    at pixi.min.js:9
    at pixi.min.js:9

 

From my spine exports output I have :

skeleton.atlas

skeleton.json

skeleton.png

 

I thought loading the json imports all the other url and objects ??

Share this post


Link to post
Share on other sites
5 hours ago, jonforum said:

loader.onProgress.add((loader, res) => { if(res.extension.contains("json")){ if(res.spineData){ const spine = new PIXI.spine.Spine(res.spineData); } }; });

Please where is this supposed to go in my sample code structure?

Share this post


Link to post
Share on other sites
5 minutes ago, ivan.popelyshev said:

it should work. the problem is somewhere in your web-server, open "networking" tab in your browser (chrome or firefox) and see if json file was actually loaded.

Hey there, thank you for your response. Only skeleton.json is loaded in the network tab....the atlas and png objects/files are non-existent in browser

Share this post


Link to post
Share on other sites
30 minutes ago, ivan.popelyshev said:

are there any problems with cross-origin? if XMLHttpRequest fails, then pixi-spine cant do anything.

No problems  with cross-origin at all, the json loads fine. I am using chrome server plugin

Share this post


Link to post
Share on other sites

can you try something like this

 var stage = new PIXI.Container();
 // load spine data
 const loader = new PIXI.loaders.Loader(); // create new loader
 const name = "main";
 const dir = "required/assets/scenes/arena/skeleton.json"; // plz check it correct path
 loader.add(name, dir); 
 loader.load();
 
 loader.onProgress.add((loader, res) => { // onprogress executed  once each file loaded
     console.log('res: ', res);
     if(res.extension.contains("json")){
         console.log('res.spineData: ', res.spineData); // if undefined , your path are wrong.
         if(res.spineData){
             const spine =  new PIXI.spine.Spine(res.spineData);
             console.log('spine: ', spine);
          }
     }
 });
 
 loader.onComplete.add((loader, res) => { // execute once when all file loaded
     console.log('res: ', res);
     // this loader finish
  });

you can also have a buggy spine.
Try to build a new atlas,json, from the software spine with the last version.
What version of sofware you used for build your spine ?
 

Share this post


Link to post
Share on other sites
17 minutes ago, ivan.popelyshev said:

can you please not to use minified files when debugging? use them only in production.

Yeah..I have reverted to unminified files

Share this post


Link to post
Share on other sites
59 minutes ago, jonforum said:

can you try something like this


 var stage = new PIXI.Container();
 // load spine data
 const loader = new PIXI.loaders.Loader(); // create new loader
 const name = "main";
 const dir = "required/assets/scenes/arena/skeleton.json"; // plz check it correct path
 loader.add(name, dir); 
 loader.load();
 
 loader.onProgress.add((loader, res) => { // onprogress executed  once each file loaded
     console.log('res: ', res);
     if(res.extension.contains("json")){
         console.log('res.spineData: ', res.spineData); // if undefined , your path are wrong.
         if(res.spineData){
             const spine =  new PIXI.spine.Spine(res.spineData);
             console.log('spine: ', spine);
          }
     }
 });
 
 loader.onComplete.add((loader, res) => { // execute once when all file loaded
     console.log('res: ', res);
     // this loader finish
  });

you can also have a buggy spine.
Try to build a new atlas,json, from the software spine with the last version.
What version of sofware you used for build your spine ?
 

initially got :

Uncaught TypeError: res.extension.contains is not a function
    at loader.onProgress.add (index.js:18)
    at MiniSignal.dispatch (pixi.js:1411)
    at pixi.js:5032
    at next (pixi.js:6249)
    at Loader.atlasParser (pixi-spine.js:6647)
    at pixi.js:5027
    at pixi.js:6257

 

this is the result after commenting out : if(res.extension.contains("json")){ .   :

 

res:  Resource {_flags: 2, name: "main", url: "/required/assets/scenes/arena/skeleton.json", extension: "json", data: null…}
index.js:19 res.spineData:  undefined
index.js:28 res:  Object {main: Resource}

 

Share this post


Link to post
Share on other sites

oh right.. its an old es5. use `indexOf` instead of `contains`.

However, even with that information, my telepathy doesnt work in this case. Try to host it on different server. Also, debug why is there "/" in url in the beginning. are you sure that `required` is in your web-server root? how did it end like this? You have to debug the application, do you know how to do it with chrome devtools?

Share this post


Link to post
Share on other sites
4 minutes ago, ivan.popelyshev said:

oh right.. its an old es5. use `indexOf` instead of `contains`.

However, even with that information, my telepathy doesnt work in this case. Try to host it on different server. Also, debug why is there "/" in url in the beginning. are you sure that `required` is in your web-server root? how did it end like this? You have to debug the application, do you know how to do it with chrome devtools?

i used "indexOf" works now.   results

res:  Resource_boundComplete: ()_boundOnError: ()_boundOnProgress: ()_boundXdrOnTimeout: ()_boundXhrOnAbort: ()_boundXhrOnError: ()_boundXhrOnLoad: ()_dequeue: onceWrapper()_flags: 2_onLoadBinding: nullchildren: Array[0]crossOrigin: ""data: nullerror: Error: Error trying to parse loaded json: SyntaxError: Unexpected token s in JSON at position 1
    at Resource.abort (http://127.0.0.1:8887/js/pixi/pixi.js:5452:22)
    at Resource._xhrOnLoad (http://127.0.0.1:8887/js/pixi/pixi.js:5845:30)extension: "json"isAudio: (...)isComplete: (...)isDataUrl: (...)isImage: (...)isJson: (...)isLoading: (...)isVideo: (...)isXml: (...)loadType: 1metadata: Objectname: "main"onAfterMiddleware: MiniSignalonComplete: MiniSignalonProgress: MiniSignalonStart: MiniSignalprogressChunk: 100type: 0url: "required/assets/scenes/arena/skeleton.json"xhr: XMLHttpRequestxhrType: "json"__proto__: Object
index.js:28 res:  Object

The "/" was just me messing around with impossible file paths just to confirm i am not crazy. I have moved it back to correct path required/assets...

 

Share this post


Link to post
Share on other sites

seems there is an issue with pixi ? : 

"Error: Error trying to parse loaded json: SyntaxError: Unexpected token s in JSON at position 1 at Resource.abort (http://127.0.0.1:8887/js/pixi/pixi.js:5452:22) at Resource._xhrOnLoad (http://127.0.0.1:8887/js/pixi/pixi.js:5845:30)"

 

Share this post


Link to post
Share on other sites
3 hours ago, ivan.popelyshev said:

What is in json file? use networking tab of chrome dev tools, look what exactly was received.

Here are the json contents :

{,…}
animations
:
{,…}
bones
:
[{name: "root"}, {name: "cont", parent: "root", x: -1132.31, y: -831.67},…]
events
:
{plate-popup-sound: {}}
ik
:
[{name: "left-bridge", order: 1, bones: ["bridge-left", "bridge-left2"], target: "left-bridge",…},…]
skeleton
:
{hash: "oPv7d0JDjqC0QJ3N3tkRCntQgH8", spine: "3.6.53", width: 2302, height: 1690, images: "./images/"}
skins
:
{default: {arena: {arena: {x: 1165.04, y: 674.25, width: 1282, height: 1002}},…}}
slots
:
[{name: "background", bone: "cont", attachment: "background"},…]

Guys please help

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.