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

[oler]

6 minutes ago, ivan.popelyshev said:

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.

like this :

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

[ivan.popelyshev]

sorry, im bad teacher i cant explain you what i want from you if you dont have that skill prepared already. Please find someone to sit together with you at the same comp or in video, and explain how to solve that kind of problems or how to prepare the data for developers to help you.

[jonforum]

Did you have same issue if you run in fireFox ?
If work in fireFox, it because you bad config your local security acces with chrome web client.


here more help about this and how hack argument from your chrome web browser.

https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file

 

Alternative for chrome, are chromium with nwjs.

[jonforum]

also for 

Unexpected token s in JSON at position 1

it can be from your spine builder.
Update your software and build again the Spines Files.
 

Be shure you have the last spine version in your json.

"skeleton": { "hash": "O1AWSDiL/YgsybuuOr3c1JnIFs4", "spine": "3.7.19-beta", "width": 64, "height": 102, "images": "../images/", "audio": "C:/Users/jonle/Documents/Games/anft_1.6.1/data2/boot/P/cur/source/spine" },

 

[ivan.popelyshev]

actually now i have an idea. Please open "skeleton.json" file manually through notepad or your favorite editor. what do you see there?

[oler]

4 hours ago, ivan.popelyshev said:

actually now i have an idea. Please open "skeleton.json" file manually through notepad or your favorite editor. what do you see there?

Hey yes..I have opened to examine...nothing weird but all the json is on one line. Line 1

[ivan.popelyshev]

use "notepad++" (https://notepad-plus-plus.org/) or any other kind of good text editor to save the file in UTF8 WITHOUT BOM (https://en.wikipedia.org/wiki/Byte_order_mark)

[woodside-rider]

I'm having the hardest time getting this working in react.  I get the Error: The spineData param is required. error

 

Here's my code:

import React from 'react';

import * as PIXI from "pixi-spine";

 

window.PIXI = PIXI;

require("pixi-spine")

 

function Hero() {

const app = new PIXI.Application();

 

document.body.appendChild(app.view);

 

// load spine data

app.loader

.add('spineboypro', './spineboy.json')

.load(onAssetsLoaded);

 

app.stage.interactive = true;

 

function onAssetsLoaded(loader, res) {

// create a spine boy

const spineBoyPro = new PIXI.spine.Spine(res.spineboypro.spineData);

 

// set the position

spineBoyPro.x = app.screen.width / 2;

spineBoyPro.y = app.screen.height;

 

spineBoyPro.scale.set(0.5);

 

app.stage.addChild(spineBoyPro);

 

const singleAnimations = ['aim', 'death', 'jump', 'portal'];

const loopAnimations = ['hoverboard', 'idle', 'run', 'shoot', 'walk'];

const allAnimations = [].concat(singleAnimations, loopAnimations);

 

let lastAnimation = '';

 

// Press the screen to play a random animation

app.stage.on('pointerdown', () => {

let animation = '';

do {

animation = allAnimations[Math.floor(Math.random() * allAnimations.length)];

} while (animation === lastAnimation);

 

spineBoyPro.state.setAnimation(0, animation, loopAnimations.includes(animation));

 

lastAnimation = animation;

});

}

 

return (

<div/>

)

}

 

export default Hero;

[ivan.popelyshev]

you dont need that require() anymore. Look in the readme: https://github.com/pixijs/spine

[woodside-rider]

hmm

updated my code and get the error: TypeError: pixi_spine__WEBPACK_IMPORTED_MODULE_2__.Spine is not a constructor

import * as PIXI from 'pixi.js';

import {Spine} from 'pixi-spine';

 

window.PIXI = PIXI;

 

function Hero() {

const app = new PIXI.Application();

document.body.appendChild(app.view);

 

app.loader

.add('spineCharacter', './spineboy.json')

.load(function (loader, resources) {

const animation = new Spine(resources.spineCharacter.spineData);

 

// add the animation to the scene and render...

app.stage.addChild(animation);

 

if (animation.state.hasAnimation('run')) {

// run forever, little boy!

animation.state.setAnimation(0, 'run', true);

// dont run too fast

animation.state.timeScale = 0.1;

}

 

app.start();

});

 

return (

<div/>

)

}

 

export default Hero;

 

 

[ivan.popelyshev]

it should work, it works for other people. Please re-install node_modules , remove package.lock, you know, the usual. And tell me which versions do you use

Obligatory note: I hate webpack and if its users dont know how to configure it - usually its their problem to solve.

Edited August 17, 2021 by ivan.popelyshev

[woodside-rider]

IS 

window.PIXI = PIXI;

required below the imports?  It's not in the ES6 example, but I've seen others use it in react.

[woodside-rider]

I removed all pixi from package-lock.json.  I was told to never delete package-lock.json.
I updated the libraries to the latest:
"resource-loader": "^3.0.1",
"pixi-spine": "^3.0.8",
"pixi.js": "^6.1.2"

but still get --> Error: The spineData param is required.

and get the error if I include 

window.PIXI = PIXI;

or not.

 

[ivan.popelyshev]

It should work. If it doesnt, please provide minimal demo that i can run and see whats wrong: whether you configured your web-server wrong, whether you use model of not supported format, e.t.c.

[woodside-rider]

Here's a really simple react app that tries to use the pixi libraries to display the spineboy animation.
The attached app was created using: npx create-react-app pixi-app

When you npm install, npm start the app, it gets this error: Error: The spineData param is required.

A simple react app like this would be a great addition to the pixi docs.

thanks!

pixi-app.zip

[ivan.popelyshev]

where are atlas and png files?

[woodside-rider]

The documentation wasn't clear exactly how to use those.  See attached.  They come from the repo https://github.com/pixijs/examples/tree/main/examples/assets/pixi-spine 

spineboy.atlas

[ivan.popelyshev]

> The documentation wasn't clear exactly how to use those.  See attached.

That's the first time someone tried to draw things without textures and ask help  So , does it work if you add those files together with json?

[woodside-rider]

I don't know how to add them to the json.  My animator exports out of spine three files: .png, .atlas, and .json.  But I don't know what ties the three together.

[ivan.popelyshev]

When you add json to loader, when json is loaded - pixi loader middleware from pixi-spine adds two more files in loading queue. 

I dont know whether to advice you to just roll with it, or send you to sources https://github.com/pixijs/spine/blob/ccf3573b24745631157f054dbf211d9c69a49486/packages/loader-base/src/loaders.ts#L128 

[ivan.popelyshev]

pixi-app.7z

here's what you did wrong:

json, png, and atlas has to be in "public/" , those are not sources you can include through react. It seems that you are working with pixi or any html5 renderers for the first time - its not possible to include resources through react, unless you know how react does that in that particular case and you know how loader system of the renderer works

Your attempt at adding react component also lacks "app.destroy()" which is critical here. To understand what exactly is that "app" you have to read https://github.com/pixijs/pixijs/wiki/v5-Custom-Application-GameLoop