Цей сайт найкраще переглядати в сучасному браузері з включеним JavaScript.

Linear Filtering in PNG export?

metadept

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.

Loading Image

Pharan

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.

metadept

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.

Nate

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!

metadept

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

Crian

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

Nate

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

Crian

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

Nate

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

Crian

Here an example:
Loading Image
Just the shoulder is perfect because I haven't moved it.

Nate

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:
Loading Image

Crian

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

Nate

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.

Crian

Sorry it took me a little time, you can download the example from this link:
http://www.criansoft.com/images/Pixel_a.zip

Loading Image

Nate

Thanks. What is the problem? I see this:
Loading Image

Crian

If you export Pngs as a sequence, the animated part of the leg will be as if the linear filtering was enabled.
Loading Image
(look at the green pixels around the shin)

Nate

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. 🙂

Crian

Thanks a lot, looking forward for next release then!

Nate

1.4.09 is available now.

Наступна сторінка »