How do I load and unload/destroy spine objects with Spine-TS

bapho

Hi,

I'd like to know how to load and unload/ destroy spine objects using Spine-TS, maybe anyone has pointers? 🙂

I'm moving from an old version with PhaserCE. The spine plugin for that can only load up the spine object, but not unload it. I have to rely on PhaserCE's state change to wipe the spine object off memory and speed things up when there are too many spine objects on screen. But since Spine-TS isn't exactly supported on PhaserCE , I might need to use this directly without any sort of integration like the old phaser-spine plugin. So I'm thinking I will need to explicitly be able to unload/destroy spine objects managed by Spine-TS now to make sure things don't get bogged down, especially on mobile.

Alternatively, is there a way for me to reinitialize or reset spine-ts and the webgl canvas it draws onto, effectively freeing up resources and starting "clean"?

Mario

I can't help with clean-up on the Phaser side, i.e. removing objects from the scene graph. For the spine-ts and specifically the WebGL side, any object that has an underlying "native" resource, like textures or buffers, can be manually disposed. The spine-ts web player uses WebGL and has a dispose methodz that does just that:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-player/example/dispose.html

Have a look at the implementation:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-player/src/Player.ts#L263

Disposing the SceneRenderer will get rid of buffers used for meshes. Disposing the AssetManager will dispose any loaded textures.

spine-ts has a Disposable interface:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-core/src/Utils.ts#L95

anything implementing that interface is backed by a native resource and should eventually be disposed, either by manually calling the dispose() method, or by letting the javaScript garbage collector do its magic.

bapho

Hi Mario,

So since Spine-TS will manage its own resources separate from Phaser's, I can simply program the game from JS to control Spine-TS, including the dynamic loading/disposing of assets, running animations and what other properties and functions the Spine-TS will allow, my line of thinking is still along the right path? I was thinking of having the PhaserCE canvas on top of the Spine-TS one, and make sure Phaser's canvas is set to transparent. When disposing of the assets, will I see resources free up more or less immediately? Ex: frame rate with spine objects is currently 15, disposing of the objects will make it jump back to 60.

Mario

I'd strongly recommend not compositing multiple canvases on top of each other, as that will impact performance heavily, due to the way browser engines work (not Spine specific).

If you see a bad framerate, your issue is unlikely to be a resource related issue, but an issue with the computational and drawing complexity of your Spine skeletons. If you can show us your assets and/or a demo, we may be able to give better advice.