Custom font is not displayed right on some devices

bgmadclown · April 30, 2013, 1:04pm

Hi,

I’m having a problem with the device build of a custom font.

I’m using Digital-7 font from Dafont.com (http://www.dafont.com/digital-7.font) but I’m encountering strange behaviors on different devices. The bottom of the font is cut off on some iOS devices when I don’t set different font sizes for different devices.

Here is how I print starting time to screen:

local fontDigital = "Digital-7" local timeColon = display.newText(":", 0, 0, fontDigital, fontSize) timeColon:setTextColor(105, 255, 94) timeColon.x = imageClock.x timeColon.y = imageClock.y inventoryGroup:insert(timeColon) timeAvailableMins = display.newText(levelTime:sub(0, 2), 0, 0, fontDigital, fontSize) timeAvailableMins:setTextColor(105, 255, 94) timeAvailableMins.x = timeColon.x - timeColon.width / 2 - timeAvailableMins.width / 2 timeAvailableMins.y = imageClock.y inventoryGroup:insert(timeAvailableMins) timeAvailableSeconds = display.newText(levelTime:sub(4, 5), 0, 0, fontDigital, fontSize) timeAvailableSeconds:setTextColor(105, 255, 94) timeAvailableSeconds.x = timeColon.x + timeColon.width / 2 + timeAvailableSeconds.width / 2 timeAvailableSeconds.y = timeAvailableMins.y inventoryGroup:insert(timeAvailableSeconds)

and that’s a brief example to how I update the time per second(stripped of all the if/else):

timeAvailableSeconds.text = "0" .. (timeSeconds - 1)

Thanks,

Serkan

bjsorrentino · April 30, 2013, 8:00pm

Hi Serkan,

Where are you gathering the “fontSize” argument from? Do you change this value beyond the limits of normal dynamic scaling? For example, do you want to display the text “extra large” on iPhone, or smaller on the iPad, because of the overall screen size?

Brent

bgmadclown · May 2, 2013, 8:40am

Hi Brent,

Sorry for skipping that. I’m using this line to determine fontSize:

fontSize = 12

I want the font to conserve it’s ratio on all devices.

bjsorrentino · May 2, 2013, 4:01pm

Hi Serkan,

Which iOS device(s) are exhibiting this issue? How is your “config.lua” file set up? Does this happen only on the device, or in the Simulator for the same iOS devices?

Also, did you follow the entire FAQ on using custom fonts?

http://www.coronalabs.com/blog/2013/01/16/faq-wednesday-custom-fonts/

Best regards,

Brent

bgmadclown · May 2, 2013, 9:33pm

I’m encountering the issue on iPad (1), iPad 3 and iPhone 4. This only happens on device, the simulator shows them just fine. Here is my config.lua:

application = { content = { width = 320, height = 480, scale = "letterBox", imageSuffix = { ["@2x"] = 2.0, }, }, }

I tried to follow the tutorial and I think I did most parts true because I have 2 other fonts that are working well. Still, I’m not sure where I’m doing it wrong. Here is my code to creating the clock in-game:

fontSize = 12 local fontDigital = "Digital-7" local timeColon = display.newText(":", 0, 0, fontDigital, fontSize) timeColon:setTextColor(105, 255, 94) timeColon.x = imageClock.x timeColon.y = imageClock.y inventoryGroup:insert(timeColon) timeAvailableMins = display.newText(levelTime:sub(0, 2), 0, 0, fontDigital, fontSize) timeAvailableMins:setTextColor(105, 255, 94) timeAvailableMins.x = timeColon.x - timeColon.width / 2 - timeAvailableMins.width / 2 timeAvailableMins.y = imageClock.y inventoryGroup:insert(timeAvailableMins) timeAvailableSeconds = display.newText(levelTime:sub(4, 5), 0, 0, fontDigital, fontSize) timeAvailableSeconds:setTextColor(105, 255, 94) timeAvailableSeconds.x = timeColon.x + timeColon.width / 2 + timeAvailableSeconds.width / 2 timeAvailableSeconds.y = timeAvailableMins.y inventoryGroup:insert(timeAvailableSeconds)

And this is how I update it:

ocal function updateTimer() local timeSeconds = tonumber(timeAvailableSeconds.text) if (timeSeconds - 1 \< 10 and timeSeconds \> 0) then timeAvailableSeconds.text = "0" .. (timeSeconds - 1) else timeAvailableSeconds.text = (timeSeconds - 1) .. "" end if (timeSeconds == 0) then timeAvailableSeconds.text = 59 end if (timeAvailableSeconds.text == "59") then timeAvailableMins.text = "0" .. (tonumber(timeAvailableMins.text) - 1) end if (timeAvailableMins.text == "00" and timeAvailableSeconds.text == "00" and not endMenuCreated) then if ( objectsToFind \<= 0 ) then createOnSuccess() else checkForSuccess() end end end

local timerLoopCount if (tonumber(timeAvailableSeconds.text) == 0) then timerLoopCount = tonumber(timeAvailableMins.text) \* 60 end if (tonumber(timeAvailableMins.text) == 0) then timerLoopCount = tonumber(timeAvailableSeconds.text) end timerSeconds = timer.performWithDelay(1000, updateTimer, timerLoopCount)

I tried to provide all the code that is doing something related to the problem.

Thanks,

Serkan

bjsorrentino · April 30, 2013, 8:00pm

Hi Serkan,

Where are you gathering the “fontSize” argument from? Do you change this value beyond the limits of normal dynamic scaling? For example, do you want to display the text “extra large” on iPhone, or smaller on the iPad, because of the overall screen size?

Brent

bgmadclown · May 2, 2013, 8:40am

Hi Brent,

Sorry for skipping that. I’m using this line to determine fontSize:

fontSize = 12

I want the font to conserve it’s ratio on all devices.

bjsorrentino · May 2, 2013, 4:01pm

Hi Serkan,

Which iOS device(s) are exhibiting this issue? How is your “config.lua” file set up? Does this happen only on the device, or in the Simulator for the same iOS devices?

Also, did you follow the entire FAQ on using custom fonts?

http://www.coronalabs.com/blog/2013/01/16/faq-wednesday-custom-fonts/

Best regards,

Brent

bgmadclown · May 2, 2013, 9:33pm

I’m encountering the issue on iPad (1), iPad 3 and iPhone 4. This only happens on device, the simulator shows them just fine. Here is my config.lua:

application = { content = { width = 320, height = 480, scale = "letterBox", imageSuffix = { ["@2x"] = 2.0, }, }, }

I tried to follow the tutorial and I think I did most parts true because I have 2 other fonts that are working well. Still, I’m not sure where I’m doing it wrong. Here is my code to creating the clock in-game:

fontSize = 12 local fontDigital = "Digital-7" local timeColon = display.newText(":", 0, 0, fontDigital, fontSize) timeColon:setTextColor(105, 255, 94) timeColon.x = imageClock.x timeColon.y = imageClock.y inventoryGroup:insert(timeColon) timeAvailableMins = display.newText(levelTime:sub(0, 2), 0, 0, fontDigital, fontSize) timeAvailableMins:setTextColor(105, 255, 94) timeAvailableMins.x = timeColon.x - timeColon.width / 2 - timeAvailableMins.width / 2 timeAvailableMins.y = imageClock.y inventoryGroup:insert(timeAvailableMins) timeAvailableSeconds = display.newText(levelTime:sub(4, 5), 0, 0, fontDigital, fontSize) timeAvailableSeconds:setTextColor(105, 255, 94) timeAvailableSeconds.x = timeColon.x + timeColon.width / 2 + timeAvailableSeconds.width / 2 timeAvailableSeconds.y = timeAvailableMins.y inventoryGroup:insert(timeAvailableSeconds)

And this is how I update it:

ocal function updateTimer() local timeSeconds = tonumber(timeAvailableSeconds.text) if (timeSeconds - 1 \< 10 and timeSeconds \> 0) then timeAvailableSeconds.text = "0" .. (timeSeconds - 1) else timeAvailableSeconds.text = (timeSeconds - 1) .. "" end if (timeSeconds == 0) then timeAvailableSeconds.text = 59 end if (timeAvailableSeconds.text == "59") then timeAvailableMins.text = "0" .. (tonumber(timeAvailableMins.text) - 1) end if (timeAvailableMins.text == "00" and timeAvailableSeconds.text == "00" and not endMenuCreated) then if ( objectsToFind \<= 0 ) then createOnSuccess() else checkForSuccess() end end end

local timerLoopCount if (tonumber(timeAvailableSeconds.text) == 0) then timerLoopCount = tonumber(timeAvailableMins.text) \* 60 end if (tonumber(timeAvailableMins.text) == 0) then timerLoopCount = tonumber(timeAvailableSeconds.text) end timerSeconds = timer.performWithDelay(1000, updateTimer, timerLoopCount)

I tried to provide all the code that is doing something related to the problem.

Thanks,

Serkan

AppOwlDev · August 3, 2013, 12:26am

Did you ever find a solution to this problem? I’m using that exact same font and it’s 50% cutoff from the bottom when I deploy to a iPhone 5 device. Works fine in simulator and Android Devices.

And I found the solution pretty much right away. Just change the Height Param in the new Options table so something other than default.

bgmadclown · August 3, 2013, 12:11pm

I’m sorry, I should’ve posted my solution.

There are 2 different solutions for this problem:

1 ) You can adjust text objects’ width and height for specific devices (which means ridiculous amount of work for Android devices)

