Extracted PNG size

Nnovus · 26 Th09 2024

Hey.
We have created a paper doll system for a 2D avatar in Unity and we keep adding skins to Spine based on our game's needs.
The spine images are separated in 2 different folders and subfolders in each one. After exporting we are left with a very huge png that when exported to Unity, its size is way too big (1GB uncrunched, 250MB Crunched 16kx16k size)

I have attached the options we are using for exporting.
What I am trying to do and failing:
1- I want the export to create 2 PNGs based on the 2 main folders in the images.
2- I want to try to reduce the huge size of the exported PNG while maintaining sharp 2D textures in Unity.

How would we go about it? Thank you

Spinebot · 26 Th09 2024

To address your concerns about exporting PNGs from Spine and managing their size in Unity, here are some steps and tips:

Exporting Based on Folders:
- You can control which images are grouped together on the same atlas page by organizing your images into subfolders. When exporting, Spine will create separate atlas pages for each subfolder. This should help in creating two PNGs based on your two main folders.
- Refer to the Texture Packing - Spine User Guide: Folder structure for more details.
Reducing PNG Size:
- Use PNG Optimization Tools: Tools like pngout or pngcrush can help further compress your PNG files. Ensure that your game toolkit can still open the resulting PNG files after compression.
- Reduce Bit Depth: You can reduce the bit depth from 24 bits to 8 bits, but this will limit the colors to 256. This can be done using tools like Photoshop or opt-png in littleutils.
- Scale Down Textures: You can scale down the texture atlas during export. This will reduce the size but may affect the quality. You can do this by adjusting the scale settings in Spine.
- Use Binary Export: Export your data in binary format and compress it using algorithms like deflate, lzma, or lzo. This can significantly reduce the file size.
- Premultiply Alpha: Ensure that your PNG files are exported with premultiplied alpha if your compression tool respects PMA. This can help in maintaining the quality of transparent areas.
- Adjust Texture Import Settings in Unity: Ensure that the texture import settings in Unity are optimized. Disable compression if it causes issues and ensure that the textures are set to full resolution.
Runtime Repacking:
- If you are using multiple pages, you can repack the textures at runtime. This is useful when you have many costume differences and need to change them dynamically. Refer to the spine-unity Runtime Documentation: Combining Skins for more information.
Example Scene:
- You can see a demonstration of skin combination and texture repacking in the example scene Spine Examples/Other Examples/Mix and Match Skins.

By following these steps, you should be able to manage the size of your exported PNGs more effectively while maintaining the quality of your 2D textures in Unity.

Misaki · 27 Th09 2024

novus As Spinebot answered, it's a good idea to use runtime repacking. In other words, when you export from Spine, don't pack all images into one image, but export them as multi-page images. Then combine used texture regions of a collected skin into a single texture at runtime using the Skin.GetRepackedSkin() method.

Also, check out "Spine Addressables Extensions", which provides integration of Addressables on-demand texture loading. This is useful for speeding up the loading of Spine skeletons that refer to a large number of Atlas texture pages:
EsotericSoftware/spine-runtimestree/4.2/spine-unity/Modules/com.esotericsoftware.spine.addressables/Documentation

Nnovus · 27 Th09 2024

Thanks a lot for all the info.

So in our character we depend on multiple materials in order to recolor parts of the avatar and do specific effects on other parts and also we have the paper doll system.

And these materials require the texture to be assigned in them already.
Will this get affected by multi-paged export and runtime repacking?

Harald · 27 Th09 2024

@novus I'm not sure I understand what your current setup looks like. In the top posting you've mentioned having a single very large atlas page texture, but in the above posting you mention having multiple materials. Could you describe what materials you currently have, what textures are assigned at each material? Do you have one large atlas page texture and use multiple materials with the same atlas texture? If so, what is each material used for?

Will this get affected by multi-paged export and runtime repacking?

