يتمّ عرض هذا الموقع بشكل أفضل في متصفّح حديث مع تمكين JavaScript.

Splitting Atlas PNG into groups

PABretherton

Hi guys.

I've got this PNG which contains all 4 costumes for 1 character.

Is it possible to split this into 5 PNGS? 1 skin / nude model and then each of the 4 costumes (each 1 PNG)

Each costume is a collection with its own hat, shirt, pants, and shoes.

This way, later if I add a new costume, the other costume data remain untouched.

Can my animator export using this strategy?

Spinebot

Yes, this is absolutely possible in Spine! Your animator can export the atlas split into separate PNG pages by organizing the source images into folders and using the folder-based texture packing approach.

How it works:

By placing images into separate folders, the Spine Texture Packer can group them into separate atlas pages (separate PNGs). Each folder's contents get packed into their own atlas page.

You can read more about this in the Texture Packer folder structure guide.

Export steps for your animator:

Organize the source images into folders — one for the base/nude model, and one for each costume (containing that costume's hat, shirt, pants, and shoes).
Press Ctrl+E or select Export... from the dropdown menu.
Enable Texture Atlas, check Pack, and select Image Folder instead of Attachments.
In Pack Settings, under Options, make sure Flatten Paths and Combine Subdirectories are disabled (this is the default).
Click Export.

This will produce one .atlas file referencing multiple .png files — one per folder/costume.

Why this is a great strategy:

Adding a new costume later only requires adding a new folder and re-exporting, leaving the other costume pages untouched.
Each skin/costume stays isolated on its own atlas page, making it easy to manage and update independently.
At runtime, you can combine skins programmatically using addSkin() to mix and match the base model with any costume:

Skin newSkin = new Skin("new-skin");
newSkin.addSkin(skeletonData.findSkin("base"));
newSkin.addSkin(skeletonData.findSkin("costume1/hat"));
newSkin.addSkin(skeletonData.findSkin("costume1/shirt"));
// etc.

This is a well-supported and recommended workflow in Spine, especially for characters with multiple costume options!

PABretherton

In our game, costumes can be mixed and matched and my animator tells me that grouping the costumes into separate folders will impact their z-sorting.

We could have a t-shirt from costume 1 layered with a jacket from costume 2. Parts of the jacket will be in-front of the t-shirt, parts behind.

I think she is right (she usually is) - is there a solution for this?

Nate

Using folders to organize images does not affect the order attachments are drawn.

If you mix drawing some images from one skin and some from another, it is more efficient to put them in the same atlas page. If you have them on different pages, you will incur draw calls to flush when the texture changes. That may be acceptable.

If you have so many images that you can't fit them in single page and you don't want the cost of draw calls to change textures, you can pack only the images you need at runtime so they are on a single texture.

If you load all the images at once, use a single atlas (whether one or more pages). Separate atlases make sense if you are not loading them all at once.

PABretherton

That's an inevitability as we have so many costumes and each with multiple color variations - even now one PNG per character is not enough.

Misaki

PABretherton I think there may be a small misunderstanding about what we mean by a single atlas here.

A single texture atlas does not necessarily mean a single PNG image. One atlas consists of one .atlas file and one or more page images. For example, an atlas can contain several PNG files if all of the images cannot fit on a single page.

So when Nate said:

If you load all the images at once, use a single atlas (whether one or more pages).

he was not suggesting that all of your costume images need to fit into one PNG. Having multiple PNG pages is completely fine and, with a large number of costumes and color variations, is expected.

The main point is that if different costume parts can be mixed freely and are loaded at the same time, keeping them within the same atlas is generally preferable to separating them into completely separate atlases. The atlas itself may still contain as many page images as necessary.

Separating costumes into different page images also does not affect their draw order. The tradeoff is simply that switching between attachments stored on different page images may require additional texture changes and therefore additional draw calls.