BeebeGames Class: newRetinaText() Tutorial

When I finally got an iPod touch 4 and began making our games compatible with the new retina displays, everything looked amazing. Everything except text, that is. The graphics were really sharp, but any text created using display.newText() came out looking blurry because as-is, it’s not yet optimized for the retina display.

I discovered a workaround, which required significantly more work than displaying text the regular way, so I included a new function in the BeebeGames Class that should make displaying retina-screen compatible text just as effortless as displaying text using the old method.

Things do get a little bit different, however, when it comes to updating existing text that’s not center-aligned (there is an alignment setting with this new function).

Here’s what the function looks like:

newRetinaText( textString, x, y, fontName, fontSize, r, g, b, alignment, parentGroup )

For the most part, it’s the same as the original display.newText() function, with some additions. The r, g, b arguments are there so you can go ahead and set the text color without wasting an extra line of code, and the alignment setting works in the same fashion as just about any text editor (“left”, “right”, “center”).

Remember, before you can use any of the BeebeGames Class functions, you need to include it in your module. I also recommend localizing the newRetinaText() function as well:

game = require( "beebegames" )
local newRetinaText = game.newRetinaText

Now, let’s display some (white) text at the top-right of the screen (offset a little), which is a common place for a score display in many games.

local scoreLabel = newRetinaText( "Score: 0", 305, 15, "Helvetica-Bold", 20, 255, 255, 255, "right", textGroup )

And that’s it when it comes to simply displaying text. As you can see, it’s similar to the newText() function, but you can get even more done with just that one line.

Updating Text

Now, since the text we displayed isn’t center-aligned, things are a little different when it comes to updating a text object you’ve created. If you simply change the .text attribute (like you would normally do), chances are, your text’s position on the screen is going to get a little screwed up.

Thankfully, I created an updateText() method that makes things easy. So let’s say we want to update our text object to read “Game Paused” instead. Here’s how you’d do it:

scoreLabel:updateText( "Game Paused" )

It doesn’t get much simpler than that, folks :-)

Test it out and build for an iPhone 4 or iPod touch 4, you’ll be amazed at how clear the text is.

Once again, you can download the BeebeGames Class from the Corona Code Exchange when you’re ready to get started.

To read more entries, visit the archives or subscribe to the RSS feed.