Exporting as multiple atlas pages instead of a single atlas page multiplies the number of materials, yes.
Runtime repacking reduces multiple atlas page textures to a single texture (unless you repack multiple skins separately or multiple lists of attachments separately, each to a single texture). I'm not sure what your materials are used for, so I can't describe the effect it has on your project.

Nnovus · 22 Th10 2024

@Harald Sorry for late reply.

In short, I have created a paper doll system using spine that covers eyes, mouths, hair, eyewear, hats, outfits and even full heads. What made it a bit more complex is the need to recolor skin and hair.
So I have created a separate material for skin, hair, eyewear (needed their own material to control transparency of glass material), a material just for full heads, and lastly for full avatar without those.
The algorithm dynamically picks up slots using prefixes in spine slots and assign them to the correct material that gets recolored.

The atlas got bigger due to the introduction of full heads paper doll. Full heads are big.
So what I really want to do is create two png exports, one for all of the avatar and one just for the heads.

Currently our Spine image folder has two main folders full heads and avatar.

How can I export properly two have two png atlases one for each folder and ofcourse with the correct binary configs export.

Harald · 22 Th10 2024

novus Currently our Spine image folder has two main folders full heads and avatar.

How can I export properly two have two png atlases one for each folder and ofcourse with the correct binary configs export.

If you have your attachment images already sorted by folder for the desired output atlas, it sounds as if your would best export based on folder structure as Spinebot mentioned above.

Nnovus · 30 Th10 2024

I followed the instructions regarding folder structure and we had done this before but I still got one export.
As you can see we have 2 main subfolders and inside them everything is also categorized as the project is getting bigger by time. So if I use Combine subdirectories then I get a one exported image.

I believe the way to go is only have 2 subfolders inside the Skins folders and the images inside these subfolders must not be in their own folders, correct? Unless there is a way to do it since this will require repathing the whole project.

image

Misaki · 31 Th10 2024

novus It would be better not to use the Combine subdirectories checkbox in the texture packer settings and use pack.json to ensure that only certain subfolders are combined. If you want to configure pack settings to affect only specific subfolders, you can place a pack.json describing the pack settings. For example, you can combine the subfolders under the "MainAvatar" folder by placing a pack.json in the "MainAvatar" folder with the following json:

{
    combineSubdirectories: true
}

For more information on pack.json, see the user guide: https://esotericsoftware.com/spine-texture-packer#JSON-Configuration

Nnovus · 5 Th11 2024

@Misaki Yes this is helpful, but I have tested it and this seems to only work if you use the Texture Packer.

If I use Export and each folder has its own pack.json I still get a 100 image atlases instead of just 2.
Is there a way to make it work with Export?

Nnovus · 5 Th11 2024

The issue I have with using the Texture Packer is that it creates 2 different atlas.text json and if I add both Atlas Assets in the Sekeleton Data then I get missing region errors.
So I need 2 atlases with one skeleton data.

Harald · 5 Th11 2024

If I use Export and each folder has its own pack.json I still get a 100 image atlases instead of just 2.
Is there a way to make it work with Export?

Unfortunately, as the documentation reads: "When packing during data export and Attachments is chosen, the pack.json files are not used"
http://esotericsoftware.com/spine-texture-packer#JSON-Configuration

In general we would recommend automating your exports via scripts by using the Spine command line interface. This way you can re-export your projects in one go, which also comes in very handy when upgrading the Spine version.

novus The issue I have with using the Texture Packer is that it creates 2 different atlas.text json and if I add both Atlas Assets in the Sekeleton Data then I get missing region errors.

It's valid to have multiple atlas assets assigned. If you get missing regions, it's likely the paths which are incorrect due to different top- and subdirectories used, like the .atlas.txt file containing subdir/image1 while the skeleton data file requires topdir/subdir/image1 (or the other way round). You would need to check what your .atlas.txt file contains by opening it in a text editor. This can be resolved by specifying a different input directory to the texture packer (e.g. top-directory instead of sub-directory).