graphical artifacts when drawing quads

[AlgidPlasma]

Hey, I'm working on a small project that involves drawing portions of a larger image (a texture atlas of tiles in this case) and I've noticed that when you combine this technique with love.graphics.scale() / love.graphics.translate() the love.graphics.draw() function draws lines of pixels outside of the specified quad from the texture atlas, I'm going to attach my project so you can see what I'm talking about. When you move around in the world you'll notice that the tiles sometimes have some pink in them and this is because the adjacent pixels in the texture atlas are pink. Is there any way to get rid of this artifact or is it inherent in the way opengl draws textures?

[s-ol]

Hey, I'm working on a small project that involves drawing portions of a larger image (a texture atlas of tiles in this case) and I've noticed that when you combine this technique with love.graphics.scale() / love.graphics.translate() the love.graphics.draw() function draws lines of pixels outside of the specified quad from the texture atlas, I'm going to attach my project so you can see what I'm talking about. When you move around in the world you'll notice that the tiles sometimes have some pink in them and this is because the adjacent pixels in the texture atlas are pink. Is there any way to get rid of this artifact or is it inherent in the way opengl draws textures?

Without looking at your code, are you using SpriteBatches? If you aren't take a look at them and the tiling tutorial, i've never had issues doing it like that.

[AlgidPlasma]

Just switched rendering from quads to using a spritebatch, same problem is still there. Any ideas?

[zorg]

I had the same problem as well before;
i do recall reading more than one thread here on the forums about this,
for which the solution was to put 1px transparency-borders around all the tiles in the atlas, so it won't bleed under any circumstance (like rotation for instance)
you could also try to displace every drawing operation by .5 pixels, the reason for this too was explained in other threads.

[Jasoco]

This topic gets posted way too often.

If you floor your drawing coordinates you can eliminate this problem. Floor the X and Y of every image and the X and Y of the translation. What's happening is the image is drawing at a decimal position, which is impossible on a fixed pixel display. So the GPU tries to negotiate which color to use and is blending the two pixels together. The brown of the dirt and the pink of the adjacent empty portion.

Alternatively pad your sprites with a 1 pixel border of transparency. Or 1 pixel border matching the edge pixels if it's a tile.

But really, do the first suggestion. It's much easier and better.

Code: Select all

love.graphics.draw(myImage, math.floor(x), math.floor(y))

[s-ol]

Maybe there should be a LÖVE feature to do this automatically.