While working on a moving platform, I noticed these line artifacts. I saw a bug report on the GitHub, but it doesn’t seem to have gotten much attention, so I made another report about it.
The problem is that these weird line artifacts keep showing up on my 9-Patch panel sprite when the camera is zoomed out. These appear in the preview too.
Those vertical dark yellow lines are not supposed to be there. The texture is 64 x 64 and all the margins are 12px. I hope this helps you figure out what the issue is. Thanks in advance.
The 9-patch object in PixiJS works off some pretty specific math that doesn’t like rounding of any kind, so if you are zooming out (which changes its rendering coordinates) it can have the same impact has when doing the round pixels/pixel perfect/etc because it is having to divide the coordinates by the zoom level.
I’m not sure there is a workaround since it is with the base renderer object.
I don’t know if it’s just because I come from Unity, but I don’t see why this would be an issue. Shouldn’t it just perform all the math on the base coordinates regardless of how zoomed out you are, and then round all the pixels to the camera resolution?
Yes, it should, but keep in mind that positions are not integers and the issue is something fundamentally weird with how certain objects (such as Panel Sprites) are handled by webGL/PixiJS at non-integer coordinates and their internal rounding. It can sometimes also cause gaps on tiled sprites, too.
Unity doesn’t use the same rendering pipeline tech, so it’s not 1:1.
You can see some history here (there’s a few dozen issues over on their github):
The general responses are that its related to how WebGL handles some graphics coordinates, but it may also be something specific to PixiJS (or at least fixable).
You might try changing to Linear scaling, if you’re currently on Nearest Neighbor, to see how it looks (yes it might be blurred, but it reduces coordinate rounding when scaling/zooming/etc, so it’s a test to see if that’s what’s impacting it for you)
