White edges around images

Aacai · 20 feb

Hi,

I'm seeing white edges around my image in Unity.

I've exported my Spine 2D animation using "Premultiply Alpha", and these are my current settings in Unity. I believe they’re correct for Premultiply Alpha, but I just wanted to double-check. (Below are two images—hover over an image and click the arrow.)

Also, I'm using Spine version 4.2.39 PRO, launcher 4.2.14, and here are my Spine Package versions in Unity. Should I update these packages? If so, should I just click the Update button in the top right, or do I need to copy and paste the new Git link instead? If the latter, could you point me to the latest Git link?

Spine Timeline Extensions 4.2.15 Git
Spine Universal RP Shaders 4.2.31 Git
spine-csharp Runtime 4.2.25 Git
spine-unity Runtime 4.2.73 Git
spine-unity Runtime Examples 4.2.35 Git

Thanks so much for your help!

Spinebot · 20 feb

The white edges around your images in Unity are likely due to a mismatch between your export settings from Spine and the import settings in Unity. Since you exported your animation with "Premultiply Alpha," ensure that your Unity texture settings are configured for premultiplied alpha. Specifically, check that the "Alpha is Transparency" option is disabled in Unity's texture import settings, as enabling it can cause visual artifacts with premultiplied alpha textures. You can find more detailed guidance on this in the [Spine-Unity documentation](https://esotericsoftware.com/spine-unity#Advanced

Aacai · 20 feb

I noticed some strangely colored pixels around the edges of the meshes.
(Below are two images—hover over an image and click the arrow.)

The white outline represents the mesh boundary, and the areas inside the yellow circles highlight black-and-white tinted pixels appearing along the edge of the mesh.

Aacai · 21 feb

Hi, here’s a summary of my issue:

I exported my Spine 2D animation with Premultiplied Alpha, but I noticed weird colors appearing around the edges of each mesh.

(I tried enabling Bleed mode, but it subtly changed my character's colors, which wasn’t ideal for me.)

Then, I realized that even inside Spine 2D, there were strange color smudges around the meshes. My original PSD/PNG images were clean, but after importing them into Spine, these unwanted colors appeared along the edges.
For now, I manually adjusted all the meshes by moving the blue dot toward the center of each image to prevent the edges from showing. After importing into Unity, it looks much better, but I’m wondering if this is a good approach. I’m not thrilled about having to create and adjust dots for every mesh.

Thanks for taking the time to read this, and I really appreciate any advice!

Misaki · 21 feb

acai Most visual issues should be resolved with the answers on the FAQ page of the spine-unity documentation. Please review the information there carefully:
https://esotericsoftware.com/spine-unity-faq#FAQ
Please also see the "Import Troubleshooting" video on this page.

Aacai · 21 feb

Thank you so much!
I wanted to move this post to the Editor tag, but I wasn't able to.

Later, I started to suspect that the main issue was that when importing a PSD or PNG into Spine 2D, the edges of the image sometimes have random color stains. When I removed them by editing the mesh in Spine 2D and then re-exported to Unity, they disappeared. Maybe it's a bug in Spine 2D?

By the way, the link you shared was extremely useful! It helped me double-check my Spine 2D import settings in Unity. (I confirmed that I followed the Premultiplied setup correctly, I'm using Gamma color space, and Generate Mip Maps is disabled.)

Misaki · 21 feb

acai Glad to hear that the link I shared was helpful!

Is your image significantly downscaled? If so, downscaling artifacts may occur. You may want to change the value of Color bleed in the Spine Settings - Viewport:

If changing the Color bleed value does not solve the problem, also check the other options in the Viewport section. There are several settings related to the appearance of the image outline.

Aacai · 21 feb

Hi Misaki,

Thanks again for your quick response!

Just one more question, I didn’t quite understand your question about "downscaled." When I import a PSD file, I usually don’t make any changes. Is there a way to upscale or downscale the imported PSD or PNG files?

Thanks so much again!

Misaki · 21 feb

acai If the image file itself is downscaled, there will not be much difference between the actual image file and its appearance on Spine, but if it is downscaled by a large amount on Spine, for example the scale of the skeleton's root bone is X:0.1 and Y:0.1, it may cause artifacts. This is because what you see in the viewport is not final, but rather a preview. When you animate on Spine, you may see half pixels. For example, if the parent bone of this image attachment rotates by a subtle amount, such as 10 degrees. In such cases, some part of the image may look unexpected.

Aacai · 22 feb

Thanks so much for clarifying! I ended up using the image as is—all my images are at a scale of 1.

As you said, the viewport is meant to be a 'preview,' but interestingly, when there was a seam around the mesh, it was also visible in Unity. After editing the mesh to remove the seam, it no longer appeared in Unity either. Just mentioning this in case it helps with further investigation, in case it's considered a bug.

In any case, the issue was resolved by editing the mesh, even though it required adding an extra mesh point (the blue dots).

Misaki · 24 feb

acai It is good that you found a workaround, but it is undesirable to have unintended artifacts around the image, so if you encounter similar problems in the future, I would appreciate it if you could email us a Spine project that can reproduce the problem. In any case, thanks for getting back to us!