Overlapping "smooth" textures have slight black outlines

[Orfby]

I'm making a city building game, so when the view is zoomed out I have to set all the textures to smooth, otherwise the buildings look odd and lines start to disappear. But, when I set the textures to smooth, a blurry black outline appears in all the places where two sprites overlap. I've tried changing the anti-aliasing level of the window, but nothing changes.

SFML Version: 2.2
Ubuntu Version: 14.04
Graphics Card: Nvidia GTX 750 Ti

(It's very hard to see at first, but when you see it once, it's hard to un-see)

[eXpl0it3r]

The artifact probably gets created when the "smooth" edge is rendered into the background which is probably black, so some part of the half-transparent edge turns blackish.

Can you describe more what "the buildings look odd and lines tart to disappear" means?

[Orfby]

When the textures aren't smooth and when you zoom out, certain black lines disappear and the lines start to look jagged, probably because there aren't enough pixels to display the lines properly. The smooth textures fix this, but the visual artifacts make the game look unpolished to me.

Also, I changed the background from black to white for testing, but there is no change with the artifacts.

[Hapax]

One possible solution to try is to give each image in the texture a one pixel border but don't include it in the texture rectangle. It's usually best if this border is the edge pixels repeated.
So, for example, if the image in your texture looks like this:

expand it to look like this:

but don't include the pixels around the edge in the texture rectangle (the rectangle should be image you want to use, not including the borders).

Smooth takes into account its neighbouring pixels so what we're doing here is giving it neighbours that we want it to use.

[Orfby]

No luck, even by expanding the borders and then setting the texture rectangle of the sprite there is no difference in the amount of artifacts. I can try to change the rectangle of the texture instead of the sprites, but that would be more difficult and I (assume) would be less likely to work anyway.

EDIT:

I tried to set the rectangle of the texture itself (by loading the texture, getting the size, then loading again with the sf::IntRect argument), but that also doesn't work

[Hapax]

I'm not sure I was clear enough.

We'll assume now that it's just a single texture with a 16x16 image on it (like my first image above).
Using it, you set the texture co-ordinates for the four corners to:
(0, 0), (16, 0), (16, 16), (0, 16)

Then, change the texture to the expanded version (my second image above) which is, of course, 18x18.
Then you set the texture co-ordinates for the four corners to:
(1, 1), (17, 0), (17, 17), (0, 17)

If you're using sf::Sprites, you would just do:

sprite.setTextureRect(sf::IntRect(sf::Vector2f(1.f, 1.f), sf::Vector2f(16.f, 16.f))); // the last vector is the size, it's not a co-ordinate

EDIT: I don't know how far smoothing takes into account. It may take more pixels into account if the image drawn is very small. Therefore, you would have to add even more padding if you used this "solution".

[Orfby]

You was perfectly clear with your example, because that was exactly what I did. The reason I added the last part to my reply was in case I didn't understand you correctly.

[Hapax]

You may want to look into another solution - such as shaders - if you would like more control over this.
Using the technique that I mentioned above may be subject to faults depending on size (see my edit in the above post).

[Ztormi]

Just some of my thoughts on scaling.

If you are working with pixel art the only real way to implement zooming is to scale in factor of 1/2,1,2,3,4 and so on. You can't turn on smoothing as it will ruin the pixel art.

If you aren't using pixel art but for example pre-rendered 3d models you could draw your initial image larger than it appears in the "default" scale and have smoothing on, that way you can zoom in without losing detail.