Bleed/transparent pixels when using spritesheets

[rbhalla]

I appreciate this is a repeated topic, but I have been unable to find a solution to the what I'm specifically facing.

I have a spritesheet generated with texturepacker with both border and shape padding.

If I place any tiles next to each other, there always seems to be an artefact. Here is an example of what I mean: https://jsfiddle.net/uzmqadkn/

If I remove border/shape padding, I get bleed from nearby tiles. If I add more, I just get a constant 1 (or half pixel?) border around the tiles when they are placed next to each other.

In the jsfiddle above, I'm increasing the scale to make it more evident as an example, but in reality, even at normal scaling, this is what I see:

Aside from writing my own shader (which is another alternative I've seen recommended), is there a fix I may be missing?

[bigtimebuddy]

Try setting a scaleMode, this tells the GPU how to interpolate pixels that are scaled (default is LINEAR).

const sprites = new PIXI.Spritesheet(
  new PIXI.BaseTexture(img, {
  	scaleMode: PIXI.SCALE_MODES.NEAREST,
  }),
  spritesData
);

[rbhalla]

Ah, I had seen this property but had seen it marked as deprecated. Interesting to note it can still be used on the base texture.

Oddly doing this with padding resulted in a vertical pattern:

However, removing all padding seems to have done the trick! Thank you!

[bigtimebuddy]

We had deprecate the PIXI.settings.SCALE_MODE, which was a global setting. You can always set it locally on the BaseTexture

[bhousel]

We had this issue too with our tiled images that we pack into an atlas.
I ended up applying a "half pixel correction" to the texture coordinates of these types of textures.
The code below seems to do the trick.

  // For tiles we want to preserve their power of 2 dimensions - so no padding!
  // But we also want to prevent their colors from spilling into an adjacent tile in the atlas.
  // Shrink texture coords by half pixel to avoid this.
  // https://gamedev.stackexchange.com/a/49585
  if (atlasID === 'tile') {
    const rect = texture.frame.clone().pad(-0.5);
    texture.frame = rect;  // `.frame` setter will call updateUVs() automatically
  }

Check this post for more info:
https://gamedev.stackexchange.com/questions/46963/how-to-avoid-texture-bleeding-in-a-texture-atlas/49585#49585