Letterbox different from simulator to device?

Audio and Graphics
#1

Hello,

I have developed an app using an older version of corona (before the branded splash screen was enforced). I finally decided to download the latest version of Corona SDK and I am experiencing different letterbox scaling.

I have not changed any code, I have simply downloaded the newest build for the SDK. 

Attached are screenshots from both simulator and my iPhone 7+ build.

I have tried using the ‘adaptive’ mode for scaling, but that seems to dramatically resize every UI element within corona. Ideally, I would like to stick with letterbox and have it work in the same way pre-update.

I have also copied my config.lua file.

[lua]local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
content = {
width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),
height = aspectRatio < 1.5 and 1200 or math.floor( 800 * aspectRatio ),
scale = “letterbox”,
fps = 30,

imageSuffix =
{
["@2x"] = 2.0,
["@3x"] = 3.0
}
},

notification =
{
iphone =
{
types = { “badge”, “sound”, “alert” }
},
google =
{
projectNumber = “XXXXXXXXXXXXX”
},
},
}
[/lua]

Does anyone have any experience that might help me in this situation?

Thanks,

Brian

#2

Hi @brian.gorham,

Most likely it’s the same issue the user is struggling with in this post, based on a “dynamic” content area. Please read through and test out the advice I gave to him:

https://forums.coronalabs.com/topic/68900-are-things-supposed-to-shift-around-on-mac/

That being said, it looks like you’re developing a utility/business app. “adaptive” scale mode is actually quite useful for those apps, especially when users run it on a phone vs. a tablet.

Brent

#3

Thanks for the reply Brent.

From what I understand, adaptive scaling is new with Corona. Will switching to adaptive require me to redesign every UI element on the screen? Is there any explanation for why my letterbox ratio formula worked before updating corona but not after?

I am using corona’s live build server if that makes a difference.

Thanks for the help!

#4

Hmmm… things shouldn’t have changed between an update of Corona, unless you were using a build which was incredibly old (like years old). I use Corona Live Builds too, for apps using both “letterbox” and “adaptive” and it works fine. Of course, if you make changes to “config.lua”, the Live Build should warn you (via a dialog) that you changed your configuration settings, and that you should delete the app and do a fresh Live Build so that it picks up those changes fully.

Adaptive has been around for quite awhile. It’s not the best choice for everybody, but if you have an app which just feels too “zoomed in” on a tablet versus a phone, apaptive mode can handle that elegantly by creating a much larger content area on the tablet vs. the phone. However, it should probably be something you plan from the beginning, not something you switch to mid-development, since it likely would involve some redesign of your UI.

Brent

#5

@Brian

I think you may be running into the issue where your iPhone isn’t switched to “tall” mode.

Instead of trying to reformat your layout to “adaptive” mode it may be worth a try to implement the LaunchScreen storyboard for iOS. It’s a new way of handling launch screens instead of having static png files. The LaunchScreen method will activate the “tall” mode necessary to avoid the black bars you see at the top/bottom of your screen when you run it on an actual device.

If you don’t want to use the LaunchScreen method you can still use static png files, however you’ll need to add a few more png files to handle newer devices like the iPhone 7 / 7 plus.

You can find more info about the LaunchScreen method and also additional info about the static png files needed for specific devices in the link below.

https://docs.coronalabs.com/guide/distribution/launchFile/index.html

#6

The reason you’re seeing this issue is exactly what @ingemar_cl said. Your device isn’t detecting “tall mode”, i.e. the need to have either a Default-568h@2x.png file and to compound problems, since you’re on an iPhone 7+ that device also needs a Default-736h@3x.png file and all of that has to be setup properly in your build.settings. This is a change with iOS 10. Apple is enforcing this now. Also @ingemar_cl’s suggestion to use Storyboard launch images is the right way to go. Four small files and one line of code in build.settings will give you a forward looking app. We have no idea how long Apple will continue to support static image files. They are clearly making it more difficult on developers to use them.

Now “adaptive” is a great option for business/utility apps if you want tablets to show more information than a phone. In “letterbox” or “zoomEven” mode, on a tablet your phone shape app is just scaled up to fill the iPad’s screen. If you hold your iPhone next to your iPad, objects like widget.newSwitch will be visually bigger on the iPad than the tablet (even though they take up the same content area, the content area is scaled up to fit). With “adaptive” you will get different values for display.contentWidth and display.contentHeight between the devices. An iPhone 5 will give you a content area of 320x568, the iPhone 6 will be 375x667, the plus models will be 414x736 and the iPads will be 768x1024. Since the content area’s are changing on devices, the size of widgets like the newSwitch() will now be visually the same on all of them and it’s up to you to decide what to do with the extra real estate.

