Jump to content

Can't load json in spine

Recommended Posts

When I load json in loader gives an error message 


Error: Cannot add resources while the loader is running.

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

but if I use another method


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

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

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

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 => {
            const name = file[1].name;
            let cat = null;
            libs.forEach(libName => {
                    cat = libName;
            result[ file[1].name] = {
                path:file[0].replace(/\\/g, "/"),
    this.pathLibsJson = result;

// ┌------------------------------------------------------------------------------┐
// 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.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 = {
                type:res.spritesheet && 'tileSheets' || res.spineData && 'spineSheets',
                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.


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>


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.

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.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...