iPhone 6 and iPhone 6+ displaying iPhone 5 resolution after exporting onto physical device

Getting Started Newbie Questions
#1

When we tried running our application on the corona simulator on iMac, the resolution and size of the text and icons and graphics are very similar compared to the actual Sketch design, almost exactly the same, for all devices iPhone 5, 6, 6+ as shown in the attached files:

 

iPhone 5 - sketch design vs simulator (left part of the image is from Sketch, right part of the image is from the iMac Corona simulator)

iPhone 6 - sketch design vs simulator (left part of the image is from Sketch, right part of the image is from the iMac Corona simulator)

 

However, we when exported our application and tried running it on the actual physical devices of iphone 5, 6, and 6+, the resolution is dramatically stretched, and blurred (especailly the texts), for iPhone 6 and iPhone 6+, but for iPhone 5 it is the same, as shown in the attached files:

 

iPhone 5 - simulator vs device (left part of the image if from simulator, right part of the image is from the actual physical iPhone devices)

iPhone 6 - simulator vs device (left part of the image if from simulator, right part of the image is from the actual physical iPhone devices)

 

It seems like what’s happening is that the iphone 5 resolution displayed is being forced onto the iPhone 6.  It is just a guess though, we are not sure why there’s such a differerence between simulator and export display.

 

For iPhone 6+, the problem is more complicated than having UI stretched and blurred.  As you can see, there starts to be a difference in the thickness of our lines as highlighted by a the colored boxex, for BOTH simulator AND device, but the variance in thickness is different between the simulator and device as shown attached. Also, the area for textfield is also messed up as highlighted by a red square box. The files are shown attached as:

 

Line Thickness iPhone 6plus - simulator vs device   (red box has thickest line, orange second thickest, yellow is the most thin, on both simulator (left side) and device (right side))

Text field iPhone 6 plus - simulator vs device (left part of the image is from Corona simulator, right part of the image is from the actual physical iPhone devices.  On the physical device, the text gets pushed into 3 lines and overlaps with the following text box)

 

We have no idea what the problem is for iPhone 6+.

 

The adaptive code that we used is as of follows:

 

config.lua：

application =

{

    content =

    {

        scale = “adaptive”,

        fps = 60,

        imageSuffix =

        {

            ["@2x"] = 1.5,

            ["@3x"] = 2.5,

        },

    },

}

Please help with this problem, we are already way passed our deadline, thanks Corona Community!

#2

Hi @aloh,

Can you do these tests for me?

  1. Add the following line to your code (anywhere in main.lua):

[lua]

print( display.imageSuffix )

[/lua]

  1. Run the app in the Corona Simulator under the “iPhone 5”, “iPhone 6”, and “iPhone 6 Plus” views.

  2. For each, check the output in the Terminal and let me know if it’s showing either “@2x” or “@3x”.

Thanks,

Brent

#3

Hi Brent,

Please find the following display output for simulator and device:

SIMULATOR OUTPUT:

iPhone 5:

simulator-5.png

iPhone6:

simulator-6.png

iPhone 6 +:

simulator-6p.png

DEVICE OUTPUT:

iPhone 5:

device-5.png

iPhone 6: (only Pixel Size changed, content size is the same)

device-6.png

iPhone 6+ (Displaying content size for iPhone 6 instead of iPhone 6+)

device-6p.png

Here’s a copy of our code, hope it helps:

–

– config.lua

–

application =

{

    content =

    {

        scale = “adaptive”,

        imageSuffix =

        {

            ["@2x"] = 1.5,

            ["@3x"] = 2.5,

        },

    },

} 

–

– main.lua

–

display.setStatusBar(display.HiddenStatusBar)

local rect = display.newRect(0, 0, display.contentWidth, display.contentHeight)

rect.anchorX = 0

rect.anchorY = 0

rect:setFillColor(0.3)

local l1 = display.newLine(0, 0, display.contentWidth, display.contentHeight)

local l2 = display.newLine(display.contentWidth, 0, 0, display.contentHeight)

l1.alpha = 0.2

l2.alpha = 0.2

local t1 = display.newText("(0, 0)", 0, 0, native.systemFont, 16)

t1.anchorX = 0

t1.anchorY = 0

local t2 = display.newText(string.format("(%d, %d)", display.contentWidth, display.contentHeight), display.contentWidth, display.contentHeight, native.systemFont, 16)

t2.anchorX = 1

t2.anchorY = 1

local infos = {

    string.format(“display.actualContentSize: %d, %d\n”, display.actualContentWidth, display.actualContentHeight),

    string.format(“display.contentSize: %d, %d\n”, display.contentWidth, display.contentHeight),

    string.format(“display.pixelSize: %d, %d\n”, display.pixelWidth, display.pixelHeight),

    string.format(“display.viewableContent: %d, %d\n”, display.viewableContentWidth, display.viewableContentHeight),

    string.format(“display.imageSuffix: %s\n”, display.imageSuffix)

} 

local t3 = display.newText(table.concat(infos),

    display.contentCenterX, 

    display.contentCenterY, 

    display.contentWidth,

    0,

    native.systemFont,

    16)

local item1 = display.newImageRect(“test.png”, 150, 138)

item1.x = display.contentWidth

item1.y = 0

item1.anchorX = 1

item1.anchorY = 0

Please let me know if there’s anything I can provide, thanks for your help Brent! We are deserate!

#4

Can you post your build.settings?

You’re devices are running in iPhone 5 compatibility mode.  This is likely due to not having the right combination of Default.png files needed.  We have two tutorials for this:

