Update spine texture during runtime (pixi runtime)

chrisper

Hi,
As the title says would like to update a texture and create an update spine object during app runtime. Totally fine with destroying the current object and creating a new one as soon as the texture has been updated, I was able to do this with the phaser runtime before but when trying the same with pixi the graphics won't update. I'm suspecting that something is being cached and not updated even though the texture has been changed. It works if I reload the application and it works if I load the assets with new names so I'm guessing it somehow figures a texture create with this file exists and skips it. I don't think this is a pixi issue since it worked fine with the phaser runtime. I tried clearing the assets with PIXI.Assets.unload but then I get a lot of spine errors because of the missing assets (even if I destroy the object first). Someone have any idea as how to clear the cached data?

Thanks in advance
C

Mario

It's hard to give advice without seeing some code. Could you show how you are trying to swap out the existing texture?

chrisper

Hi Mario, thanks for answering so quick. I understand, this is part of a larger system but I will try to compress it down to the bare minimum here. What I'm essentially are doing is letting the user upload a file through an external UI and when this process is done a signal is sent to the pixi-app which then will execute code loading spine object with urls of the uploaded files. Any file can be updated at any time and then the current spine object will be removed and recreated with the updated resources.I managed to get this working with phaser by using a random id in order to force a redraw. Here is the esential code rewritten and shortened:

if(this.spineObject)
{
this.spineObject.destroy();
}

PIXI.Assets.add({ alias: randomValue + "skeleton-data", src: jsonResource.url });
PIXI.Assets.add({ alias: randomValue + "skeleton-atlas", src: atlasResource.url });
await PIXI.Assets.load([randomValue + "skeleton-atlas", randomValue + "skeleton-data"]);
this.spineObject = spine.Spine.from([randomValue + "skeleton-atlas", randomValue + "skeleton-data");

chrisper

Worth mentioning that the user will update the same files so the urls never changes.

Mario

In the Phaser runtime, assets are cached by key, see:

EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-phaser/src/SpinePlugin.ts#L366
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-phaser/src/SpinePlugin.ts#L303

Those are managed by Phaser itself. Additionally, the SpinePlugin caches instantiated SkeletonData and Atlas instances, to reduce the number of times the .skel/.json/.atlas files need to be parsed:

EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-phaser/src/SpinePlugin.ts#L200
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-phaser/src/SpinePlugin.ts#L231

In both cases, you can manually clear those caches using the respective methods of the Phaser Phaser.Cache.BaseCache class. You can get the instance caches from the SpinePlugin, and the file caches from the Phaser "object".

On to Pixi. Do I understand correctly, that the randomValue fixes your issue? Because it should. spine-pixi too uses a caching mechanism for skeleton data instances:
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-pixi/src/Spine.ts#L346

A SkeletonData is constructed from an Atlas instance, so even if you manage to reload the atlas through Pixi.Assets.add/load, if you then call spine.Spine.from() with the same key as previously, you'll get the old SkeletonData bound to the old Atlas. You can manually clear the spine.Spine.skeletonDataCache as well in this case. I'm unsure if Pixi.Assets does caching as well, I would assume it does. Please consult the Pixi docs on how to clear cached data (.atlas files, atlas page .png files, and .skel/.json files) through their API.

chrisper

Thank you for taking the time to answer, it's actually the reversed in this case. Random value solves it for phaser but not for pixi for some strange reason. My only guess is that somewhere the skeleton/texture gets cached by filename. Since I'm randomizing the alias I can't see any other way it would keep giving me the old version except if it somehow looks at the url and thinks its the same as before. Anyhow, thanks agian for the pointers, I will have a look at the stuff you mentioned.

Br
C

Mario

Huh, that's very weird then! I agree, something might be caching the files by file name. However, the spine-pixi plugin just passes things along to Pixi, so I'm unsure what we could do differently on our end. Have a look at the Spine.from() method.

chrisper

Yes, really strange, listening to you and thinking about it I realise that it could actually be that phaser does something different when caching so that might explain why it works for that. I will either find some way to clear it or I will have to go through some more annoying steps, I pretty sure I will solve it anyhow. Thanks again buddy for taking the time!