Tip: Say Goodbye to Blurry Text for Good!

Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn0

Want a quick fix that will prevent text from being blurry on “retina” displays of any kind? Simply paste the following code at the top of your main.lua file (or put it in an external file and require-it in):

What the above code does is override the built-in display.newText() function to ensure that text is displayed cleanly with no blurring on retina-enabled devices. It has no effect on older, non-retina display devices.

The best part is, once you put the above code in your project, you can just keep using display.newText() as you always did!

Talk about a quick fix 🙂

Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn0

This entry has 18 replies

  1. John Tran says:

    Awesomeness! Can’t wait to add this to our app…

  2. Noah says:

    Why not just make this part of the next build? It doesn’t hurt any non-retina devices. I cannot think of any instance when you wouldn’t want this so shouldn’t it just be built in?

  3. Jonathan Beebe says:

    @Noah: If you’re a subscriber, you have access to the “widget” library that’s in the daily builds and it is built-in if you use the widget library. I post is so those who aren’t using the new widgets can also take advantage of super-clear text.

  4. Noah says:

    Cool. I am indeed a subscriber. So you’re saying if I use the latest build, I don’t have to add this myself?

    Is there a place to go to read up on how to use all the new widgets? I saw a coming soon but didn’t realize I could use them now.

  5. Jonathan Beebe says:

    @Noah: Yup, documentation just went live:

  6. Michael says:

    Why is this not in core?

  7. In addition to Jonathan’s post… I use this to have retina sprites 😉 just put it in your main.lua or external file as he said.

    — Retina SpriteSheet

    local cacheSheet = {}
    cacheSheet.newSpriteSheet = sprite.newSpriteSheet
    sprite.newSpriteSheet = function(path, width, height)
    local newPath = “”
    if (display.contentScaleX == .5) then
    newPath = string.gsub(path, “.png”, “@2x.png”)
    width = width * 2
    height = height * 2
    newPath = path

    local h = cacheSheet.newSpriteSheet(newPath, width, height)
    return h

    — Retina Sprite

    local cacheSprite = {}
    cacheSprite.newSprite = sprite.newSprite
    sprite.newSprite = function(spriteSheet)
    local s = cacheSprite.newSprite(spriteSheet)
    if (display.contentScaleX == .5) then s.xScale, s.yScale = .5, .5 end
    return s

    I’m sure it can be improved but it works as it is too!

    Oh! Hello to everyone! this is my first post here 😀

  8. John Tran says:


    BTW and FYI…I just tried this. Works beautifully in some cases. But for some reason all of the text on my buttons from ui.lua are enlarged and not centered anymore. I might need to tweak that code to get it work fully for my app. But otherwise…Nice code snippet. Fonts are super sharp and crisp now on my iPhone 4…

    Thanks for sharing!
    – John

  9. JRQ says:

    Thank you jonathan, I was looking for something like this…I’m going to update my app.

  10. Keith says:

    I through this in place and I am getting an error:

    “attempt to perform arithmetic on local ‘actualSize’ (a string value)”

    I am using Version 2011.560 (2011.4.12), what do you think is wrong?

  11. Keith says:

    Nevermind, I discovered it. I am using ‘parentGroup’ in my display.newText and it is not accommodated in the function parameters.

  12. jn19 says:

    @John Tran
    Did you figure out how to fix the problem with UI buttons? When using this code all my button text is too large and not centered anymore.

  13. Rob Miracle says:

    If your text positions are no longer treating x and y and center, just comment out this line:

    t:setReferencePoint( display.TopLeftReferencePoint )

    That fixed MOST of my text positioning problems when switching to the new code above.

  14. Andy Fraley says:

    Did anyone figure out how to make this work correctly with UI buttons?

    • Jonathan Beebe says:

      I haven’t done any testing with the new UI buttons, but what you could do is replace your calls to ui.newButton() with widget.newButton() because the new widget.newButton() is compatible with the old ui buttons (you might have to make a few small adjustments to parameters, but not much).

  15. Brent says:

    I was really hopeful for flawless performance of this function, but my testing has turned up problems with reference points that aren’t “center”. I had to remove the line from the function which sets a top-left reference point because, very simply, not every text object in my game is aligned top-left. I use center, bottom-left, bottom-right, and other points to precisely align my text in the display.

    Now, I thought that I could simply set my reference points on a per-object basis… i.e., call this function then, immediately after, set the new reference point and the X/Y position to align it there. This part does work… BUT (big but) the alignment is then “corrected” improperly when the text value is later changed with the standard “obj.text = whatever” call. It seems like somehow the function is returning the “center” alignment coordinate (since I removed the top-left one), then when I re-set the reference point to bottom-left, it snaps to the value that was returned by this function.

    Just to clarify, this problem does not occur when I scale my text objects on a per-object basis, and use the original Corona display.newText function.

  16. Dewey says:

    Ansca / Jonathan,
    Please, you cannot introduce global side-effects (especially conditional ones) as implied here:

    “@Noah: If you’re a subscriber, you have access to the “widget” library that’s in the daily builds and it is built-in if you use the widget library. I post is so those who aren’t using the new widgets can also take advantage of super-clear text.”

    If this says what I think it says, it’s a huge no-no….it will also be a support nightmare for you, with from users who create some text BEFORE loading the widgets library. Please confirm that you are modifying your code to do this sort of thing privately.

  17. Mark says:

    Here is the fix for the text scaling problem on UI buttons that this code causes. In the UI library version 1.5, in the function button:setText, change this line:

    button:insert( labelText, true )

    to this:

    button:insert( labelText )

    The ‘true’ parameter resets the text scaling that happens in the new display:newText function. I’m not sure why the UI class is doing this in the first place, or if this causes other problems, but everything is working ok for me.