Can't load json in spine

[Harryk89]

When I load json in loader gives an error message 

Quote

Error: Cannot add resources while the loader is running.

PIXI.loader
    .add('spineCharacter', 'character_assets/red.json')
    .load(function (loader, resources) {
        var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);        
        self.container.addChild(animation);
    });

but if I use another method

PIXI.loader
    .add('character_assets/red.json')
	.load(init);

function init() {
   this.spin = new PIXI.spine.Spine(PIXI.loader.resources['character_assets/red.json'].spineData);
   this.container.addChild(this.spin);
}

There is no error, but the screen is just black and nothing is displayed

[jonforum]

you can try see the loader like winrar or winzip process.
Your selected files (add).
You compress files added, but your can not add more files when your have started the compression.
You need wait the compression finish, and than your will can add more files again.

So if you start the loader you need wait before add more files.

You can have multi loader instances in same time (multi loader).

var loader1 = new PIXI.loaders.Loader();
var loader2 = new PIXI.loaders.Loader();

You can run simultaneous louder 1 and loader2.
But if your start loader1, you need wait it finish before add more stuff to this one.

 

your first are correct, but maybe you have another loader existe.

note: the .load() can be interpreted like .startLoader()
 

[Harryk89]

To download json, I need to connect some script?

 

[jonforum]

download json ?

[jonforum]

here my spine loader if this can help or inspire you.

 

it in 2 step.

// ┌------------------------------------------------------------------------------┐
// nwJS library path scanner (find all JSON need for pixiLoader)
//└-------------------------------------------------------------------------------┘
_SLL.prototype.load_nwJSFolderLibs = function() {
     // List all files and folders in a directory with Node.js
     let libs;
     var walkSync = function(dir, list) {
        var path = path || require('path');
        var fs = fs || require('fs'), files = fs.readdirSync(dir), list = list || [];
        !libs && (libs = files);
        files.forEach(function(file) { // create instance for eatch folder
            if (fs.statSync(path.join(dir, file)).isDirectory()) {
                list = walkSync(path.join(dir, file), list);
            }
            else {
                list.push([path.join(dir, file),path.parse(file)]) 
            };
        });
        return list;
    };
    const list = walkSync("SSA");
    this.category = libs;
    let result = {};
    list.forEach(file => {
        if(file[0].indexOf('.json')>-1){
            const name = file[1].name;
            let cat = null;
            libs.forEach(libName => {
                if(file[0].indexOf(libName)>-1){
                    cat = libName;
                }
            });
            result[ file[1].name] = {
                path:file[0].replace(/\\/g, "/"),
                cat:cat,
                name:name
            };
        };
    });
    this.pathLibsJson = result;
    this.startLibraryLoader();
};


// ┌------------------------------------------------------------------------------┐
// PIXI LOADER for ressources
//└-------------------------------------------------------------------------------┘
// TODO: find a way to load a .json that also have reference to normal.png in same .json COPY frame/crop/orig to textures..
// for now , diffuse and normal need load in separate json (name.json,name_n.json)***
_SLL.prototype.startLibraryLoader = function() {
    const loader_libs = new PIXI.loaders.Loader();
    for (const name in this.pathLibsJson) {
        loader_libs.add(name, this.pathLibsJson[name].path);
    };
    loader_libs.load();

    loader_libs.onProgress.add((loader, res) => { // store all ressource reference in $SLL.resource
        if(res.extension === "json"){
            const name = res.name;
            const source =  $SLL.pathLibsJson[name];
            const meta = res.data.meta || res.data.skeleton;
            const resource = {
                name:name,
                sheetName:name,
                cat:source.cat,
                path:source.path,
                type:res.spritesheet && 'tileSheets' || res.spineData && 'spineSheets',
                data:res.data,
                normal:meta.normal,
                case:meta.case || false,
                //ress:res, // for debug uncommentMe
            };
            res.spineData && (resource.spineData = res.spineData);
            res.spritesheet && (resource.spritesheet = res.spritesheet)
            $SLL.resource[name] = resource;
        };
    });
    loader_libs.onComplete.add(() => {$SLL.setLoaded()}); // called once when the queued resources all load.
};

 

[Harryk89]

I meant both with pixi-spine.js put in project

[jonforum]

yes , you need wait the pixi.js and pixi-spine.js loaded before

    <body style="background-color: black">
        <script type="text/javascript" src="js/UTILS/ECC.js"></script> <!--iziToast js for editor-->
        <script type="text/javascript" src="js/libs/editor/iziToast.js"></script> <!--iziToast js for editor-->
        <script type="text/javascript" src="js/libs/tween/TweenMax.js"></script> <!--easing library tween-->
        <script type="text/javascript" src="js/libs/lz-string.js"></script> <!-- Compressor todo update last version and study-->
        <script type="text/javascript" src="js/libs/iphone-inline-video.browser.js"></script>
        
        <!-- PIXI core-->
        <script type="text/javascript" src="js/libs/pixijs/pixi.js"></script>
        <script type="text/javascript" src="js/libs/pixijs/pixi-filters.js"></script>
        <script type="text/javascript" src="js/libs/pixijs/pixi-layers.js"></script>
        <script type="text/javascript" src="js/libs/pixijs/pixi-spine.js"></script>
        <script type="text/javascript" src="js/libs/pixijs/pixi-heaven.js"></script>
        <script type="text/javascript" src="js/libs/pixijs/pixi-lights.js"></script>