Harryk89

Can't load json in spine

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.