[Pixi] Assets cached via Spine.from() are not removed by Assets.unloadBundle()

RubenPG

Hello,

I'm running into some unexpected caching behavior with Spine in PixiJS.
Package versions:
"pixi.js": "8.17.1"
"@esotericsoftware/spine-pixi-v8": "4.2.107"

Code example:

// STEP 1 — Load bundle
await Assets.loadBundle('preloader')

// Assets are now available
console.log([...Cache.keys()]); 
// = ['logoSkeleton', 'logoAtlas']
Assets.cache.has('logoSkeleton'); // = true
Assets.cache.has('logoAtlas');    // = true

// STEP 2 — Create first Spine instance
const spine = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});

// Cache AFTER creating Spine 
// record 'logoSkeleton-logoAtlas-1' added by Spine.from()
console.log([...Cache.keys()]); 
// = ['logoSkeleton', 'logoAtlas', 'logoSkeleton-logoAtlas-1']
Assets.cache.has('logoSkeleton');               // = true
Assets.cache.has('logoAtlas');                  // = true
Assets.cache.has('logoSkeleton-logoAtlas-1');   // = true

// STEP 3 — Unload bundle
await Assets.unloadBundle('preloader');

// Verify Assets cache is cleared
Assets.cache.has('logoSkeleton');               // = false
Assets.cache.has('logoAtlas');                  // = false
Assets.cache.has('logoSkeleton-logoAtlas-1');   // = true !!!
console.log([...Cache.keys()]); 
// = ['logoSkeleton-logoAtlas-1']
// ! Unload did not remove 'logoSkeleton-logoAtlas-1' from Cache

// STEP 4 — Create second Spine instance,
// still works because 'logoSkeleton-logoAtlas-1' is in Cache,
// even though original assets were unloaded
spine2 = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});

Expected behavior:
Spine.from() should throw because assets were unloaded.
I would expect that unloading a bundle remove all related assets => proper memory management.
I’ve confirmed that this works, but it doesn’t seem maintainable or flexible for future extensions:
Cache.remove('logoSkeleton-logoAtlas-1');

Any guidance?

Davide

RubenPG

The Spine GameObject is not part of the bundle, so we cannot expect it to be unloaded automatically.
If you want, we can add a method to remove the cache entry created when a Spine GameObject is instantiated.

In your case, you would need to call something like spine.unloadFromCache().
Would it simplify your workflow?

Spinebot

The behavior you're experiencing is related to how Spine.from() creates and caches internal composite assets that combine skeleton data and atlas information.

What's happening:

When you call Spine.from(), it internally creates a cached entry using a composite key (like 'logoSkeleton-logoAtlas-1'). This cached entry combines the skeleton data and atlas into a format optimized for creating Spine instances. However, Assets.unloadBundle() only removes the original assets that were explicitly part of the bundle ('logoSkeleton' and 'logoAtlas'), not the derivative cached entries created by Spine.from().

Solution:

To properly clean up all Spine-related assets, you need to manually remove the composite cache entries before or after unloading the bundle:

// Before unloading the bundle, remove Spine's composite cache entry
Cache.remove('logoSkeleton-logoAtlas-1');

// Then unload the bundle
await Assets.unloadBundle('preloader');

Better approach for dynamic asset management:

If you're frequently loading and unloading bundles with Spine assets, consider tracking the composite keys that Spine.from() creates:

const spineInstances = new Map();

// When creating a Spine instance
const compositeKey = 'logoSkeleton-logoAtlas-1';
const spine = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});
spineInstances.set('logo', compositeKey);

// When cleaning up
const compositeKey = spineInstances.get('logo');
if (compositeKey && Cache.has(compositeKey)) {
  Cache.remove(compositeKey);
}
spineInstances.delete('logo');

await Assets.unloadBundle('preloader');

Alternative: Direct asset loading without bundle

If you need more control over asset lifecycle, you could load assets individually rather than using bundles:

// Load
Assets.add({ alias: 'logoSkeleton', src: 'path/to/skeleton.skel' });
Assets.add({ alias: 'logoAtlas', src: 'path/to/skeleton.atlas' });
await Assets.load(['logoSkeleton', 'logoAtlas']);

// Create Spine
const spine = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});

// Clean up
Cache.remove('logoSkeleton-logoAtlas-1');
Assets.unload(['logoSkeleton', 'logoAtlas']);

This behavior is a consequence of how the caching system works with composite assets. The manual cache removal is necessary for complete cleanup when you're managing asset lifecycles dynamically.

RubenPG

My assumption is that on modern devices this might not be a big issue. But for older or lower-end devices, being strict about asset cleanup still seems like a good practice for optimal performance.
I’m also wondering how other developers usually handle this?

The main scenario I’m working on is a tutorial sequence where Spine-assets are only needed temporarily. Since they aren’t reused later, keeping them in cache doesn’t really make sense.

So having something like:
spine.unloadFromCache()
would definitely help make this process more explicit and easier to manage.

Thank you for the quick response.👍️

Davide

RubenPG

I have created an issue for it: EsotericSoftware/spine-runtimes3054

Other developers just manually unload it from the cache as you indicated above. However, this method is important because developers should not have to look into the runtime code to determine the cache key used when creating a Spine object.

I'll add it in the next few days. Thanks for reporting this.