Texture atlas sprites not displaying incorrectly

[lolrtz]

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:

1. 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.
2. 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?

 

[lolrtz]

Also, the scale is set to 1 in the texture atlas.

[ivan.popelyshev]

You are doing something wrong, its supposed to work. My telepathic abilities tell me something strange about "anchor=0.5 with odd width ", "scale>1 and wrong baseTexture scaleMode", "huge atlas (>=4096) on iphone"

Please provide a demo and more information so I don' have to rely on esotery.

[ivan.popelyshev]

Wanna see more blurred stuff? https://github.com/pixijs/pixi.js/pull/5422

[lolrtz]

5 hours ago, ivan.popelyshev said:

You are doing something wrong, its supposed to work. My telepathic abilities tell me something strange about "anchor=0.5 with odd width ", "scale>1 and wrong baseTexture scaleMode", "huge atlas (>=4096) on iphone"

Please provide a demo and more information so I don' have to rely on esotery.

Your intuition was good enough. It is the "anchor=0.5 with odd width". When I changed it to 38 and rounded the coordinates it appears just fine.

What is the solution to this problem other than rounding every single one of my textures? Is there no better way? EDIT: Also, the aliasing is back when I rotate the sprite even when it has even dimensions

[ivan.popelyshev]

Make them even, i guess. or set roundPixels to true, in v5 it can be applied to any sprite, "sprite.roundPixels=true"

Try scaleMode for rotating, "texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST". Also set `mipmap` to 'PIXI.MIPMAP_MODES.OFF` or just `false` if you use v4. BaseTexture is the same for all texture in the atlas.

"leaking" from neighbour rect can be solved two ways:

1. Add padding in texturePacker setting.

2. Make shader that cares about borders. I did that in pixi-tilemap (fast) and pixi-picture for v4 (slow, no batches).

Some people try 10 solutions and every time it gets better , but in the end, they add padding anyway

Those are general GL (WebGL, openGL) things, you can meet them in other renderers too.