https://coronalabs.com/blog/2014/10/07/tutorial-working-with-the-new-iphones/

This tutorial shows you how to include code in your build.settings and lists the various Default.png files you need to support the new screens.  There are a couple of reminders. 

  1. The iPhone 4, 5, and 6 **do not** support landscape images. You will only provide a portrait version, however you still have to provide the code for Landscape mode, just point it to the portrait images.

  2. In the code you will specify a resolution like 320, 480. The space between the comma and the second number is required.

  3. The iPhone 6’s never new any OS other than iOS 8. Because iOS 7 and 6 are still supported, this technique works with older OS’s.

In this tutorial:

https://coronalabs.com/blog/2014/10/21/tutorial-building-multi-screen-launch-images-using-xcode-6/

You go with a totally different approach to launch images.  This is an iOS 8 only method, so you still need to include the Default.png and Default-568h@2x.png image for earlier iOS’s, but you don’t need that big block of code in build.settings and you don’t need a bunch of other sized Default.png images.

The latter way is the way I would go because the iTunes store will show “Optimized for the iPhone 6 and 6+” label.

This should solve your problem.

Rob

#5

Problem solved, thank you Rob and Brent!

#6

Hi @aloh,

Can you do these tests for me?

  1. Add the following line to your code (anywhere in main.lua):

[lua]

print( display.imageSuffix )

[/lua]

  1. Run the app in the Corona Simulator under the “iPhone 5”, “iPhone 6”, and “iPhone 6 Plus” views.

  2. For each, check the output in the Terminal and let me know if it’s showing either “@2x” or “@3x”.

Thanks,

Brent

#7

Hi Brent,

Please find the following display output for simulator and device:

SIMULATOR OUTPUT:

iPhone 5:

simulator-5.png

iPhone6:

simulator-6.png

iPhone 6 +:

simulator-6p.png

DEVICE OUTPUT:

iPhone 5:

device-5.png

iPhone 6: (only Pixel Size changed, content size is the same)

device-6.png

iPhone 6+ (Displaying content size for iPhone 6 instead of iPhone 6+)

device-6p.png

Here’s a copy of our code, hope it helps:

–

– config.lua

–

application =

{

    content =

    {

        scale = “adaptive”,

        imageSuffix =

        {

            ["@2x"] = 1.5,

            ["@3x"] = 2.5,

        },

    },

} 

–

– main.lua

–

display.setStatusBar(display.HiddenStatusBar)

local rect = display.newRect(0, 0, display.contentWidth, display.contentHeight)

rect.anchorX = 0

rect.anchorY = 0

rect:setFillColor(0.3)

local l1 = display.newLine(0, 0, display.contentWidth, display.contentHeight)

local l2 = display.newLine(display.contentWidth, 0, 0, display.contentHeight)

l1.alpha = 0.2

l2.alpha = 0.2

local t1 = display.newText("(0, 0)", 0, 0, native.systemFont, 16)

t1.anchorX = 0

t1.anchorY = 0

local t2 = display.newText(string.format("(%d, %d)", display.contentWidth, display.contentHeight), display.contentWidth, display.contentHeight, native.systemFont, 16)

t2.anchorX = 1

t2.anchorY = 1

local infos = {

    string.format(“display.actualContentSize: %d, %d\n”, display.actualContentWidth, display.actualContentHeight),

    string.format(“display.contentSize: %d, %d\n”, display.contentWidth, display.contentHeight),

    string.format(“display.pixelSize: %d, %d\n”, display.pixelWidth, display.pixelHeight),

    string.format(“display.viewableContent: %d, %d\n”, display.viewableContentWidth, display.viewableContentHeight),

    string.format(“display.imageSuffix: %s\n”, display.imageSuffix)

} 

local t3 = display.newText(table.concat(infos),

    display.contentCenterX, 

    display.contentCenterY, 

    display.contentWidth,

    0,

    native.systemFont,

    16)

local item1 = display.newImageRect(“test.png”, 150, 138)

item1.x = display.contentWidth

item1.y = 0

item1.anchorX = 1

item1.anchorY = 0

Please let me know if there’s anything I can provide, thanks for your help Brent! We are deserate!

#8

Can you post your build.settings?

You’re devices are running in iPhone 5 compatibility mode.  This is likely due to not having the right combination of Default.png files needed.  We have two tutorials for this:

https://coronalabs.com/blog/2014/10/07/tutorial-working-with-the-new-iphones/

This tutorial shows you how to include code in your build.settings and lists the various Default.png files you need to support the new screens.  There are a couple of reminders. 

  1. The iPhone 4, 5, and 6 **do not** support landscape images. You will only provide a portrait version, however you still have to provide the code for Landscape mode, just point it to the portrait images.

  2. In the code you will specify a resolution like 320, 480. The space between the comma and the second number is required.

  3. The iPhone 6’s never new any OS other than iOS 8. Because iOS 7 and 6 are still supported, this technique works with older OS’s.

In this tutorial:

https://coronalabs.com/blog/2014/10/21/tutorial-building-multi-screen-launch-images-using-xcode-6/

You go with a totally different approach to launch images.  This is an iOS 8 only method, so you still need to include the Default.png and Default-568h@2x.png image for earlier iOS’s, but you don’t need that big block of code in build.settings and you don’t need a bunch of other sized Default.png images.

The latter way is the way I would go because the iTunes store will show “Optimized for the iPhone 6 and 6+” label.

This should solve your problem.

Rob

#9

Problem solved, thank you Rob and Brent!