How to dynamically load Spine animations from a server?

I’m trying to dynamically create Spine animations from code, by downloading the files from a server (remote loading, cc.loader.load to download files), I won’t be able to add these animations in my resources folder or anywhere in the project because we want to add more animations later without force updating the app on the store.
However the problem is that each file is being downloaded in different folders with different names, and apparently spine can’t find the texture atlas, cause I get this error:

Failed to load spine atlas '$s' shop.png

As you can see, it seems that the texture has no name in the json file. And then spine fails to load the atlas by giving this error the next line:
Uncaught TypeError: Cannot read property 'setFilters' of null at TextureAtlas.288.TextureAtlas.load (spine.js:4850)

Any workarounds for this?
Can you actually load spine animations dynamically?
Is there a way to put all these spine files into a single folder after downloading them so atlas can find the texture?
Any help would be appreciated. Thanks.

Here is the full code that I’m using, just in case (File addresses are fake, I save these files on our server):

    let atlas = "";
    let json = "";
    let texture = "";

    cc.loader.load([atlas, json, texture], (err, results) => {
        let data = new sp.SkeletonData();
        data.atlasText = results.getContent(atlas);
        data.skeletonJson = results.getContent(json);
        this.skeleton.skeletonData = data;

        this.skeleton.setAnimation(0, 'Dice_Right', true);


Hello, you can load in this way

var spineNode = new cc.Node();
var skeleton = spineNode.addComponent(sp.Skeleton);

var image = "http://localhost/download/spineres/1/1.png";
var ske = "http://localhost/download/spineres/1/1.json";
var atlas = "http://localhost/download/spineres/1/1.atlas";
cc.loader.load(image, (error, texture) => {
    cc.loader.load({ url: atlas, type: 'txt' }, (error, atlasJson) => {
        cc.loader.load({ url: ske, type: 'txt' }, (error, spineJson) => {
            var asset = new sp.SkeletonData();
            asset.skeletonJson = spineJson;
            asset.atlasText = atlasJson;
            asset.textures = [texture];
            asset.textureNames = ['1.png'];
            skeleton.skeletonData = asset;

setting data.textureNames to an “array” did the trick. Thanks!

Note: Works fine in web browser, but does not work on Android ㅜㅜ

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

I’m experiencing the same here, on latest stable (v2.1.3). Any progress ?