How to resolve the scaling artifact issue?

Hello i’m using a native resolution of 320x240 and with scaling to support standard screens. If I use:

SDL_SetHint (SDL_HINT_RENDER_SCALE_QUALITY, RENDER_SCALE_LINEAR);

I have big problems with artefacts especially the textures of fonts where the transparency is badly cut with lines. Setting the quality to “0” fixes the problem, but the rendering is too raw.

Is there a way to fix the problem without rewriting a renderer in OpenGL?

Thank you by advance for your helping.

Welcome Kenski,

Is the problem only with the fonts? Are you using SDL_ttf?

Hi!

My problem concerns the textures. This is visible with the tileset I use to write the text.

A character makes an 8x8 tile.

In fact, I have a tileset with each letter and I draw the desired letters on the screen to form a text.

Using SDL2 filters, we can see that magenta lines (the color of transparency) around the letters.

I think I know what you mean. You’re drawing bitmap fonts from a tile of glyphs? Then use SDL_RenderCopy with a source rectangle to choose which letter to render? I’ve done the same without problem, even at low resolution, with transparency, and various scaling qualities.

But why is transparency magenta? Transparency shouldn’t have a colour.

Which renderer are you using? What’s your video hardware? Are you remembering to do a SDL_RenderClear before you start drawing?

Yes that’s exactly that. I’m using SDL_Rect dst and SDL_Rect src in order to draw the text on the screen.

I have a main loop which starts with SDL_RenderClear () and ends with SDL_RenderPresent (). The tileset has the magenta background color (index 0).

My hardware is an Radeon R9 280X (same problem on Windows and Linux).

I will try on another computer.

It sounds like you’re trying to use the old-school method of transparency when we used a 256 colour image with one colour reserved not be drawn? I may be way off, but either way, it seems like the problem is with the texture you’re using. What format is it in? How is the alpha channel encoded? How are you loading it into a texture?

Yes I use an old school method like on the old consoles. My images are all in 16 colors, I use color 0 as the transparency color (like on Mega Drive).

The tileset is therefore in 16 colors PNG. Regarding the alpha channel, I don’t know, how can I check this value?

I using GIMP, before saving the file I add an alpha mask and check the “save transparent color” box.

I just realized that the problem also appears on some “large” images

Ah, I know what’s happening now.

Your method is ok, but GIMP creates an alpha channel and leaves the original magenta colour behind, so when it is blended, the background colour bleeds out of the edge of the transparent pixels. This is no problem with nearest-pixel scaling, but the linear-scaling does the blurring, which creates the bleeding.

Your solution would be to render everything to a 320x240 target texture - hopefully your source textures won’t get scaled / blurred. Then scale that texture to screen resolution.

Or, create your 16-colour retro style art using real a transparency channel - I would recommend this method. You can still use 15 colours and won’t need to use a magenta colour index, GIMP will show transparent pixels as grey chequers. The final PNG will be the same, but cleaner, with no magenta colour to bleed out.

Hope that makes sense?

I had tried this method while searching the internet and it doesn’t work either. It gives a strange color and there are always lines around the texture:

font

The color issue is due to the setting of the colorkey and the changing colors of the palette.

With the magenta background :
font

That’s what I’m suggesting… stop using a colour key and use a real alpha channel. When you save the PNG, make sure you untick “Save color values from transparent pixels”, and “Save background color” when you save in GIMP.

If the above is failing, then the problem is with the PNG loading / decoding.

I have done what you are trying to do with no problems. I’m using LodePNG.

I converted the image to RGB, removed the magenta color, and saved the PNG, it’s the same.
I will try LodePNG, it will surely fix my problem, thank you very much for the link.

1 Like