Pixi 8+ Spine + Texture packer => merging atlases.

HHorsetopus · 14 1월

Hi,

I'm new to Spine, it seems to be an amazing tool.

I'm working on a pixi.js v8 project and I use TexturePacker 7 to build my atlases.
For optimisation purpose, given I will have a lot of animations, I'd like to pack the images I'm using in the Spine animations with texture packer.

I tried it, and using the @esotericsoftware/spine-pixi-v8 library to instantiate a new Spine object, passing a json atlas id as a parametter to Spine.from(), and I get the error: this.atlas.findRegion is not a function.

I also tried instatiating a Spine object using it's constructor, following the "manual loading" example from the doc

But there too I got an error, as it still only expect a .altas file.

So is it possible to use a json atlas with Spine ? To pack everything under only one json atlas, my static assets as well as my spine assets ?

Or for that matter, since I know TexturePacker can export.atlas file, is it possible to use a .atlas file for my static assets in Pixi ?

Thanks in advance for your help.

Spinebot · 14 1월

To use Spine animations with Pixi.js and TexturePacker, you need to ensure that the texture atlas format is compatible with Spine's requirements. Spine typically uses the libgdx texture atlas format, which is a plain text format. If you're using TexturePacker, you can configure it to export in this format. Pixi.js, on the other hand, may use a different format for its atlases, such as JSON.

The error this.atlas.findRegion is not a function suggests that the atlas format being used is not compatible with what the Spine runtime expects. The Spine runtime for Pixi.js expects a .atlas file, which is a specific format that includes information about the regions and pages of the texture atlas.

To resolve this, you can use TexturePacker to export your atlas in the libgdx format, which is compatible with Spine. This way, you can use the same atlas for both your static assets and Spine animations. If you want to use a JSON atlas, you would need to write a custom loader that can interpret the JSON format and provide the necessary data to the Spine runtime, but this is more complex and not directly supported.

For your static assets in Pixi.js, you can continue using the JSON format if that's what Pixi.js supports, but for Spine animations, you'll need to stick with the .atlas format unless you implement a custom solution.

Davide · 14 1월

Horsetopus

Spine runtimes require their own atlas format. While the atlas concept is generic, TexturePacker uses its own format. If you prefer to use TexturePacker, you would need to write a custom Attachment Loader to integrate it with Spine.

The simplest approach is to pack all Spine textures into a single atlas (text) file using Spine's texture packer. The resulting number of image files will depend on your texture packer settings and the number of images used in your skeletons. You can read more about that in the dedicate user guide page.
Once you've done that, you can use TexturePacker for packing any non-Spine assets separately. You could use Spine Texture Packer for this step too, if you want, and use the TextureAtlas.findRegion to get the desired texture.

HHorsetopus · 15 1월

Thank you both for your answers.

On the long run I might concider implementing a loader but for now I'll just give up on merging everything.
Being able to merge all the spine animations atlases together through the editor is already a nice feature, I won't have hundreds of textures to load.