Jump to content

sprite textures sometimes include edges of other sprites


Recommended Posts

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

// and later the character is animated like this
if (this.animationLastFrameTime + this.animationFrameDelay < now ) { 
    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?


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...