Quads and artifacts from sprite sheets

[pudding]

Hello lovely people,

I've been playing with quads and selecting sprites from a spritesheet and I've been seeing some spillover from neighbouring portions of the spritesheet. I'm running Windows 7, 64 bit.

I don't really have any shareable code but I noticed that it also happens in GloryFish's game which he submitted this year for a reddit game jam, I hope he doesn't mind me posting this.

If you look at the screenshot in which I've zoomed in to the relevant bit, and the sprite sheet, you can see the bird picks up a little bit of the neighbouring sprite (the relevant ones are the top two on the spritesheet image). The extra bits are not the same width as the pixels of the bird itself so it's not just the code overreaching into the next sprite on the sheet and also they are not there all the time - it depends on where you are on screen.

Also, because the artifacts are being pulled from the neighbouring image somehow, I'm fairly sure that must mean it's not just crappy graphics hardware on my computer freaking out and drawing randomness.

The relevant bits of code (from the player.lua file) are:

Code: Select all

  player.tileSize = 16
  player.scale = 2
  player.offset = vector(player.tileSize / 2, player.tileSize / 2)

...

player.animations['standing'].quads = {
    love.graphics.newQuad(4 * player.tileSize, 0, player.tileSize, player.tileSize, player.tileset:getWidth(), player.tileset:getHeight()),
    love.graphics.newQuad(5 * player.tileSize, 0, player.tileSize, player.tileSize, player.tileset:getWidth(), player.tileset:getHeight()),
    love.graphics.newQuad(6 * player.tileSize, 0, player.tileSize, player.tileSize, player.tileset:getWidth(), player.tileset:getHeight()),
    love.graphics.newQuad(7 * player.tileSize, 0, player.tileSize, player.tileSize, player.tileset:getWidth(), player.tileset:getHeight())
  }

...

love.graphics.drawq(self.tileset,
                      self.animations[self.animation.current].quads[self.animation.frame], 
                      self.position.x, 
                      self.position.y,
                      0,
                      self.scale * self.flip,
                      self.scale,
                      self.offset.x,
                      self.offset.y)
end

[GloryFish]

Oh man, that issue is so annoying! I think it even shows up in the screenshot on the wiki. Let me know if there's anything I can do by way of adjusting or testing. If anyone else can confirm or deny this behavior maybe we can file a bug on bitbucket.

Also, the code is on GitHub for easy browsing.

[bartbes]

I assume you've already went and double-checked the coordinates, so instead I will ask whether you've experimented with the Filter modes. Scaling can result in bleeding with.. oh man, I never know which is which..

[Lafolie]

It's generally good practice to leave at least a 1 pixel gap (of transparent colour) between each sprite in a sheet. This can prevent the bleeding that is happening here. It's not really an issue with Löve in particular, this sort of thing occurs in loads of systems when you scale from a sheet. I'm sure there's ways of getting around that, but I always leave a gap to be safe.

[pudding]

I can confirm co-ordinates were double checked and also happens when scale factors are set to 1

[Kadoba]

I use tilesets and sprite sheets with no margins between the cells a lot and as long as the view, quads, and draw calls are all aligned and scaled properly there's never any bleeding or artifacts. I might be wrong but this really looks like a position issue.

Yeah I just looked at the .love you attached and simply floored the draw position in player.lua. Now the bleeding is gone.

Code: Select all

-- previous:
love.graphics.drawq(self.tileset,
                      self.animations[self.animation.current].quads[self.animation.frame], 
                      self.position.x, 
                      self.position.y,
                      0,
                      self.scale * self.flip,
                      self.scale,
                      self.offset.x,
                      self.offset.y)
-- new:
love.graphics.drawq(self.tileset,
                      self.animations[self.animation.current].quads[self.animation.frame], 
                      math.floor(self.position.x), 
                      math.floor(self.position.y),
                      0,
                      self.scale * self.flip,
                      self.scale,
                      self.offset.x,
                      self.offset.y)

[GloryFish]

That's it! Thanks, that makes sense.

I'm working on another game right now and the same issue appeared.

So, the general tips are:

- leave at least 1 pixel margin around your sprites
- draw your quads at non-fractional coordinates

[Lafolie]

Flooring x/y positions for things to be drawn onto the screen is usually a good thing to do.

[Lua Hal]

Your game is awesome dude.

I'd recommend a non-white background and some way to heal.

Also, my highscore is 250.