Scaling texts

[luoruize]

I’m in the final stages of building the game, and for a while I’ve been fighting with the texts in the game. I am using a custom font, and the results produced by using display.newText() are broken - the texts do scale, but not fully (there are major differences from what I see in the simulator and what I actually see on the device). They also don’t get positioned correctly - either the reference I’m setting for the text doesn’t register, or the positions also break.

I’m on the verge of creating a small bitmap engine to be used instead, unless there’s some quick way around this thing…

[rob]

What version of Corona SDK are you using?

What devices are you testing on?

What skin are you using in the simulator?

What does your config.lua look like?

Can you post screen shots?

And let’s see some code where you’re creating the objects?

Rob

[luoruize]

Hey Rob,

I am using version 2013.1202 (2013.8.28) of Corona, and I’m testing it on HTC one, Motorola Razr and Samsung Galaxy S4, the problems I have described persist in all of them.

Not using any special skin in the simulator (didn’t even know I could do that…)

Here’s my config.lua:

application = { license = { google = { key = "XXXXXXXXXXX", policy = "serverManaged", }, }, content = { width = 320, height = 480, scale = "letterbox", xAlign = "center", yAlign = "center", imageSuffix = { ["@x2"] = 2, ["@x4"] = 4, }, } }

This is what it looks like on the device:

On the simulator, the text on the top left (the number of credits) sits comfortably a few pixels to the right of the coin symbol. Same with the prices in the upgrades menu - in the simulator they’re aligned perfectly with the coins.

The code which displays the numbers on the top, for example is this:

local credits = display.newText(panelContainer, player.coins, 0, 0, font, 24) credits:setReferencePoint(display.CenterLeftReferencePoint) credits.x, credits.y = 48, 18 credits:setTextColor(255, 255, 255)

Thanks for the help!

[jonjonsson]

Vertical text alignment differs across all the platforms. This is a zoomed in screenshot of some text in the simulator. 

The red area is the height of the font (48 pixels). The top and bottom space (10px and 9px) are different on iOS, Android and the simulator. So if you place your font with anchorY at 0 (top reference) the red area will be aligned to the Y co-ordinate. The actual visual font is 10px lower however, and again, that value will not be same across platforms.

Using above information you can accuratly calculate the vertical offset  if you so desire. For example in above image the total font is 48px and top offset 10px or a total of 20.83% top offset. This % will not change when you change the size of your font so it only needs to be calculated once for each platform.

Most people that want accurate vertical placement use trial and error and have offsets in their text placement depending on iOS, Android or Simulator. 

[luoruize]

Thanks. Too bad this wasn’t mentioned clearly in the documentation, as far as I could see (but I miss things, sometimes…)

Since I’m going to wait with the iOS until the very last minute, is there anywhere I can find these top and bottom values for each platform?

I’m still tempted to use bitmaps instead of newText if it’s such a hassle.

[jonjonsson]

These values depend on the font used, so there is no global value that works. 

I’m scaling fonts in realtime in my app and ended up using bitmaps for that since it was hard to get it to sit right during transition (its also recommended if you are changing size in realtime as using fonts may be slow).

For font offset in other places I made this module and it works very well, but still needs initial measuring before use: https://bitbucket.org/Jonjonsson/fontoffsetmodule

I haven’t bothered upgrading it it for Graphics 2.0 though. I don’t think anyone is using it as its a bit of hurdle If you wan’t to try it I can commit the changes required for Graphics 2.

[luoruize]

The hell with measuring… 

I’ll switch to bitmap fonts, then.

Thanks for the help!

[rob]

The screen shot looks like a horizontal problem, not a vertical problem?

[luoruize]

It’s both, actually - although the vertical problem is much more subtle. The number of credits on the top-left should have been a couple of pixels lower, and so should the item prices on the right (in the simulator they are aligned perfectly with the coins)

I have to say that this is an extremely annoying issue, which should’ve been mentioned in the docs. I’ve been working with Corona for well over 2 years, but this is the first time I have to accurately position text in a game, and I have wasted way too much time over this.

[rob]

What version of Corona SDK are you using?

What devices are you testing on?

What skin are you using in the simulator?

What does your config.lua look like?

Can you post screen shots?

And let’s see some code where you’re creating the objects?

Rob

[luoruize]

Hey Rob,

I am using version 2013.1202 (2013.8.28) of Corona, and I’m testing it on HTC one, Motorola Razr and Samsung Galaxy S4, the problems I have described persist in all of them.

Not using any special skin in the simulator (didn’t even know I could do that…)

Here’s my config.lua:

application = { license = { google = { key = "XXXXXXXXXXX", policy = "serverManaged", }, }, content = { width = 320, height = 480, scale = "letterbox", xAlign = "center", yAlign = "center", imageSuffix = { ["@x2"] = 2, ["@x4"] = 4, }, } }

This is what it looks like on the device:

On the simulator, the text on the top left (the number of credits) sits comfortably a few pixels to the right of the coin symbol. Same with the prices in the upgrades menu - in the simulator they’re aligned perfectly with the coins.

The code which displays the numbers on the top, for example is this:

local credits = display.newText(panelContainer, player.coins, 0, 0, font, 24) credits:setReferencePoint(display.CenterLeftReferencePoint) credits.x, credits.y = 48, 18 credits:setTextColor(255, 255, 255)

Thanks for the help!

[jonjonsson]

Vertical text alignment differs across all the platforms. This is a zoomed in screenshot of some text in the simulator. 

The red area is the height of the font (48 pixels). The top and bottom space (10px and 9px) are different on iOS, Android and the simulator. So if you place your font with anchorY at 0 (top reference) the red area will be aligned to the Y co-ordinate. The actual visual font is 10px lower however, and again, that value will not be same across platforms.

Using above information you can accuratly calculate the vertical offset  if you so desire. For example in above image the total font is 48px and top offset 10px or a total of 20.83% top offset. This % will not change when you change the size of your font so it only needs to be calculated once for each platform.

Most people that want accurate vertical placement use trial and error and have offsets in their text placement depending on iOS, Android or Simulator. 

[luoruize]

Thanks. Too bad this wasn’t mentioned clearly in the documentation, as far as I could see (but I miss things, sometimes…)

Since I’m going to wait with the iOS until the very last minute, is there anywhere I can find these top and bottom values for each platform?

I’m still tempted to use bitmaps instead of newText if it’s such a hassle.

[jonjonsson]

These values depend on the font used, so there is no global value that works. 

I’m scaling fonts in realtime in my app and ended up using bitmaps for that since it was hard to get it to sit right during transition (its also recommended if you are changing size in realtime as using fonts may be slow).

For font offset in other places I made this module and it works very well, but still needs initial measuring before use: https://bitbucket.org/Jonjonsson/fontoffsetmodule

I haven’t bothered upgrading it it for Graphics 2.0 though. I don’t think anyone is using it as its a bit of hurdle If you wan’t to try it I can commit the changes required for Graphics 2.

[luoruize]

The hell with measuring… 

I’ll switch to bitmap fonts, then.

Thanks for the help!

[rob]

The screen shot looks like a horizontal problem, not a vertical problem?

[luoruize]

It’s both, actually - although the vertical problem is much more subtle. The number of credits on the top-left should have been a couple of pixels lower, and so should the item prices on the right (in the simulator they are aligned perfectly with the coins)

I have to say that this is an extremely annoying issue, which should’ve been mentioned in the docs. I’ve been working with Corona for well over 2 years, but this is the first time I have to accurately position text in a game, and I have wasted way too much time over this.