sprite textures sometimes include edges of other sprites

[timetocode]

Hello. I'm having an issue with stripes of pixels from one sprite appearing in other sprites sporadically. I've included an image below.

I'm loading a spritesheet made by the free version of texture packer. I then make sprites out of the textures, set anchors to 0.5, set scale to 3. Animations are performed by changing textures. I also emulate a camera by having one container named 'stage' and moving it around based on the player's position and window dimensions. I frequently (but inconsistently) see an extra strip of pixels appear on the left edge of sprites as if the source rectangle were subtly incorrect. Am I not supposed to mix the anchors, scale, and a 'camera' in this manner?

I've tried rounding/flooring the x,y positions of certain objects and some visual errors have lessened. I used to have a bug where I would get 1 pixel-wide vertical stripes between tiles which was fixed by flooring the camera container's x and y. However I'm still getting some of these 1 pixel strips from neighboring textures in the sprite sheet. Perhaps these are unrelated visual issues. Here's a picture of one:

The pixel strip is to the left of the greenish character. It is particularly odd because it is the only thing that happens to be 1 pixel wide. Everything else is scaled by 3.

Here are the sections of code that are involved:

// creating the character (well, just the body, its part of
// a larger class that adds many things to a container like
// the gun and other effects)
this.body = new PIXI.Sprite.fromFrame('guy0.png')
this.body.scale.x = this.body.scale.y = 3
this.body.anchor.x = this.body.anchor.y = 0.5
this.addChild(this.body)


// and later the character is animated like this
if (this.animationLastFrameTime + this.animationFrameDelay < now ) { 
    this.runFrame++
    if (this.runFrame > 5) {
        this.runFrame = 0
    }  
    this.animationLastFrameTime = now
    this.body.texture = PIXI.Texture.fromFrame('guy'+this.runFrame+'.png')
}


// and here is the camera code from an entirely different area of the program
// NOTE: Math.round prevents vertical stripes from appearing between the tiles
stage.x = Math.round(-player.x + window.innerWidth * 0.5)
stage.y = Math.round(-player.y + window.innerHeight * 0.5)

Any idea what I'm doing wrong?

Thanks!

[bubamara]

if your sprites are packed too close each other there could be some edge bleeding from neighbouring sprite. In TexturePacker try to add some border padding (under Sprites roll-out)

[timetocode]

Thanks, that worked! And border/shape padding is enabled in the 'lite' version of texture packer.