My fonts are much smaller when building to OS X than iOS

Hi there

Perhaps this is a known issues. I have some text in my app which looks ok when I’m viewing it in the simulator and on device (iPad / iPhone / Android etc). However when I build to OS X it is very small. ~1/10 of the expected size. 

Additionally, and perhaps somewhat releated, I am using dynamic content scaling and the images that the OS X app uses are the lowest resolution ( ["@1x"] = 1.0 )  but the iPad uses my highest resolution ( ["@4x"] = 3.0 ).

I can provide more detail but I half expect that this is a known issue.

-Addi

p.s. see attached screenshot for clarification

That’s usually an indication that the font couldn’t be found and it’s defaulting back to the defined system font.

It would really be helpful to see your build.settings, the code where you are creating the text and folder listing of the folder with your main.lua. Also what version of Corona SDK are you using?

Rob

Version 2015.2722 (2015.9.23)

-- set the font type local font = {} font.normal = "Helvetica" font.bold = "Helvetica-Bold" font.italic = "Helvetica-Oblique" -- then I have some overrides on font type if device.isAndroid, device.isNook, device.isKindleFire -- define the text object loUpCaseLetters = display.newText( { text = "Aa", x = 0, y = 0, font = font.bold, fontSize = 25 } )

Folder listing

BradBunR.ttf Default-568h.png Default-Landscape.jpeg Default-LandscapeLeft.jpeg Default-LandscapeRight.jpeg Icon-60.png Icon-60@2x.png Icon-72.png Icon-72@2x.png Icon-76.png Icon-76@2x.png Icon-Small-40.png Icon-Small-40@2x.png Icon-Small-50.png Icon-Small-50@2x.png Icon-Small.png Icon-Small@2x.png Icon-hdpi.png Icon-ldpi.png Icon-mdpi.png Icon-osx.icns Icon-xhdpi.png Icon-xxhdpi.png Icon.png Icon@2x.png build.settings config.lua configApp.lua device.lua front.lua main.lua model.lua selectModel.lua storyboard.lua

Build settings

settings = { orientation = { default ="landscapeRight", supported = { "landscapeLeft","landscapeRight" }, }, iphone = { plist = { UIAppFonts = { "BradBunR.ttf" }, CFBundleDisplayName = "Vores bogstaver", CFBundleShortVersionString = "1.0", CFBundleIconFiles = { "Icon.png" , "Icon@2x.png" , "Icon-Small-40.png" , "Icon-Small-40@2x.png" , "Icon-60.png" , "Icon-60@2x.png" , "Icon-72.png" , "Icon-72@2x.png" , "Icon-76.png" , "Icon-76@2x.png" , "Icon-Small-50.png" , "Icon-Small-50@2x.png" , "Icon-Small.png" , "Icon-Small@2x.png" }, }, }, android = { usesPermissions = { "android.permission.INTERNET", }, }, window = { enableMaximizeButton = true, suspendWhenMinimized = true, resizable = true, }, }

Another thing, the aspect ratio of my built OS X app is different when compared to the iPad simulator. 

While the reported pixel dimensions in the iPad simulator are 2048x1536, when I build an OS X app the reported dimensinos are 1265x742. Setting defaultViewWidth / Height has no effect on this.

I guess I also need to see your config.lua as well.

What simulator skins are you using?

Using a standard stock config.lua and using the code you posted above (I centered the text though) and I ran it as an OS-X app and as a couple of different devices in the simulator and this is what I got…

Interesting, thank you for your help. Here is my config.lua .

--calculate the aspect ratio of the device: local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 30, antialias = false, xalign = "center", yalign = "center", imageSuffix = { ["@1x"] = 1.0, ["@2x"] = 1.8, ["@4x"] = 3.0, }, }, }

I’m using the iPad Air simulator skin.

Yes, my device.lua was the problem (sorry about not including it in my code).

