Border artifacts on resize with anti-aliasing

When the game window is scaled (to adjust to the different screen resolutions of devices), a gray outline appears on some white images that have a transparent border and anti-aliasing active:

(zoomed 200%)

If I turn off anti-aliasing on the sprite the problem goes away, but then the image looks pixelated. Are there any workarounds to this problem? I am using OpenFL 3.6.1 with HaxeFlixel 4.2.1.

It looks like the transparent part of the image is black, so when adjacent pixels are blended you get gray

Do you have the asset source file (like a .psd or something)? I think exporting a png where the transparent pixels are white would fix it

Yes that does seem to be the problem. I have the assets in .png, and used Image Magick to change the transparent pixel colors. It seems to work very well with simple images like the example I showed. But there are some images which still show a bit (less than before). I guess it’s a matter of adjusting the transparent color. Thanks!

Does it scale more nicely when you are running in software?

openfl test html5 -Dcanvas
openfl test neko -Dcairo

Sometimes software scaling looks smoother than OpenGL scaling, which tends to behave more poorly once you begin getting closer to 2x or more scaling. If it looks better, you can bitmapData.draw the old image to a new size for software scaling, then use at full-size in OpenGL :slight_smile: