Scaling and antialiasing

I have a Sprite that contains multiple childs sprites (a grid sprite containing multiple bitmap tile sprites).
If I display it like this, everything is correct. However, as soon as I change the scale of the parent sprite (by setting grid.scaleX = 0.5; grid.scaleY = 0.5; for example), the rendering is (really) ugly. The edges of my tiles (that are hexagons) are rendered as a flickering line instead of a straight smooth one…

I have tried to set
grid.cacheAsBitmap = true;

and in my project.xml file I have:
<window orientation="portrait" vsync="false" antialiasing="4" if="cpp" /> (also tried with vsync=“true”)

But that doesn’t change anything.

What is the solution to get a smooth rendering when applying scalling to a set of bitmaps?

Could you try and set this to false, and see if it makes a difference for you?

https://github.com/openfl/openfl/blob/develop/openfl/_internal/renderer/opengl/GLRenderer.hx#L58

No that didn’t change anything. Dit not see any difference after setting this roundPixels value to false.

Do your bitmaps have smoothing set to true?

Also, be aware that OpenGL smoothing looks best when between 50% and 100% scale, smaller than that it starts look worse due to how GL_LINEAR sampling works

Yes my bitmaps have smoothing=true.
I create them like this:
_bitmap = new Bitmap(null, PixelSnapping.AUTO, true);
And then I fill their bitmapdata with
_bitmap.bitmapData = mybitmapdata where mybitmapdata is a bitmapdata generated on the fly

But just to be sure I set
_bitmap.smoothing = true;
But that didn’t change anything

And my real scalling factor is something between 0.95 and 0.8 (it is definitively above 0.5).

How does it look using -Dcairo?

Just tried with lime test windows -Dcairo and this is the same as without the -Dcairo flag, still looks dirty

wait.
I just tried by setting _bitmap.smoothing = true AFTER _bitmap.bitmapData = mybitmapdata and that looks OK now. So seems like setting _bitmap.bitmapData reset _bitmap.smoothing to false…

Anyway, why isn’t smoothing set to true by default? Usually people prefer to have smooth bitmaps than ugly ones… (and if you don’t transform your bitmap, smoothing=true or smoothing=false shouldn’t change anything anyway)

Flash Player works this way, probably because smoothing incurs additional overhead (four times the number of pixels must be sampled)

I agree that in practice, smoothing is always preferred, though :slight_smile:

OK. Is this sampling also performed when there is no transformation applied to the bitmap (like scalling, rotation…)? Just to know if there would be any overhead if I set smoothing=true for a large fix background image or a an UI button for example (that are not rescalled)?

It’s up to the OpenGL driver implementation, GL_LINEAR is very, very common, so it’s probably heavily optimized. I think it’s just the motivation for leaving smoothing off by default, if you don’t need it, there’s probably a modest boost, but there’s no way to know for sure without benchmarking :slight_smile:

EDIT: It’s likely less expensive than on software targets, like Flash Player, Cairo and HTML5 canvas

1 Like

I’ve heard that GPUs can fetch 4 texlels at once to implement linear filters, so you’ll probably gain nothing from turning off bilinear filter.

I think HTML5 Canvas is hardware accelerated on most of devices today.