Pixi.js v6 + Spine 3.7 assets support

[kulabros]

Hello there. I have a question about 3.7 assets format support in newest pixi.js v6 - I can see there is support for 3.8 assets, and https://github.com/pixijs/spine/tree/pixi5-spine3.7 this branch with 3.7 support for v5. I'm updating libs versions of project with many assets. I was wondering to run newest v6 libs, but it's complicated to re-export all the assets. How do you think I should solve this - is there some chance to support this older assets, is it possible of thinking of that, or 3.7 is strictly cutted and cannot be supported? What about some script to convert assets in the new 3.8 format, similar to pixi-animate convert assets script, would it be possible to write it, or there are big differences? Should I stay at pixi.js v5 for some time? What about future support of the 3.7 assets? How far is the v5 plugin with 3.7 assets support from the v6 version? Thanks a lot for help/information. Have a nice day and good luck!:)

[ivanpopelyshev]

latest pixi-spine for v6 suipports 3.7 too. However if you want build that supports only 3.7 and has typings only for 3.7 and not universal interfaces - you have to make bundle yourself, please read the README.

[ivanpopelyshev]

That's how it works:

https://github.com/pixijs/spine/blob/master/packages/loader-uni/src/Spine.ts

https://github.com/pixijs/spine/blob/master/packages/loader-uni/src/SpineLoader.ts

[kulabros]

latest pixi-spine for v6 suipports 3.7 too. However if you want build that supports only 3.7 and has typings only for 3.7 and not universal interfaces - you have to make bundle yourself, please read the README.

Hello Ivan, thank you very much for explaining. I've missed that 3.7 are supported.. I was having an error about missing 'core' of pixi spine, that's why I (wrongly) thought the problem was the assets. Now I see, that the problem is the namespace.. I was trying many combinations, I tried piece of code about to change loader's middleware, but... Still unsuccessfull and have no idea how to use the namespaces and imports properly.

Pixi.js v6 app is running ok and has loaded assets, including pixi-animate and other assets. Now I have a problem only about the pixi-spine namespace. I'm on es6 webpack build, and have one 'vendor' module, where all pixi.js related plugins imports are made, and it exports default PIXI. Than, in the module where I need to use Spine, I'm importing my vendor/pixi.js, where import * as PIXI from 'pixi.js'is made, also window.PIXI = PIXI and after that import 'pixi-spine'.. And now, at the modules where I'm using, I can't reach PIXI.spine using just import PIXI from 'vendor/pixi' where the imports are. So I tried to import { Spine } from "pixi-spine"... I think I'm missing something. At the moment, it doesn't matter if I bundle both typings for the newer version, doesn't need to solve this kind of optimization now. I just still can't get the pixi-spine 3.7 assets animations under latest pixi.js version running - still getting to errors about wrong PIXI.spine / Spine namespace. Thanks a lot for any further help, I guess I'm just missing something. Btw., have a nice day!:)

[ivanpopelyshev]

PIXI.spine namespace exists only if you use UMD build. If you use webpack, why do you need it?

It should work. If its not - please make minimal reproduction case in zip-file

[kulabros]

Of course, thanks a lot, now I understand. I changed the imports to include modules I'm using - SkeletonJson, AtlasAttachmentLoader, TextureAtlas... Now the build is ok!

But, I've reached to this error - Spine 3.8 loader cant load version 3.7.94. Please configure your pixi-spine bundle. And now I'm not sure, why.. I've looked at the links you sent, thanks. If I understand ok, the detection should be automatic, so what should be wrong in my case now?

pixi.js v6, pixi-spine 3.0.0. and here's example of function where I'm creating Spine constructors to be used in my project assets Library class. `import { AtlasAttachmentLoader, SkeletonJson, TextureAtlas, Spine } from "pixi-spine";

static _createSpines(spines, textures) {
    let item;
    let spineConstructors = {};
    let allTextures = {};
    let atlas = new TextureAtlas();

    for(let i = 0; i < textures.length; i++) {
        atlas.addTexture(textures[i], PIXI.Texture.from(textures[i]));
    }

    let spineAtlasLoader = new AtlasAttachmentLoader(atlas);
    let spineJSONParser  = new SkeletonJson(spineAtlasLoader);

    for (item in spines) {
        let spineData = spineJSONParser.readSkeletonData(spines[item]);

        // wrap spine constructor into function to bind its spine data {{{
        let spineConstructor = function(useProjection = false) {
            // if projection is requested, return Spine object useable in
            // projection plugin {{{
            if (useProjection === true) {
                return new PIXI.projection.Spine2d(spineData);
            }
            // }}}
            // otherwise return standard Spine object {{{
            else {
                return new Spine(spineData);
            }
            // }}}
        }
        // }}}

        // store ID of the shapes object
        spineConstructors[item] = spineConstructor;
    }

    return spineConstructors;

`

[ivanpopelyshev]

pixi-spine re-exports only 3.8 classes, so SkeletonJson you are using there is actually 3.8 class.

there's no universal SkeletonJson class.

If you use only 3,7 models, I recommend to make your own pixi-spine-3.7 bundle, just create a js file , put the code there: https://github.com/pixijs/spine/blob/master/packages/loader-3.8/src/index.ts , change to 3.7 deps and include that file instead of pixi-spine.

Actually that file is missing one important thing - you can re-export all 3.7 and base classes there

export * from '@pixi-spine/runtime-3.7';
export * from '@pixi-spine/base';