2 ) I found out that the problem was with the font I’m using. I changed the font to another one and it works OK now.

rob · August 3, 2013, 3:36pm

Free fonts from the Internet are hit-and-miss on how well they work. There’s a bunch of metric information required for the font to display correctly and its too easy for someone making a font to miss something and then the devices need that bit of data and it’s not there and suddenly font rendering goes whacko on you.

The proper thing to do is either try a different font, or do some device detection and scale if you have to make that font work. Android, iOS, Windows and OS-X all handle fonts a little bit differently from each other.

AppOwlDev · August 3, 2013, 6:44pm

I managed to get it to work fine on my iPhone 5 by adjusting the height of the actual display.text object. It always worked fine on my Galaxy Nexus and Nexus 7. Those are the only 3 physical devices I can test on, is it worth changing the font to be safe? Or just go forward and hope users will let me know when it doesn’t work on their device?

AppOwlDev · August 3, 2013, 12:26am

Did you ever find a solution to this problem? I’m using that exact same font and it’s 50% cutoff from the bottom when I deploy to a iPhone 5 device. Works fine in simulator and Android Devices.

And I found the solution pretty much right away. Just change the Height Param in the new Options table so something other than default.

bgmadclown · August 3, 2013, 12:11pm

I’m sorry, I should’ve posted my solution.

There are 2 different solutions for this problem:

1 ) You can adjust text objects’ width and height for specific devices (which means ridiculous amount of work for Android devices)

2 ) I found out that the problem was with the font I’m using. I changed the font to another one and it works OK now.

rob · August 3, 2013, 3:36pm

Free fonts from the Internet are hit-and-miss on how well they work. There’s a bunch of metric information required for the font to display correctly and its too easy for someone making a font to miss something and then the devices need that bit of data and it’s not there and suddenly font rendering goes whacko on you.

The proper thing to do is either try a different font, or do some device detection and scale if you have to make that font work. Android, iOS, Windows and OS-X all handle fonts a little bit differently from each other.

AppOwlDev · August 3, 2013, 6:44pm

I managed to get it to work fine on my iPhone 5 by adjusting the height of the actual display.text object. It always worked fine on my Galaxy Nexus and Nexus 7. Those are the only 3 physical devices I can test on, is it worth changing the font to be safe? Or just go forward and hope users will let me know when it doesn’t work on their device?