यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

Artifacts in PNG sequence export

Bryant

We're authoring all of our animations in high resolution at the 4K standard, but when the art assets are that high res, Spine introduces some graphical artifacts both inside the editor and in the PNG export.

Here's a portion of a couple frames from one export:

Loading Image

Is there any workaround for this? The artifacts aren't in the source assets, and it's very noticeable in the export 🙁

Cheers! 🙂

Bryant

Nate

The images are translated, scaled, and rotated in Spine. The pixels almost never match up exactly to screen/output pixels, so some filtering must occur. You can try enabling MSAA in the settings.

Bryant

Oh! I didn't even notice that option in there. Sorry! 🙂 That did the trick! Thanks so much! 😃

Hi Nate 🙂

Sorry, I spoke too soon! Enabling MSAA in the settings clears up the artifacts in the editor, but doesn't have any effect on the PNG sequence export. I also tried exporting the animation as a movie, and the artifacts are still present.

Is there a separate setting for enabling MSAA on the exported images?

Cheers! 🙂

Bryant

Nate

Are you sure? MSAA should be used for export if it's enabled for the editor. Note a restart of Spine is required once the MSAA setting is changed.

Bryant

I'm pretty sure! Here's a screenshot of my settings menu:

Loading Image

I restarted Spine after setting it to 8x (the asterisk won't go away though... I'm just guessing that means I changed it from the default setting?).

And here's a screenshot of my character in the editor. It doesn't have any of the artifacts present in the PNG export (I'm still seeing the same artifacts that I showed in my initial post):

Loading Image

Are there any other steps I may be missing? :-/

Edit: One more thing that might be relevant... I'm running Spine on OS X El Capitan on a Late 2012 iMac with a dedicated graphics card, and an Early 2011 MacBook Pro with an integrated Intel card. Both exhibit the same behaviour.

Edit again: I also tried exporting with just 2x anti-aliasing, but that didn't help 🙁

Oh! And just in case it's helpful, here's the contents of my spine.log file when running on my iMac:

Spine Launcher 1.8.14-full
Mac OS X x86_64 10.11.1
Java 1.7.0_51 Oracle Corporation
Java HotSpot(TM) 64-Bit Server VM
Up to date: 2.1.27
Licensed to: *****, *****
Spine 2.1.27 Professional, JGLFW
NVIDIA Corporation
NVIDIA GeForce GTX 680MX OpenGL Engine
2.1 NVIDIA-10.6.47 310.42.05f01
Started.

Nate

Ah, my apologies, it seems OpenGL doesn't apply MSAA to FBOs without jumping through some hoops! I've made a note to look at this more closely.

Bryant

That's unfortunate 🙁

Do you know if this problem occurs in Windows, as well? I tried exporting via a Windows virtual machine (through Parallels), and I think it uses DirectX 10, but MSAA wasn't even supported in the editor, let alone the PNG exporter 🙁

Nate

It's an OpenGL problem, so probably works the same everywhere. It seems OpenGL 3.0 works differently, but there may be compatibility issues if Spine used 3.0. It could be made optional, or Spine could use an extension if the GPU supports it, or Spine could do MSAA manually.

Bryant

I have no idea how much work this is on your end, but defaulting to OpenGL 2.x while giving us the option to use 3.0 sounds pretty reasonable 🙂 I'm sure I'm in the minority already for needing the PNG export functionality 😃

Pharan

Instead of MSAA, could you give the source images a bit more padding so your mesh isn't flush against the opaque pixels of the images?
Is that an option for you? Or has too much animation and rigging been done already? Also, can we see what your mesh looks like?

Bryant

Unfortunately, I think we're too far along with the rigging and animating to revisit the source images 🙁 But all of our source images do already have a fair bit of padding around the edges already. The umbrella piece that I've been showing above, for example, has between 50-80px of padding depending on the side. How more much padding do you think we would need to add to get around those export artifacts?

Here's one of our rigs:

Loading Image

We should have tested the PNG export a lot sooner, but we only started thinking about abandoning the Spine runtime pretty late in our process 🙁

Pharan

It'd say around 2px on each side is super safe if you're rendering at roughly the same resolution as your source texture. If you're scaling it down, you're more likely to get artifacts around the edges.

Rule of thumb for super clean edges: Padding should be bigger if you're using meshes. Padding has to be bigger if the resolution is higher and you intend to scale down at runtime. And it has to be bigger, the smaller you intend to scale it.

I'm talking about padding when you export your image parts for use in Spine. Not padding when you pack your atlas. Region padding only needs to be 1px. At most 2px in any case.

I don't think this information applies to you if you had 50-80px padding already. But note I'm talking about padding within the meshes, not just padding on your source textures. It's just that you need a minimum amount of padding on your source textures so your mesh can have some space to work with.
If you had 50-80px of padding but you specifically created meshes that chopped off or extremely bent at opaque parts of the image. Then really, that's what's causing the artifacts (sans MSAA).

The rig isn't too informative. The mesh (where it shows the vertices and sides and triangles) will show you why you're getting artifacts.
The point is to move the outer vertices and sides of the mesh away from the opaque pixels of the images.

Nate

Can you show the mesh in edit mesh mode?

2px should do it. I don't think I've seen a problem even at large and small scales, though obviously at small scales any image starts to look jagged.

You can add whitespace to existing images and Spine will update the mesh. You may need to select all vertices and move them in edit mesh mode, but you won't need to resize your meshes.

Bryant

I think this is what you guys are asking to see? 🙂 I didn't even know you could edit meshes within Spine... I thought it just used quads for everything 😃 But it seems like my artist has meshes setup for some (not all?) of the images:

Loading Image

We'll try adding some padding to the meshes! I'll report back after giving it a try. Thank you for the recommendation 🙂

Pharan

Yep. That's it.
If you want super clean edges (next time), make sure to ask your artist to keep the mesh edges far enough away from opaque pixels.
The points where the edges touch the non-transparent areas are where you'll get jagged lines, again, sans MSAA.
If you zoom into the edges of the umbrella mesh, you'll probably see it chopping off part of the image. Or at least stretching it too much.
Extra padding is also sometimes necessary to keep a simple mesh shape if that's a concern.

Bryant

I'm learning as I go! 😃 Thank you for the help. The artist is tweaking the meshes right now, so hopefully that does the trick 🙂