Sprites display with black border bug.

[crowbar]

I am using PIXI v3.x and I have added a bunch of sprites to a container.

 

The container looks like this:

 

Which is confusing to me because each square sprite is flush with the others so the black lines in between don't make any sense.  The lines also seem to get larger and smaller when I zoom in and out or move the container.

 

The original images for the sprites look like these:

 

Can someone help me figure out where these black lines are coming from and get rid of them?

 

Regards,

Jordan

[xerver]

If you are scaling and using non-nearest scaling you can get this to happen in webgl due to floating point rounding errors and the wrapping type we use. Use PIXI.SCALE_MODE.NEAREST and it should clear up.

[d13]

 Use PIXI.SCALE_MODE.NEAREST

Which property should be set to this value?

[xerver]

Depends on how you load your textures, but baseTexture can take it in the ctor param:

 

http://pixijs.github.io/docs/PIXI.BaseTexture.html

 

You can also change it on the fly:

 

http://pixijs.github.io/docs/PIXI.BaseTexture.html#scaleMode

texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;