How to optimize Spine character loading with tons of PNG files in Construct 3?

jackaru

We're working on a game on Construct 3 that's using this Spine plugin for character animations, and we're facing a performance issue.

Our setup:

The character consists of a 3 PNG files combo (hat, head, body)
We have approximately 200 PNG files total to make skin customization possible.
Single atlas and json file
The game has 20 players in the layout

The problem:

Spine requires all PNG files to be linked to the object, even if they're not being used, this forces Construct to load all the files causing significant performance issues.
On mobile devices we're seeing a framerate drop to around 20fps

What we've tried:

We've already programmed a dynamic loading for the necessary files using the "Load spine files" event. However it doesn't work because Spine requires all files in the atlas to be linked.

Has anyone encountered a similar issue? How did you managed to solve it? We're looking for a way to dynamically load ONLY the PNG files associated with the currently active character skin.

Any suggestion would be greatly appreciated!

Spinebot

To optimize Spine character loading in Construct 3 with a large number of PNG files, you can consider implementing a custom AttachmentLoader. This approach allows you to load only the necessary images dynamically, rather than having all images preloaded. The key is to use a custom AttachmentLoader that doesn't require all images to be loaded at once. Instead, you can configure attachments with their respective textures only when they are needed for rendering. This method is similar to the solutions discussed for Unity and other platforms, where you can use runtime atlas packing or load images on demand using Addressables or Asset Bundles. Although Construct 3 might not directly support these features, you can adapt the concept by managing your texture loading and attachment configuration manually.

For more detailed guidance, you can refer to the Spine Runtimes documentation on loading skeleton data and using custom AttachmentLoaders: Spine Loading Skeleton Data.

Mario

Spinebot already gave one part of the solution. We do not maintain the Construct 3 runtime, it's being maintained by a third party. So it's hard for me to give better help. That said, you will likely have to drop down to JavaScript to implement the suggestion by Spinebot.