Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Overlapping "smooth" textures have slight black outlines  (Read 2881 times)

0 Members and 1 Guest are viewing this topic.

Orfby

  • Newbie
  • *
  • Posts: 31
    • View Profile
Overlapping "smooth" textures have slight black outlines
« on: August 24, 2015, 10:56:13 am »
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)
« Last Edit: August 24, 2015, 11:02:28 am by Orfby »

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10800
    • View Profile
    • development blog
    • Email
Re: Overlapping "smooth" textures have slight black outlines
« Reply #1 on: August 24, 2015, 11:03:10 am »
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?
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Orfby

  • Newbie
  • *
  • Posts: 31
    • View Profile
Re: Overlapping "smooth" textures have slight black outlines
« Reply #2 on: August 24, 2015, 11:11:18 am »
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.
« Last Edit: August 24, 2015, 02:05:33 pm by Orfby »

Hapax

  • Hero Member
  • *****
  • Posts: 3346
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Overlapping "smooth" textures have slight black outlines
« Reply #3 on: August 24, 2015, 03:18:25 pm »
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.
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Orfby

  • Newbie
  • *
  • Posts: 31
    • View Profile
Re: Overlapping "smooth" textures have slight black outlines
« Reply #4 on: August 24, 2015, 03:44:51 pm »
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
« Last Edit: August 24, 2015, 03:50:40 pm by Orfby »

Hapax

  • Hero Member
  • *****
  • Posts: 3346
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Overlapping "smooth" textures have slight black outlines
« Reply #5 on: August 24, 2015, 04:14:41 pm »
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".
« Last Edit: August 24, 2015, 04:22:05 pm by Hapax »
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Orfby

  • Newbie
  • *
  • Posts: 31
    • View Profile
Re: Overlapping "smooth" textures have slight black outlines
« Reply #6 on: August 24, 2015, 04:20:53 pm »
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

  • Hero Member
  • *****
  • Posts: 3346
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Overlapping "smooth" textures have slight black outlines
« Reply #7 on: August 24, 2015, 04:23:49 pm »
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).
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Ztormi

  • Jr. Member
  • **
  • Posts: 71
  • Web developer by day. Game developer by night.
    • View Profile
Re: Overlapping "smooth" textures have slight black outlines
« Reply #8 on: August 24, 2015, 06:10:53 pm »
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.