Addressing layout discrepancies across devices

Solar2D Android
#21

You could also be seeing the effect of soft button bars/status bars. On Android, over all the different versions, and brand additions, your screen height may count the status bar on one brand of device and not on the other.  Case in point, you have a 1920x1080 device in both the good and bad section. So something else is effecting your available pixels.

I agree, the original “ultimate config.lua” was designed at a time when there were few screen sizes and it was designed to solve a particular problem. Today there are simply too many screen variations to try and device test your way.  

What are you trying to make? It impacts the best way to setup your config.lua. For instance the advice for a portrait business app will likely be different than a landscape tower defense game.

Rob

#22

Thanks guys. What you are saying make sense Rob, I hadn’t considered that.  My app is portrait-only.  Here are some examples.

GOOD

http://demo.sirentec.net/Good_Galaxy_S7.png

BAD

http://demo.sirentec.net/Bad_Galaxy%20J1%20Ace.png

WORSE

http://demo.sirentec.net/Bad_Nexus9.png

I’m going to try a build with native.setProperty( “androidSystemUiVisibility”, “immersiveSticky” )

#23

Could you humor me and make a test app using this config.lua:

application = { content = { width = 320, height = 480, scale = "letterbox", imageSuffix = { ["@2x"] = 2.0, ["@4x"] = 4.0, }, }, }

Then in your main.lua do:

local fullScreen = display.newRect(display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight) fullScreen:setFillColor(0.5, 0.9, 0.9) local contentArea = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) contentArea:setFillColor( 0.9, 0.5, 0.9)

and snap screen shots on the various devices.

It might be helpful to also use display.newText() and output various values you’re actually getting:

display.actualContentWidth

display.actualContentHeight

display.pixelWidth

display.pixelHeight

display.topStatusBarContentHeight

display.screenOriginX

display.screenOriginY

Rob

#24

Tiny clarification… there isn’t a “display.contentOriginX” (or Y). It’s “display. screen OriginX” and “display. screen OriginY”.

https://docs.coronalabs.com/api/library/display/screenOriginX.html

https://docs.coronalabs.com/api/library/display/screenOriginY.html

The reason I mention these specifically is because those are the super-useful-ultra-valuable properties which I use frequently in “letterbox” mode. Basically, if you have a standard 2:3 ratio content area like 320x480 and you run that app on an iPad (let’s assume portrait orientation), there will be letterbox regions on both the left and right sides of the content area… that’s obviously because the iPad aspect ratio is 3:4, not 2:3.

This is where the above APIs save you… if you test “screenOriginX” on the iPad, you’ll get some negative value like -20. That is basically the exact amount of pixels you need to offset some item to push it exactly up against the left edge of the screen on iPad (adding it to the object X position) or against the right side (subtracting it from the object X position).

Conveniently, it won’t have any effect on devices without left/right letterbox regions… in that case it will be -0 so you can still add/subtract it safely in your code without worrying about any device detection, varying content area sizes, or other silliness.

In any app I work on using “letterbox”, I cache these variables near the top of the module so they’re far shorter and easier to use. For instance:

[lua]

local ox = display.screenOriginX

local oy = display.screenOriginY

[/lua]

Then I just add/subtract them whenever needed, for example:

[lua]

local myImage = display.newImageRect( “ball.png”, 50, 50 )

myImage.x = 200 - ox

myImage.y = 400 + oy

[/lua]

Brent

#25

Good catch Brent. I’ve updated my post…

Rob

#26

Here you go Rob.  For whatever reason,  display.contentOriginX and display.contentOriginY are nil values so I removed them.

http://demo.sirentec.net/Galaxy%20J1%20Ace.png

http://demo.sirentec.net/Galaxy%20Note3.png

http://demo.sirentec.net/LG%20G3.png
 

http://demo.sirentec.net/Nexus%205%20Arabic.png

http://demo.sirentec.net/Nexus%205.png

http://demo.sirentec.net/Nexus%207%20(2013).png

http://demo.sirentec.net/Nexus%209.png

http://demo.sirentec.net/One%20(m8).png

Edit : I just saw Brent’s post.  I can go back and add those if needed.

Edit 2: These are global values that I use.  Could this possibly be some of my problem?

m.centerX = display.contentCenterX m.centerY = display.contentCenterY m.screenLeft = display.screenOriginX m.screenWidth = display.contentWidth - m.screenLeft \* 2 m.screenRight = m.screenLeft + m.screenWidth m.screenTop = display.screenOriginY m.screenHeight = display.contentHeight - m.screenTop \* 2 m.screenBottom = m.screenTop + m.screenHeight m.screenTopSB = m.screenTop + display.topStatusBarContentHeight m.screenHeightSB = display.contentHeight - m.screenTopSB m.screenBottomSB = m.screenTopSB + m.screenHeightSB
#27

I think the important takeaway is that the teal background fills the screen correctly. The content area seems to also be correct. But the actualContentHeight is different on all the devices due to loosing screen real estate to the button bars.

Rob

#28

At first glance, adding native.setProperty( “androidSystemUiVisibility”, “immersiveSticky” ****) to my main.lua seems to have addressed the issue for all but 2 of the devices from the test set.  (The Nexus 9 and Nexus 7 (2013)).  I can definitely live with that. 

Here’s the full main.lua in case future visitors want to utilize it.

<lua>

native.setProperty( “androidSystemUiVisibility”, “immersiveSticky” )

local fullScreen = display.newRect(display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight)

fullScreen:setFillColor(0.5, 0.9, 0.9)

local contentArea = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight)

contentArea:setFillColor( 0.9, 0.5, 0.9)

local startY = 20

local text1 = display.newText("Content Width " … display.actualContentWidth, 150, startY, native.systemFont, 16 )

local text2 = display.newText("Content Height " … display.actualContentHeight, 150, startY + 25, native.systemFont, 16 )

local text3 = display.newText("Pixel Width " … display.pixelWidth, 150, startY + 50, native.systemFont, 16 )

local text4 = display.newText("Pixel Height " … display.pixelHeight, 150, startY + 75, native.systemFont, 16 )

local text5 = display.newText("SB Content Height " … display.topStatusBarContentHeight, 150, startY + 100, native.systemFont, 16 )

local text6 = display.newText("Screen OriginX " … display.screenOriginX, 100, startY + 125, native.systemFont, 16 )

local text7 = display.newText("Screen OriginY " … display.screenOriginY, 100, startY + 150, native.systemFont, 16 )

</lua>

#29

Sorry to jump in on an outdated topic here but I’m just starting on my project and I’ve been researching resolutions.  Is there a tutorial out there demonstrating (for dummies) how to do what you’re describing with some examples?  It seems like I would benefit from understanding this concept early on in my project.  I tried searching for something but couldn’t seem to find anything.