When I fixed my device.lua file (initially from https://coronalabs.com/blog/2012/12/11/device-detection-on-steroids/ ) my problem with the small font is no more. It was as you described, it was trying to use a font that wasn’t there.
 

Thank you for your help.

If anyone else has this problem, I modified the device.lua file to recognize the Mac so it won’t match Android.

-- Project: Simple device detection flags -- -- File name: main.lua -- -- Author: Corona Labs -- -- Abstract: Sets up some simple boolean flags that lets us do various device tests. -- -- -- Target devices: simulator, device -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2012 Corona Labs Inc. All Rights Reserved. --------------------------------------------------------------------------------------- local M = {} -- -- Set up some defaults -- M.is\_iOS = false M.isMac = false M.isAndroid = false M.isGoogle = false M.isKindleFire = false M.isNook = false M.is\_iPad = false M.isTall = false M.isSimulator = false local model = system.getInfo("model") -- Are we on the simulator? if "simulator" == system.getInfo("environment") then M.isSimulator = true end -- lets see if we are a tall device M.isTall = false if (display.pixelHeight/display.pixelWidth) \> 1.5 then M.isTall = true end -- first, look to see if we are on some Apple platform. -- All models start with iP, so we can check that. -- arnthorsnaer : added Mac check if string.match(model,"Mac") then M.isMac = true elseif string.match(model,"mac") then M.isMac = true elseif string.sub(model,1,2) == "iP" then -- We are an iOS device of some sort M.is\_iOS = true if string.sub(model, 1, 4) == "iPad" then M.is\_iPad = true end else -- Not Apple, then we must be one of the Android devices M.isAndroid = true -- lets assume we are Google for the moment M.isGoogle = true -- All the Kindles start with K, though Corona SDK before build 976's Kindle Fire 9 returned "WFJWI" instead of "KFJWI" if model == "Kindle Fire" or model == "WFJWI" or string.sub(model,1,2) == "KF" then M.isKindleFire = true M.isGoogle = false end -- Are we a nook? if string.sub(model,1,4) == "Nook" or string.sub(model,1,4) == "BNRV" then M.isNook = true M.isGoogle = false end end return M

I also figured out that the OS X window sizes itself as required by the displayobjects. 

-- Project: Simple device detection flags -- -- File name: main.lua -- -- Author: Corona Labs -- -- Abstract: Sets up some simple boolean flags that lets us do various device tests. -- -- -- Target devices: simulator, device -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2012 Corona Labs Inc. All Rights Reserved. --------------------------------------------------------------------------------------- local M = {} -- -- Set up some defaults -- M.isApple = false M.isAndroid = false M.isGoogle = false M.isKindleFire = false M.isNook = false M.is\_iPad = false M.is\_Windows = false M.is\_OSX = false M.is\_iOS = false M.isTall = false M.isSimulator = false local model = system.getInfo("model") local platform = system.getInfo("platformName") print("model", model) print("platform", platform) -- Are we on the simulator? if "simulator" == system.getInfo("environment") then M.isSimulator = true end -- lets see if we are a tall device M.isTall = false if (display.pixelHeight/display.pixelWidth) \> 1.5 then M.isTall = true end -- first, look to see if we are on some Apple platform. -- All models start with iP, so we can check that. if string.sub(model,1,2) == "iP" then -- We are an iOS device of some sort M.isApple = true M.is\_iOS = true if string.sub(model, 1, 4) == "iPad" then M.is\_iPad = true end elseif string.sub(model, 1, 3) == "Mac" then M.isOSX = true elseif platform == "Win" then M.isWindows = true else -- Not Apple, then we must be one of the Android devices M.isAndroid = true -- lets assume we are Google for the moment M.isGoogle = true -- All the Kindles start with K, though Corona SDK before build 976's Kindle Fire 9 returned "WFJWI" instead of "KFJWI" if model == "Kindle Fire" or model == "WFJWI" or string.sub(model,1,2) == "KF" then M.isKindleFire = true M.isGoogle = false end -- Are we a nook? if string.sub(model,1,4) == "Nook" or string.sub(model,1,4) == "BNRV" or string.sub(model,1,4) == "BNTV" then M.isNook = true M.isGoogle = false end end return M

I don’t know how good this is though, but it should detect OS-X.

Anyway, my build.settings doesn’t have a windows table like yours (for my tmp app!). For the app I posted to the store, I used this:
 

 window = { defaultViewWidth = 580, defaultViewHeight = 720, resizable = false, minViewWidth = 360, minViewHeight = 480, enableCloseButton = true, enableMinimizeButton = true, enableMaximizeButton = false, }

My game is a portrait app and it honored the settings.

Rob

Thanks Rob, I will try out your device file and your build.settings.

That’s usually an indication that the font couldn’t be found and it’s defaulting back to the defined system font.

It would really be helpful to see your build.settings, the code where you are creating the text and folder listing of the folder with your main.lua. Also what version of Corona SDK are you using?

Rob

Version 2015.2722 (2015.9.23)

-- set the font type local font = {} font.normal = "Helvetica" font.bold = "Helvetica-Bold" font.italic = "Helvetica-Oblique" -- then I have some overrides on font type if device.isAndroid, device.isNook, device.isKindleFire -- define the text object loUpCaseLetters = display.newText( { text = "Aa", x = 0, y = 0, font = font.bold, fontSize = 25 } )

Folder listing

BradBunR.ttf Default-568h.png Default-Landscape.jpeg Default-LandscapeLeft.jpeg Default-LandscapeRight.jpeg Icon-60.png Icon-60@2x.png Icon-72.png Icon-72@2x.png Icon-76.png Icon-76@2x.png Icon-Small-40.png Icon-Small-40@2x.png Icon-Small-50.png Icon-Small-50@2x.png Icon-Small.png Icon-Small@2x.png Icon-hdpi.png Icon-ldpi.png Icon-mdpi.png Icon-osx.icns Icon-xhdpi.png Icon-xxhdpi.png Icon.png Icon@2x.png build.settings config.lua configApp.lua device.lua front.lua main.lua model.lua selectModel.lua storyboard.lua

Build settings

settings = { orientation = { default ="landscapeRight", supported = { "landscapeLeft","landscapeRight" }, }, iphone = { plist = { UIAppFonts = { "BradBunR.ttf" }, CFBundleDisplayName = "Vores bogstaver", CFBundleShortVersionString = "1.0", CFBundleIconFiles = { "Icon.png" , "Icon@2x.png" , "Icon-Small-40.png" , "Icon-Small-40@2x.png" , "Icon-60.png" , "Icon-60@2x.png" , "Icon-72.png" , "Icon-72@2x.png" , "Icon-76.png" , "Icon-76@2x.png" , "Icon-Small-50.png" , "Icon-Small-50@2x.png" , "Icon-Small.png" , "Icon-Small@2x.png" }, }, }, android = { usesPermissions = { "android.permission.INTERNET", }, }, window = { enableMaximizeButton = true, suspendWhenMinimized = true, resizable = true, }, }

Another thing, the aspect ratio of my built OS X app is different when compared to the iPad simulator. 

While the reported pixel dimensions in the iPad simulator are 2048x1536, when I build an OS X app the reported dimensinos are 1265x742. Setting defaultViewWidth / Height has no effect on this.

I guess I also need to see your config.lua as well.

What simulator skins are you using?

Using a standard stock config.lua and using the code you posted above (I centered the text though) and I ran it as an OS-X app and as a couple of different devices in the simulator and this is what I got…

Interesting, thank you for your help. Here is my config.lua .

--calculate the aspect ratio of the device: local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 30, antialias = false, xalign = "center", yalign = "center", imageSuffix = { ["@1x"] = 1.0, ["@2x"] = 1.8, ["@4x"] = 3.0, }, }, }

