[ios] Xcode [Compress PNG Files - Packaging] cause Render bug

Allen

Hello,

Recently, I've been testing the Spine iOS SDK and encountered an issue. When I drag a Spine resource into Xcode and run the build, the character appears different. This issue arises particularly when the Spine Editor project uses resources that have been feathered in Photoshop, leading to a loss of quality during the packaging stage.

After investigating this issue thoroughly, I discovered that it stems from Xcode’s “Compress PNG Files” setting during the packaging process. Unfortunately, merely disabling this option isn't effective. To circumvent this issue, we should consider changing the Atlas PNGs to a Data type, which prevents PNG compression.

I've noticed that if you don't use the feathering feature in Photoshop, the compression of PNGs doesn't affect the quality. Therefore, I believe it's crucial to specify this in the documentation or guidelines to alert users about this potential pitfall.

I have already sent the files via email

Mario

Disabling PNG compression should fix this. Can you tell me why it isn't effective? Could you explain what you mean by "changing the Atlas PNGs to a Data type"?

Allen

Mario
Disabling PNG compression will increase the app size, which will affect the overall package size.
https://developer.apple.com/documentation/xcode/reducing-your-app-s-size

changing the Atlas PNGs to a Data type:

Nate

If you used Bleed when packing your atlas, transparent pixels in the PNGs contain color data that is needed to render without edge artifacts. Using PNG compression tools will almost certainly delete this data. If you want to use such tools (among other reasons) then you should use Premultiply alpha.

This issue arises particularly when the Spine Editor project uses resources that have been feathered in Photoshop, leading to a loss of quality during the packaging stage.

Photoshop will also likely wreck Bleed. I wonder why you are re-saving your Spine atlas PNGs with Photoshop? Why not modify the source images?

What is the Photoshop "feathering" feature you mentioned? Usually that means to put a gradient on an edge.

I discovered that it stems from Xcode’s “Compress PNG Files” setting during the packaging process.

I would not trust Xcode for PNG compression, even if it worked right. I suggest using oxipng to process your PNGs yourself (if you are not using Bleed).

Allen

Nate
Photoshop "feathering feature" is feathering edge.

You might consider renaming the PNG file extension to .spng, where the 's' stands for Spine. This way, the file remains a PNG but with a different suffix, which can help avoid automatic compression by compilers on various platforms.

Why doesn’t the Spine Editor export resources as a single file when you choose binary export? It's because in Spine, the atlas and skeleton files need to be initialized together.

Nate

Spine outputs standard PNGs that match the PNG specification, so I don't think a special extension is warranted. That said, you could rename the PNG files if you wanted that.

Skeleton data is separate from the atlas by design: users can choose an atlas from many at runtime (eg different sizes based on user screen resolution), pack an atlas that contains multiple skeletons or contains regions for both skeletons and non-skeleton app needs, pack their own atlas either beforehand or at runtime (eg based on a player's equipped items, for games that have more assets than fit on a single atlas page), use the data without any atlas at all (eg use bone positions to position UI, or render SVG, etc), and other use cases.

Spine has a Pack checkbox when exporting data solely for convenience. You can run the packer separately and it often makes sense to do that, for example to pack an atlas containing images for multiple skeletons.

The best solution IMHO is oxipng and disable Xcode's mangling.

Allen

Nate
Thanks a lot! I learned so much.

Mario

+1 for oxipng, which beats Xcode's pngcrush based mangling by miles.