Rob

#7

Thank you guys for your help! Your feedback might have saved me hours/days of code changes.

I will try the launch image scenario and pay attention to the ‘tall’ mode. I think eventually the ‘adaptive’ scaling would be ideal, but for now I will use the continue using the letterbox in tall mode(this is primarily an phone app).

Brian

#8

Hi @brian.gorham,

Most likely it’s the same issue the user is struggling with in this post, based on a “dynamic” content area. Please read through and test out the advice I gave to him:

https://forums.coronalabs.com/topic/68900-are-things-supposed-to-shift-around-on-mac/

That being said, it looks like you’re developing a utility/business app. “adaptive” scale mode is actually quite useful for those apps, especially when users run it on a phone vs. a tablet.

Brent

#9

Thanks for the reply Brent.

From what I understand, adaptive scaling is new with Corona. Will switching to adaptive require me to redesign every UI element on the screen? Is there any explanation for why my letterbox ratio formula worked before updating corona but not after?

I am using corona’s live build server if that makes a difference.

Thanks for the help!

#10

Hmmm… things shouldn’t have changed between an update of Corona, unless you were using a build which was incredibly old (like years old). I use Corona Live Builds too, for apps using both “letterbox” and “adaptive” and it works fine. Of course, if you make changes to “config.lua”, the Live Build should warn you (via a dialog) that you changed your configuration settings, and that you should delete the app and do a fresh Live Build so that it picks up those changes fully.

Adaptive has been around for quite awhile. It’s not the best choice for everybody, but if you have an app which just feels too “zoomed in” on a tablet versus a phone, apaptive mode can handle that elegantly by creating a much larger content area on the tablet vs. the phone. However, it should probably be something you plan from the beginning, not something you switch to mid-development, since it likely would involve some redesign of your UI.

Brent

#11

@Brian

I think you may be running into the issue where your iPhone isn’t switched to “tall” mode.

Instead of trying to reformat your layout to “adaptive” mode it may be worth a try to implement the LaunchScreen storyboard for iOS. It’s a new way of handling launch screens instead of having static png files. The LaunchScreen method will activate the “tall” mode necessary to avoid the black bars you see at the top/bottom of your screen when you run it on an actual device.

If you don’t want to use the LaunchScreen method you can still use static png files, however you’ll need to add a few more png files to handle newer devices like the iPhone 7 / 7 plus.

You can find more info about the LaunchScreen method and also additional info about the static png files needed for specific devices in the link below.

https://docs.coronalabs.com/guide/distribution/launchFile/index.html

#12

The reason you’re seeing this issue is exactly what @ingemar_cl said. Your device isn’t detecting “tall mode”, i.e. the need to have either a Default-568h@2x.png file and to compound problems, since you’re on an iPhone 7+ that device also needs a Default-736h@3x.png file and all of that has to be setup properly in your build.settings. This is a change with iOS 10. Apple is enforcing this now. Also @ingemar_cl’s suggestion to use Storyboard launch images is the right way to go. Four small files and one line of code in build.settings will give you a forward looking app. We have no idea how long Apple will continue to support static image files. They are clearly making it more difficult on developers to use them.

Now “adaptive” is a great option for business/utility apps if you want tablets to show more information than a phone. In “letterbox” or “zoomEven” mode, on a tablet your phone shape app is just scaled up to fill the iPad’s screen. If you hold your iPhone next to your iPad, objects like widget.newSwitch will be visually bigger on the iPad than the tablet (even though they take up the same content area, the content area is scaled up to fit). With “adaptive” you will get different values for display.contentWidth and display.contentHeight between the devices. An iPhone 5 will give you a content area of 320x568, the iPhone 6 will be 375x667, the plus models will be 414x736 and the iPads will be 768x1024. Since the content area’s are changing on devices, the size of widgets like the newSwitch() will now be visually the same on all of them and it’s up to you to decide what to do with the extra real estate.

Rob

#13

Thank you guys for your help! Your feedback might have saved me hours/days of code changes.

I will try the launch image scenario and pay attention to the ‘tall’ mode. I think eventually the ‘adaptive’ scaling would be ideal, but for now I will use the continue using the letterbox in tall mode(this is primarily an phone app).

Brian