• Editor

  • Linear Filtering in PNG export?

    anglais
Related Discussions
...

I'm currently working on a game using CraftyJS. Currently, I import PNG source images for the character's various body parts into Spine, build my animation, and export a series of PNG files which I then pack into a sprite sheet for rendering (using TexturePacker). Unfortunately, I can't seem to get rid of the anti-aliased halo around the body parts!

I've read several threads on this forum and elsewhere without finding a good solution. I can't modify the OpenGL rendering mode (since it's occurring within Spine's export process), and adding slight anti-aliasing on the source images helps some but doesn't solve the problem. I noticed that the 'Linear Filtering' setting fixes this completely, but only within the editor! Is there a way to apply this same setting to exported PNGs?

If there's an effective workaround, or I'm just doing this wrong, please let me know. Thanks!

EDIT: Here's one of the images to illustrate what I'm talking about. Note the dark outside edges of the torso and light and dark inside edges of various body sections.

Image supprimée en raison de l'absence de support de HTTPS. | Afficher quand même

HTML5?

Either way, this seems like a TexturePacker question.
If you do stuff for browser canvas, your export settings (regarding the alpha) would be different, I imagine. Other than that, I don't think there's much you can do to tell the browser how to render images outside of a WebGL environment. Then again, I've never tried this sort of thing.

It is HTML5 Canvas based, yes, but the artifacts are created at the point of export from Spine so changing TexturePacker or render settings doesn't affect them.

I've made the linear filtering setting be used for image/video export. I've also fixed image/video export translucent edge artifacts as shown in your image above. These will be in 1.3.11. Thanks!

Awesome, thanks for the quick response! Looking forward to using Spine for many future projects!

2 mois plus tard

Hello, I'm new from this forum.
I would like to know if there is a way to export png-files without linear filtering.

Crian, if you uncheck linear filtering in the Spine settings, export should not use linear filtering.

Thanks for the quick replay, yes I have uncheck it, but moving parts always have the linear filtering.

Can you show an example of what you mean? Preferably using one of the example projects so I can reproduce it.

Here an example:

Image supprimée en raison de l'absence de support de HTTPS. | Afficher quand même


Just the shoulder is perfect because I haven't moved it.

I can't reproduce that since I don't have the graphics. I also can't see how it is supposed to look.

If your images are on exact pixels and not rotated or scaled, then they will be drawing exactly like the source image. Otherwise the images are subject to filtering and there may be artifacts. This has to happen, as pixels from the source images need to be sampled and a new pixel determined. If linear is checked, linear filtering is used, otherwise nearest neighbor is used.

This should not be much of an issue because when images are animated it is pretty much impossible to avoid having images on exact pixels. Also, moving images generally hide any filtering artifacts.

Linear is on the left:

Image supprimée en raison de l'absence de support de HTTPS. | Afficher quand même

You're right but I'm working in low resolution (Pixel art).
In the editor all the pixels are perfect even when they are animated.
Could not be possible to save the images exactly how they look in the editor preview?
Without rendering? I mean

The export should work exactly like the rendering for the editor. If you can show me how it differs and provide something so I can reproduce that, then I can take a look.

Thanks. What is the problem? I see this:

Image supprimée en raison de l'absence de support de HTTPS. | Afficher quand même

If you export Pngs as a sequence, the animated part of the leg will be as if the linear filtering was enabled.

Image supprimée en raison de l'absence de support de HTTPS. | Afficher quand même


(look at the green pixels around the shin)

Hmm, I did find linear was being used for the min filter in one spot, which is not good. Try again in 1.4.09. 🙂

Thanks a lot, looking forward for next release then!

1.4.09 is available now.