I’m using the iPad Air simulator skin.

Yes, my device.lua was the problem (sorry about not including it in my code).

When I fixed my device.lua file (initially from https://coronalabs.com/blog/2012/12/11/device-detection-on-steroids/ ) my problem with the small font is no more. It was as you described, it was trying to use a font that wasn’t there.
 

Thank you for your help.

If anyone else has this problem, I modified the device.lua file to recognize the Mac so it won’t match Android.

-- Project: Simple device detection flags -- -- File name: main.lua -- -- Author: Corona Labs -- -- Abstract: Sets up some simple boolean flags that lets us do various device tests. -- -- -- Target devices: simulator, device -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2012 Corona Labs Inc. All Rights Reserved. --------------------------------------------------------------------------------------- local M = {} -- -- Set up some defaults -- M.is\_iOS = false M.isMac = false M.isAndroid = false M.isGoogle = false M.isKindleFire = false M.isNook = false M.is\_iPad = false M.isTall = false M.isSimulator = false local model = system.getInfo("model") -- Are we on the simulator? if "simulator" == system.getInfo("environment") then M.isSimulator = true end -- lets see if we are a tall device M.isTall = false if (display.pixelHeight/display.pixelWidth) \> 1.5 then M.isTall = true end -- first, look to see if we are on some Apple platform. -- All models start with iP, so we can check that. -- arnthorsnaer : added Mac check if string.match(model,"Mac") then M.isMac = true elseif string.match(model,"mac") then M.isMac = true elseif string.sub(model,1,2) == "iP" then -- We are an iOS device of some sort M.is\_iOS = true if string.sub(model, 1, 4) == "iPad" then M.is\_iPad = true end else -- Not Apple, then we must be one of the Android devices M.isAndroid = true -- lets assume we are Google for the moment M.isGoogle = true -- All the Kindles start with K, though Corona SDK before build 976's Kindle Fire 9 returned "WFJWI" instead of "KFJWI" if model == "Kindle Fire" or model == "WFJWI" or string.sub(model,1,2) == "KF" then M.isKindleFire = true M.isGoogle = false end -- Are we a nook? if string.sub(model,1,4) == "Nook" or string.sub(model,1,4) == "BNRV" then M.isNook = true M.isGoogle = false end end return M

I also figured out that the OS X window sizes itself as required by the displayobjects. 

-- Project: Simple device detection flags -- -- File name: main.lua -- -- Author: Corona Labs -- -- Abstract: Sets up some simple boolean flags that lets us do various device tests. -- -- -- Target devices: simulator, device -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2012 Corona Labs Inc. All Rights Reserved. --------------------------------------------------------------------------------------- local M = {} -- -- Set up some defaults -- M.isApple = false M.isAndroid = false M.isGoogle = false M.isKindleFire = false M.isNook = false M.is\_iPad = false M.is\_Windows = false M.is\_OSX = false M.is\_iOS = false M.isTall = false M.isSimulator = false local model = system.getInfo("model") local platform = system.getInfo("platformName") print("model", model) print("platform", platform) -- Are we on the simulator? if "simulator" == system.getInfo("environment") then M.isSimulator = true end -- lets see if we are a tall device M.isTall = false if (display.pixelHeight/display.pixelWidth) \> 1.5 then M.isTall = true end -- first, look to see if we are on some Apple platform. -- All models start with iP, so we can check that. if string.sub(model,1,2) == "iP" then -- We are an iOS device of some sort M.isApple = true M.is\_iOS = true if string.sub(model, 1, 4) == "iPad" then M.is\_iPad = true end elseif string.sub(model, 1, 3) == "Mac" then M.isOSX = true elseif platform == "Win" then M.isWindows = true else -- Not Apple, then we must be one of the Android devices M.isAndroid = true -- lets assume we are Google for the moment M.isGoogle = true -- All the Kindles start with K, though Corona SDK before build 976's Kindle Fire 9 returned "WFJWI" instead of "KFJWI" if model == "Kindle Fire" or model == "WFJWI" or string.sub(model,1,2) == "KF" then M.isKindleFire = true M.isGoogle = false end -- Are we a nook? if string.sub(model,1,4) == "Nook" or string.sub(model,1,4) == "BNRV" or string.sub(model,1,4) == "BNTV" then M.isNook = true M.isGoogle = false end end return M

I don’t know how good this is though, but it should detect OS-X.

Anyway, my build.settings doesn’t have a windows table like yours (for my tmp app!). For the app I posted to the store, I used this:
 

 window = { defaultViewWidth = 580, defaultViewHeight = 720, resizable = false, minViewWidth = 360, minViewHeight = 480, enableCloseButton = true, enableMinimizeButton = true, enableMaximizeButton = false, }

My game is a portrait app and it honored the settings.

Rob