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

[oler]

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

}

 

[oler]

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??

[oler]

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

 

 

[jonforum]

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

You seem doing nothing wrong for me.

you can also try use 

 

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

    });

 

[jonforum]

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

});

 

[oler]

5 hours ago, jonforum said:

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

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 ??

[oler]

edit above.  spineData is not defined

[oler]

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?

[ivan.popelyshev]

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.

[oler]

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

[oler]

ping. Help

[ivan.popelyshev]

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

[oler]

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

[jonforum]

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 ?
 

[ivan.popelyshev]

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

[oler]

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

[oler]

stil unresolved

[oler]

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}

 

[ivan.popelyshev]

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?

[jonforum]

you maybe have a bad file, bad path or bad server setup.
i think the resource not load.
... maybe
 

[oler]

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

 

[oler]

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

 

[ivan.popelyshev]

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

[oler]

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

[ivan.popelyshev]

can you post it in text format? because right now its all... i dont know, its not correct json, and i cant determine whether the original is correct.