When rendering with PIXIJS v7 runtime, there are obvious edge jaggedness at some resolutions. How can I eliminate these edge jaggedness? This problem did not exist when using the dependency library https://github.com/pixijs/spine
How do I enable anti-aliasing or smooth edges using the PIXIJS v7 runtime?
Doesn't seem to work, and the API has been marked as deprecated
This is rendered using pixi-spine, Spine version 3.8.99
This is rendered using @esotericsoftware/spine-pixi, Spine version 4.2.37
Hello!
You are right, Spinebot answer is inaccurate. I've hidden it.
spine-pixi detects the filters to use by parsing them for you from the .atlas file.
Try to open your text atlas file and see the value of the filter entry for each page.
If the value is filter: Nearest, Nearest, this is the reason why the textures are less smooth.
In this case, the easiest solution is to export you assets again using Linear as value in the Filter min and Filter mag settings of the Texture Packer Settings.
Otherwise you can also just manually uptate these values.
You can change these values at runtime too. Just access the atlas page and invoke the setFilters(minFilter: TextureFilter, magFilter: TextureFilter) method. Here you can fine the possible values of the TextureFilter enum. However, in Pixi only Linear and Nearest are available.
Just one more additional thing. We just release spine-pixi-v8. With this update we also deprecated moved spine-pixi to spine-pixi-v7. If you want to stay on PixiJS 7, please move to spine-pixi-v7.
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
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.
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.
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.