Visual artifacts with SDL_FLIP_HORIZONTAL when integer scaling is off

I’m using SDL_RenderCopyEx to draw bitmaps on top of a background image, and when I set SDL_FLIP_HORIZONTAL, sometimes those drawn images include visual garbage artifacts around the left side. This only happens when I use SDL_RenderSetIntegerScale to set integer scaling OFF. If I turn integer scaling on, the problem does not reproduce.

I’ve included an example image. The sheep on the left has been flipped - note the artifacts along the left edge. It is actually two images drawn side-by-side, which accounts for the artifacts in the middle of the sheep. The sheep on the right isn’t flipped, and it looks fine.

artifacts

I don’t see this on all platforms. I’m currently reproducing this on Windows, but I don’t see the issue on Android. I’d appreciate any suggestions. Thanks!

I don’t know if there is a better way but you could draw everything onto an intermediate texture that is as close to your window resolution as possible using an integer scaling factor and when that’s done you draw the intermediate texture onto the screen using a non-integer scaling factor so that it covers the whole screen.

Note that you might want to set SDL_HINT_RENDER_SCALE_QUALITY to “linear” or “best” for the intermediate texture for better looking result (a tiny bit of blur looks better than non-equally sized pixel columns and rows in my opinion).

1 Like

Thanks for the input! I think you are onto something regarding the intermediate texture. Earlier I mentioned that I wasn’t seeing the issue on Android. Your comment made me consider that on Android I render to an intermediate texture first, before rendering to the window. But on Windows, I render directly to the window. I’ll look into that further. Thanks again.

To close the loop on this, drawing to intermediate texture before rendering to the window resolved the issue. Thanks to @Peter87 for pointing me in the right direction!

Such artifacts exist regardless of whether you use flip or not and can come in many forms. I’ve encountered something similar myself, although I don’t use flipping, I render the entire frame on an auxiliary texture, and finally I render this frame texture in a window using the usual SDL_RenderCopy.

Changing the scaling mode is not a solution, because the point is not that the pixels are sharp, but that there are glitches, even though they shouldn’t be. These glitches may be a symptom of bugs in the renderer code, which should be looked into.

I don’t know exactly how it works but I thought it probably had to do with floating-point “rounding errors” and that using an integer scaling factor essentially avoided these errors (because floating-point integers are exact unless they are too big).

My advice to change the scaling mode to “linear” has nothing to do with this glitch. It’s just a way to avoid the non-consistent width of the pixel columns and rows. You would only want to do this when drawing everything from the intermediate texture onto the screen, and only if the intermediate texture is almost the same size as the screen resolution (otherwise it would add too much blur).

I’m not proposing using “linear” when drawing each sprite/tile onto the intermediate texture because that would lead to other problems such as blur and “bleeding” where the colour of nearby pixels (even fully transparent pixels and pixels outside the srcrect) gets blended and affects the result.