How do I enable anti-aliasing or smooth edges using the PIXIJS v7 runtime?

NijiNeko

Davide

I checked the filter value and it was Linear,Linear, so it doesn't seem to be a problem with the filter.

Davide

NijiNeko

What's the value of the filters actually used at runtime?

NijiNeko

Davide
I didn't set this value in the code

Davide

NijiNeko

Can you use a debugger or just print out the values?
Have you tried to set them manually to Linear as suggested above?

NijiNeko

Davide
Sorry, I didn't find where the setFilters method is called, and I didn't find the specific calling method in the document, but I found these two values, they seem to be set to 0 and 1

Davide

NijiNeko

If those are the actual values, something strange is happening. Unfortunately, I cannot determine the cause of the issue without the assets or a reproduction case. Can you share a repro or at least you assets? You can send them also by email at contact@esotericsoftware.com

NijiNeko

Davide
OK

Davide

NijiNeko

Thanks for sending us the assets. I've tried them and they render as expected.
I opened them by using our Skeleton Viewer and compared the result with how spine-pixi renders it and it's exactly the same.
If you open the atlas PNG, you can see that the images are rendered as in the PNG.

Are you sure that the 3.8.99 assets are the same as the 4.2.37? Maybe you can send also those assets so that I can compare them with the ones you already sent. Maybe I can also try to run them with 3.8.99 to see the difference.

NijiNeko

Davide
I can't find the assets of version 3.8.99 because the update was last week and the old assets have been deleted.
I don't know why this rendering difference occurs. I use both dependent libraries in the default way of the documentation.
However, after testing, if the original resolution of 911x2033 is used for rendering, neither library will have this edge jagged problem.
This jagged problem only occurs when using adaptive resolution, such as 344x767.
I don't know if it has something to do with the resolution.

NijiNeko

NijiNeko
Oh wait, I found it, I'll send it to you via email

Davide

NijiNeko

If you are scaling down the object and want to keep smooth edges, you want probably to enable mipmaps.
As before, change the filters using setFilter.
Assuming the key of you atlas is "atlasKey", and your atlas has a single page as in the assets you send by email, you can do like this;

const atlas = PIXI.Assets.get("atlasKey");
atlas.pages[0].texture.setFilters(
  spine.TextureFilter.MipMapLinearLinear,
  spine.TextureFilter.MipMapLinearLinear,
);

This will generates mipmaps and should scale down with smoother edges.

NijiNeko

Davide
Wow thanks, this really improves the rendering
Thanks a lot for your help