I noticed a black border around my open game on an iPad Pro. Testing another game like for example the new Kingdom Rush it has no black border.
How can I remove this black border and use all of the devices screen space?
You are most likely seeing the black bars because your project doesn’t take tablets’ wider displays into account.
You should read https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/
Thanks but I’m using the 570×360 for landscape solution already and have also optimized the game for the iPhoneX but just now realized there is still a black border around the WHOLE screen on a new iPadPro. Not just top bottom or left and right, but on all sides!
The new iPad pro has rounded corners, right? Gotta love those marvels of engineering. 
This could point to it being an issue regarding the safe areas. But, just to be clear:
- Do you have issues with the new 11 or 12.9 inch iPad Pro?
- What values do you use to create the bg, e.g. local bg = display.newRect( 240, 160, 570, 360 )?
- What are the content width and height values in your config.lua file?
config.lua is:
content = { fps = 60, width = 320, height = 480, scale = "letterbox", antialiasing=true, imageSuffix = { ["@2x"] = 1.5, }, },
I have tested on a new iPad Pro 12.9 inch
I’m creating the BG using for example:
\_W = display.contentWidth \_H = display.contentHeight \_soX = display.screenOriginX \_soY = display.screenOriginY display.setDefault( "background",1,1,1) gfx.topoverlay=display.newRect (0,0,\_W-2\*\_soX+128,\_H-2\*\_soY+128)
the last image should normally cover some “exotic” borders.
For the iPhoneX I am using this check:
local topInset, leftInset, bottomInset, rightInset = display.getSafeAreaInsets() if topInset\>0 then \_G.onIphoneX=1 \_G.iPhoneX\_OffsetValue=math.round(topInset) \_G.bottomInsetValue=math.round(bottomInset) else \_G.onIphoneX=0 \_G.iPhoneX\_OffsetValue=0 \_G.bottomInsetValue=math.round(bottomInset) endThis seems odd.
For the new iPad Pro 12.9 inch, your actual content width and height should be 480 & 360, and your gfx.topoverlay’s width and height values should be 608 & 487. In other words, there should be no way that gfx.topoverlay doesn’t cover the entire screen if it is centered unless you’ve scaled it down. If “print( gfx.topoverlay.xScale, gfx.topoverlay.yScale )” outputs “1 1”, then my only guess would be that there is some issue concerning the rounded corners. That, or witchcraft, or perhaps on a live device the dimensions change and your formulas no longer work properly.
Edit : I personally always use display.actualContentWidth and display.actualContentHeight to create display objects that fill the entire screen.
This looks like it is based on the small rounded corners on the new iPad. Is there a similar Corona “solution” to this like the one for the iPhoneX?
Leaving for a couple of days, but before I do, I just had post here. 
Have you checked if your math is actually correct by creating a simple rect that should cover the screen AND have you checked that you don’t scale your BG anywhere? i.e.
local testRect = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight )
If that testRect doesn’t cover your entire screen, then something is definitely wrong.
Additionally, you could add two texts on the screen:
local testTextA = display.newText( "display values: "..display.actualContentWidth..", "..display.actualContentHeight, 100, 200, native.systemFont, 16 ) testTextA:setFillColor( 1, 0, 0 ) local testTextB = display.newText( "display values: "..(\_W-2\*\_soX+128)..", "..(\_H-2\*\_soY+128), 100, 300, native.systemFont, 16 ) testTextB:setFillColor( 1, 0, 0 )
This way you can see the values on your screen after you’ve built the app. If testTextA string shows larger values, then your math is simply wrong. Otherwise you’ve probably found some neat problem that should be seen to by someone more proficient than me.
Try substituting the “safe” display calls in your code above
[lua]
display.safeScreenOriginX,
display.safeScreenOriginY,
display.safeActualContentWidth,
display.safeActualContentHeight,
safeCenterX = display.safeScreenOriginX + display.safeActualContentWidth * 0.5,
safeCenterY = display.safeScreenOriginY + display.safeActualContentHeight * 0.5,
[/lua]
You are most likely seeing the black bars because your project doesn’t take tablets’ wider displays into account.
You should read https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/
Thanks but I’m using the 570×360 for landscape solution already and have also optimized the game for the iPhoneX but just now realized there is still a black border around the WHOLE screen on a new iPadPro. Not just top bottom or left and right, but on all sides!
The new iPad pro has rounded corners, right? Gotta love those marvels of engineering. This could point to it being an issue regarding the safe areas. But, just to be clear:
- Do you have issues with the new 11 or 12.9 inch iPad Pro?
- What values do you use to create the bg, e.g. local bg = display.newRect( 240, 160, 570, 360 )?
- What are the content width and height values in your config.lua file?
config.lua is:
content = { fps = 60, width = 320, height = 480, scale = "letterbox", antialiasing=true, imageSuffix = { ["@2x"] = 1.5, }, },
I have tested on a new iPad Pro 12.9 inch
I’m creating the BG using for example:
\_W = display.contentWidth \_H = display.contentHeight \_soX = display.screenOriginX \_soY = display.screenOriginY display.setDefault( "background",1,1,1) gfx.topoverlay=display.newRect (0,0,\_W-2\*\_soX+128,\_H-2\*\_soY+128)
the last image should normally cover some “exotic” borders.
For the iPhoneX I am using this check:
local topInset, leftInset, bottomInset, rightInset = display.getSafeAreaInsets() if topInset\>0 then \_G.onIphoneX=1 \_G.iPhoneX\_OffsetValue=math.round(topInset) \_G.bottomInsetValue=math.round(bottomInset) else \_G.onIphoneX=0 \_G.iPhoneX\_OffsetValue=0 \_G.bottomInsetValue=math.round(bottomInset) endThis seems odd.
For the new iPad Pro 12.9 inch, your actual content width and height should be 480 & 360, and your gfx.topoverlay’s width and height values should be 608 & 487. In other words, there should be no way that gfx.topoverlay doesn’t cover the entire screen if it is centered unless you’ve scaled it down. If “print( gfx.topoverlay.xScale, gfx.topoverlay.yScale )” outputs “1 1”, then my only guess would be that there is some issue concerning the rounded corners. That, or witchcraft, or perhaps on a live device the dimensions change and your formulas no longer work properly.
Edit : I personally always use display.actualContentWidth and display.actualContentHeight to create display objects that fill the entire screen.
This looks like it is based on the small rounded corners on the new iPad. Is there a similar Corona “solution” to this like the one for the iPhoneX?
Leaving for a couple of days, but before I do, I just had post here.
Have you checked if your math is actually correct by creating a simple rect that should cover the screen AND have you checked that you don’t scale your BG anywhere? i.e.
local testRect = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight )
If that testRect doesn’t cover your entire screen, then something is definitely wrong.
Additionally, you could add two texts on the screen:
local testTextA = display.newText( "display values: "..display.actualContentWidth..", "..display.actualContentHeight, 100, 200, native.systemFont, 16 ) testTextA:setFillColor( 1, 0, 0 ) local testTextB = display.newText( "display values: "..(\_W-2\*\_soX+128)..", "..(\_H-2\*\_soY+128), 100, 300, native.systemFont, 16 ) testTextB:setFillColor( 1, 0, 0 )
This way you can see the values on your screen after you’ve built the app. If testTextA string shows larger values, then your math is simply wrong. Otherwise you’ve probably found some neat problem that should be seen to by someone more proficient than me.
Try substituting the “safe” display calls in your code above
[lua]
display.safeScreenOriginX,
display.safeScreenOriginY,
display.safeActualContentWidth,
display.safeActualContentHeight,
safeCenterX = display.safeScreenOriginX + display.safeActualContentWidth * 0.5,
safeCenterY = display.safeScreenOriginY + display.safeActualContentHeight * 0.5,
[/lua]