So I'm messing around with Pixi.js and I'm trying to render sprites from a texture atlas and I'm running into some weird problems. I used TexturePacker to create the texture atlas and packed image file
I have two problems:
- Setting `antialias` to false does not work under any circumstance. The sprite is ALWAYS being anti-aliased and does not keep its sharp edges. I want the sprite to always have sharp edges.
- Changing the sprite's X/Y position creates glitches and parts of another texture are shown
I created my textures with TexturePacker and I have verified that the output for the sprite has the correct bounds and measurements in the packed image file and JSON file. That is not the problem.
Also, all screenshots were taken from Photoshop after zooming in on a direct download of the image from the canvas. The aliasing is a result of PIXI, not me. I will be using ZOOMED IN screenshots of the enlarged original pictures in order to make my problem visually obvious.
Here is a screenshot of the original sprite up close (in the sprite sheet) in Photoshop. Take note of the crisp, hard edges of the sprite. As you can also see, the sprite next to the plane is a red flag. The plane has a width and height of 37x20
When I load the sprite from the texture atlas, and I render it on the canvas, it is broken and displays parts of the red flag, like some kind of off-by-one error. Also, notice how badly the texture has been aliased.
The following image is rendered at INTEGER coordinates after using Math.round(), (373, 283):
And oddly enough, when you use FLOATING point coordinates without rounding, it gets rid of the red line, but it is STILL aliased: (372.5, 282.5)
The second one looks better, but what is wrong with the rendering that it will only render correctly on floating point coordinates and will NEVER alias the pixels?