Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Safe Areas - iPhoneX
Started by prographodeveloper Jul 31 2018 06:31 AM

7 replies to this topic
iphonex safe areas

Best Answer horacebury , 31 July 2018 - 08:35 PM

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.

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 252 posts
  • Corona SDK

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 )

Attached Files



[TOPIC: post.html]
#2

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 252 posts
  • Corona SDK

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


[TOPIC: post.html]
#3

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 252 posts
  • Corona SDK

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

 

I can't think of any.



[TOPIC: post.html]
#4

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 2,956 posts
  • Corona SDK

Can you provide your config.lua?



[TOPIC: post.html]
#5

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 252 posts
  • Corona SDK

--calculate the aspect ratio of the device
local aspectRatio = display.pixelHeight / display.pixelWidth
      
application = {


        content = {
           width = aspectRatio > 1.5 and 800 or math.ceil( 1200 / aspectRatio ),
           height = aspectRatio < 1.5 and 1200 or math.ceil( 800 * aspectRatio ),
           scale = "letterBox",
           fps = 60,


           imageSuffix = {
              ["@2x"] = 1.3,
           },
        },
          
        notification =
        {
            google = { projectNumber = "956856209999" },
            iphone =
            {
                types =
                {
                    "badge", "sound", "alert"
                }
            }
        }
  
}


[TOPIC: post.html]
#6

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,331 posts
  • Corona Staff

How about trying:

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

and skip the translate call?


  • roaminggamer and prographodeveloper like this

[TOPIC: post.html]
#7

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 2,956 posts
  • Corona SDK

  Best Answer

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 likes this

[TOPIC: post.html]
#8

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 252 posts
  • Corona SDK

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.




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: iphonex, safe areas