Safe Areas - iPhoneX

[prographodeveloper]

I would have expected the following code to draw the safe area in white, with the unsafe areas in red.

However when I run it on the iPhoneX simulator, it looks like the safe area dimensions given by corona are too great. In other words the given safe area is not safe.

I have attached a screen grab so you can see what I mean, the white area is partly obstructed by the speaker and camera part of the device. Unfortunately I do not have a physical iPhoneX to test on, only the simulator.

 local totalArea = display.newRect(0,0,display.contentWidth,display.contentHeight)  totalArea:translate(totalArea.width\*0.5,totalArea.height\*0.5)  totalArea:setFillColor(1,0,0)     local safeArea = display.newRect(     display.safeScreenOriginX,     display.safeScreenOriginY,     display.safeActualContentWidth,     display.safeActualContentHeight   )  safeArea:translate( safeArea.width\*0.5, safeArea.height\*0.5 )

[prographodeveloper]

Additionally, you are giving the safe area in “actual” dimensions, so these will have to be converted, if they are used with display.contentWidth, display.contentHeight - is that correct correct?

   local wRatio = display.contentWidth / display.actualContentWidth    local hRatio = display.contentHeight / display.actualContentHeight   local safeContentWidth = display.safeActualContentWidth \* wRatio    local safeContentHeight = display.safeActualContentHeight \* hRatio       local safeContentX = display.safeScreenOriginX \* wRatio    local safeContentY = display.safeScreenOriginY \* hRatio

[prographodeveloper]

One last question - are there any devices that have unsafe widths when phone is in portrait mode?

I can’t think of any.

[horacebury]

Can you provide your config.lua?

[prographodeveloper]

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth &nbsp; &nbsp; &nbsp;&nbsp; application = { &nbsp; &nbsp; &nbsp; &nbsp; content = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scale = "letterBox", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fps = 60, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["@2x"] = 1.3, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; notification = &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; google = { projectNumber = "956856209999" }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iphone = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; types = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "badge", "sound", "alert" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp;&nbsp; }

[rob]

How about trying:

 local safeArea = display.newRect( display.contentCenterX, display.contentCenterY, display.safeActualContentWidth, display.safeActualContentHeight )

and skip the translate call?

[horacebury]

This works fine for me:

local safeArea = display.newRect( display.safeScreenOriginX + display.safeActualContentWidth\*.5, display.safeScreenOriginY + display.safeActualContentHeight\*.5, display.safeActualContentWidth, display.safeActualContentHeight )

I can confirm this works on an actual iPhone X via Live Build.

[prographodeveloper]

Thanks guys, both suggestions produce exactly the same output on the simulator, as horacebury has verified on a real device, I am gonna assume the simulator is just a little off.

[prographodeveloper]

Additionally, you are giving the safe area in “actual” dimensions, so these will have to be converted, if they are used with display.contentWidth, display.contentHeight - is that correct correct?

   local wRatio = display.contentWidth / display.actualContentWidth    local hRatio = display.contentHeight / display.actualContentHeight   local safeContentWidth = display.safeActualContentWidth \* wRatio    local safeContentHeight = display.safeActualContentHeight \* hRatio       local safeContentX = display.safeScreenOriginX \* wRatio    local safeContentY = display.safeScreenOriginY \* hRatio

[prographodeveloper]

One last question - are there any devices that have unsafe widths when phone is in portrait mode?

I can’t think of any.

[horacebury]

Can you provide your config.lua?

[prographodeveloper]

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth &nbsp; &nbsp; &nbsp;&nbsp; application = { &nbsp; &nbsp; &nbsp; &nbsp; content = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scale = "letterBox", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fps = 60, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["@2x"] = 1.3, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; notification = &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; google = { projectNumber = "956856209999" }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iphone = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; types = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "badge", "sound", "alert" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp;&nbsp; }

[rob]

How about trying:

 local safeArea = display.newRect( display.contentCenterX, display.contentCenterY, display.safeActualContentWidth, display.safeActualContentHeight )

and skip the translate call?

[horacebury]

This works fine for me:

local safeArea = display.newRect( display.safeScreenOriginX + display.safeActualContentWidth\*.5, display.safeScreenOriginY + display.safeActualContentHeight\*.5, display.safeActualContentWidth, display.safeActualContentHeight )

I can confirm this works on an actual iPhone X via Live Build.

[prographodeveloper]

Thanks guys, both suggestions produce exactly the same output on the simulator, as horacebury has verified on a real device, I am gonna assume the simulator is just a little off.