Scared of Graphics 2.0 center origins making text blurry

Solar2D Advanced Graphics
#1

Some time ago, I posted on the forums about the blurry text in my (non-game) app.

https://developer.coronalabs.com/forum/2013/01/16/reasons-blurry-text

The solution to crisp text was to not use center-origin text objects, as they could end up with fractional x/y values, and the Corona engine makes fractional x/y text blurry.

I spent a lot of time top-lefting my entire app’s display objects, and that resolved the problem. It was hugely important to making the app look crisp. I’ve included two attached screenshots that show the difference it made.

I am very afraid of Graphics 2.0, because it sounds like it has hard-coded center origins for display objects, and at first glance, that sounds like I won’t be able to avoid the text blurriness that comes from center-origin display objects.

Can anyone confirm or (hopefully) allay my fears that Graphics 2.0 will make text blurry and cannot be used with text-based apps?

Thanks!

Andy

#2

In Graphics 2.0, you can still set the reference point, only now, instead of

[lua]

obj:setReferencePoint(display.TopLeftReferencePoint)

[/lua]

You now use

[lua]

obj.anchorX, obj.anchorY = 0, 0

[/lua]

  • Caleb
#3

@Caleb, I think the OPs point is still relevant though. If center orientation caused the blurryness and now internally everything is center oriented then in theory we might have an unavoidable blurryness issue. 

@RealHandy, have you managed to verify whether the blurryness issue is there when you use obj.anchorX, obj.anchorY = 0, 0 ?

#4

This is what happens when you use fractional X and Y values (and also explains why my code is littered with math.floor() for pixel positions).

The way to center text without hte blurriness would be to align to the top left then offset by half the text width and height, but math.floor()-ing these half values to maintain pixel boundaries*

*Note this is not strictly true if you are using content scaling, so your milage may vary, particularly on low resolution devices and devices that have only slight differences between their resolution and what you ask for in your config, but this is true of pretty much any graphical operation ever.

#5

@rakoonic, yup, that should work!

@RealHandy, have you tried G2.0 yet?

#6

I haven’t, but it sounds like anchors of 0 should work. Will give it a go after this release is out. Thanks, all!

#7

I just tried to convert my non-game app to G2.0 (build 2090), and the smaller text looks bad… kinda like it is not anti-aliased or perhaps the blurry problem.  My app is filled with text.  It did not look that great under 1.0 either.  So maybe I should try the pixel boundary alignment trick.  I am hoping that 2.0 can resolve this at a lower layer!

#8

@cosmic, rakoonic correctly describes how to eliminate blurry text – use top left reference points and math.floor( x + width *.5 ) and (y + height * .5) to position things by the center.

#9

Thanks, RealHandy!  You’re real handy.

#10

And BTW, I move my text around a lot - transitions.  I am sure that the transitions don’t do the quantization on the pixels… any words of wisdom there?

#11

As long as your start and end locations are handled this way, the transition will be fine. Also, correcting the above, if x, y are the desired location of the center of your text, it’s x - width*.5 and y-height*.5 – minus, not plus, for top-left reference points.

#12

So we established that object.anchorX, object.anchorY = .5, .5 does not use math.floor internally and hence may cause blurriness?

#13

In Graphics 2.0, you can still set the reference point, only now, instead of

[lua]

obj:setReferencePoint(display.TopLeftReferencePoint)

[/lua]

You now use

[lua]

obj.anchorX, obj.anchorY = 0, 0

[/lua]

  • Caleb
#14

@Caleb, I think the OPs point is still relevant though. If center orientation caused the blurryness and now internally everything is center oriented then in theory we might have an unavoidable blurryness issue. 

@RealHandy, have you managed to verify whether the blurryness issue is there when you use obj.anchorX, obj.anchorY = 0, 0 ?

#15

This is what happens when you use fractional X and Y values (and also explains why my code is littered with math.floor() for pixel positions).

The way to center text without hte blurriness would be to align to the top left then offset by half the text width and height, but math.floor()-ing these half values to maintain pixel boundaries*

*Note this is not strictly true if you are using content scaling, so your milage may vary, particularly on low resolution devices and devices that have only slight differences between their resolution and what you ask for in your config, but this is true of pretty much any graphical operation ever.

#16

@rakoonic, yup, that should work!

@RealHandy, have you tried G2.0 yet?

#17

I haven’t, but it sounds like anchors of 0 should work. Will give it a go after this release is out. Thanks, all!

#18

I just tried to convert my non-game app to G2.0 (build 2090), and the smaller text looks bad… kinda like it is not anti-aliased or perhaps the blurry problem.  My app is filled with text.  It did not look that great under 1.0 either.  So maybe I should try the pixel boundary alignment trick.  I am hoping that 2.0 can resolve this at a lower layer!

#19

@cosmic, rakoonic correctly describes how to eliminate blurry text – use top left reference points and math.floor( x + width *.5 ) and (y + height * .5) to position things by the center.

#20

Thanks, RealHandy!  You’re real handy.