Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Black Border on iPadPro
Started by d.mach Feb 08 2019 01:01 AM

8 replies to this topic
border ipad pro dark black area
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

d.mach

[GLOBAL: userInfoPane.html]
d.mach
  • Contributor

  • 863 posts
  • Corona SDK

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?

 



[TOPIC: post.html]
#2

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 839 posts
  • Corona SDK

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/



[TOPIC: post.html]
#3

d.mach

[GLOBAL: userInfoPane.html]
d.mach
  • Contributor

  • 863 posts
  • Corona SDK

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!



[TOPIC: post.html]
#4

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 839 posts
  • Corona SDK

The new iPad pro has rounded corners, right? Gotta love those marvels of engineering. :D This could point to it being an issue regarding the safe areas. But, just to be clear:

1) Do you have issues with the new 11 or 12.9 inch iPad Pro?
2) What values do you use to create the bg, e.g. local bg = display.newRect( 240, 160, 570, 360 )?
3) What are the content width and height values in your config.lua file?



[TOPIC: post.html]
#5

d.mach

[GLOBAL: userInfoPane.html]
d.mach
  • Contributor

  • 863 posts
  • Corona SDK

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)
end


[TOPIC: post.html]
#6

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 839 posts
  • Corona SDK

This 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.



[TOPIC: post.html]
#7

d.mach

[GLOBAL: userInfoPane.html]
d.mach
  • Contributor

  • 863 posts
  • Corona SDK

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?



[TOPIC: post.html]
#8

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 839 posts
  • Corona SDK

Leaving for a couple of days, but before I do, I just had post here. :P

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.



[TOPIC: post.html]
#9

sporkfin

[GLOBAL: userInfoPane.html]
sporkfin
  • Contributor

  • 500 posts
  • Corona SDK

Try substituting the "safe" display calls in your code above

display.safeScreenOriginX,
display.safeScreenOriginY,
display.safeActualContentWidth,
display.safeActualContentHeight,
safeCenterX  = display.safeScreenOriginX + display.safeActualContentWidth  * 0.5,
safeCenterY  = display.safeScreenOriginY + display.safeActualContentHeight * 0.5,




[topic_controls]
[/topic_controls]