[SOLVED] Antialiasing/smoothing problem on text and images

Haxe
#1

I’m learning HAXE and OpenFl, playing around and experimenting.

My problem today is about smoothing (antialiasing).

I’ve prepared a test case (you can download it below).
When I apply any kind of transformation (from a simple scale, to an affine matrix transformation) the result looks perfect in FLASH Target and quite crappy on NEKO, MAC, IOS (I’m on a mac system).

I show you an example.
Here’s FLASH on the left and NEKO on the right.
Some TextFields
.antiAliasType = AntiAliasType.ADVANCED;
.embedFonts = true;
and a PNG

I apply two matrix transformation on each element (you can see the source of this in the end)
skewX(element,-37.5);
rotateCenter(element,26.4);

Here is the result

I don’t understand why there is this difference.
I’ve tried to set in the project.xml
< window vsync=“true” antialiasing=“4” if=“cpp” />

I’ve tried to draw the text on a BitmapData with .draw(…,matrix,…,smoothing=true)
It doesn’t matter, I always get the same result.

I’ve looked a lot on google but I can’t find any solid answer.

Am I missing something? Is there a way to have smoothing on transformation (text and bitmap) on a target different from Flash?

Thank you
yup

YOU CAN TRY BY YOURSELF THE CODE IS HERE
https://dl.dropboxusercontent.com/u/683344/Sandbox.zip

[CLASS] Proof of concept: Antialias in TextFields
TextField looks terrible on HTML5
#2

I just gave this a try, I’m guessing that the transformation occurs after any smoothing, fonts especially are a complicated subject – one which I’m sure Adobe has dedicated staff to work on it alone

I’m curious about the bitmap smoothing, though, could you share a sample where the bitmap smoothing appears to be off? :smile:

Thank you!

#3

Here I am… thank you very much for your answer.

Actually I think here is not a FONT problem.
Because this super simple example with only a picture renders still the same.

I tried the image with my matrix transformations (the top one) and a simple
_bitmap.rotation = xxx
(the bottom one)

Still the same (click to zoom and see all the crappy details)

Here’s the code.
https://dl.dropboxusercontent.com/u/683344/SandboxImage.zip

It looks very strange to me.
Any suggestions?

#4

in this case my fault…

I forgot
_bitmap.smoothing = true;

I will try to draw the text on a Bitmap and then apply the transformation.
Update soon

#5

Yes, drawing the TextField over a Bitmap and apply there the transformations works!

It is not as perfect as flash, but still a pretty good result.

It’s something to avoid in Flash target (the native one works beautifully)
but it makes things a lot better in other targets.

If you find other solutions better than this one (you can already see all the downside of this drawing) please let me know.

Here is the code.

var label = new TextField();
    var labelFont = Assets.getFont("assets/square.ttf");
    var labelFormat:TextFormat = new TextFormat(labelFont.fontName, 50 , 0x000000);

    labelFormat.align = TextFormatAlign.LEFT;
    label.defaultTextFormat = labelFormat;

    label.embedFonts = true;
    label.text = "FONT OVER BITMAP";
    label.selectable = false;
    label.wordWrap = false;
    label.border = false;
    label.autoSize = TextFieldAutoSize.LEFT;

	var labelBitmapData:BitmapData = new BitmapData(Std.int(label.textWidth), Std.int(label.textHeight), true, 0x333333);
	labelBitmapData.draw(label);

	var labelBitmap:Bitmap;
        labelBitmap = new Bitmap(labelBitmapData);
	labelBitmap.smoothing = true;
	addChild(labelBitmap);
	labelBitmap.x = 150;
	labelBitmap.y = 180;
	labelBitmap.rotation = 17;

	addChild(label);
    label.text = "FONT STRAIGHT";
	label.x = 150;
	label.y = 220;
	label.rotation = 17;