Aspect ratio & positioning problem with screen

Solar2D General Questions/Discussion
#1

Hey Guys,

in the file you can see the blue circle in the top left corner, the x and y values are 0,0. The screen of my Oneplus 5T is 2160x1080 with a 18:9 or 2:1 screen ratio. The problem is that the circle is not in the top left corner of the screen, so the question is how do i get the cirlce/the 0,0 point to the top left corner without setting the y value to a negative value or do i need to develop the app from the start with 2160x1080? By the way, originally the app was created with 1920x1080 resolution.

Thanks & take care,

Jason

#2

Can you post your config.lua?

Most likely you have a config.lua that’s defining your content area with an aspect ratio of 1.5:1 (or 3:2) which is our normal recommendation. Your phone devices are longer than that, typically 16:9 or in the S8’s case 2:1 (or the iPhone X’s 19.5:9!). Tablets like the iPad are shorter and wider.  On phones, if you use the standard 1.5:1 config.lua, the width will match your device. That is 0 will be on an edge, but your other edge will be at a negative location.  On the iPad the height will match and 0 will be on the height edge, but the width edge will be negative (assuming a portrait app as we always talk about config.lua in portrait mode).

This image is done in landscape mode for practicality.  To get the top, left corner, you would use the API’s display.screenOriginX and display.screenOriginY.

Normally for items you want along top, left edges you would add the values of display.screenOriginX/Y to your positioning.  For bottom, right, you would use display.actualContentWidth/Height.

The green is the defined content area. The blue is your typical 16:9 phone. The Yellow is 2:1 S8 and the pink is the iPad 

Rob

#3

Hey, I’m also developing my app to be working on the OnePlus 5T, it’s my phone so it better be working good on it.

As long as you have in your main.lua have something like this:

\_G.\_W = display.contentWidth -- Get the width of the screen \_G.\_H = display.contentHeight -- Get the height of the screen

anytime you need to fit or position objects according to your screen size (content-area) you can use _W and _H. Understanding how to use anchorX and anchorY helps when offsetting objects from devices edges. This will definitely make things scale better and improve precision across different device dimensions.

Here is how I have my config.lua to support OnePlus 5T:

elseif display.pixelHeight / display.pixelWidth \>= 2 then application = { content = { -- width = display.pixelWidth/3, -- height = display.pixelHeight/3, fps = 60, width = 360, height = 720, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, -- i don't know LOL ["@4x"] = 3, -- OnePlus 5T }, }, } end
#4

@jason,

What kind of app or game are you trying to make?  If you give a few details I may be able to point in the right direction to save yourself effort and heartache.

#5

in general, when letterboxing, regardless of the difference between device’s aspect ratio and content’s aspect ratio, you’ll need to do one of two things to get the device’s true zero coordinate (or you can do them both, though they’re redundant*)

1.  leave xAlign|yAlign as “center”|“center” in config.lua, then use display.screenOriginX|Y to get the device zero

2.  set xAlign|yAlign to “left”|“top” in config.lua, then content zero will equal device zero (tradeoff:  contentCenterX|Y will no longer equal device center, instead calc as display.actualContentWidth|Height / 2)

*setting xAlign|yAlign to “left”|“top” causes display.screenOriginX|Y to be 0|0, that’s why redundant.

#6

Can you post your config.lua?

Most likely you have a config.lua that’s defining your content area with an aspect ratio of 1.5:1 (or 3:2) which is our normal recommendation. Your phone devices are longer than that, typically 16:9 or in the S8’s case 2:1 (or the iPhone X’s 19.5:9!). Tablets like the iPad are shorter and wider.  On phones, if you use the standard 1.5:1 config.lua, the width will match your device. That is 0 will be on an edge, but your other edge will be at a negative location.  On the iPad the height will match and 0 will be on the height edge, but the width edge will be negative (assuming a portrait app as we always talk about config.lua in portrait mode).

This image is done in landscape mode for practicality.  To get the top, left corner, you would use the API’s display.screenOriginX and display.screenOriginY.

Normally for items you want along top, left edges you would add the values of display.screenOriginX/Y to your positioning.  For bottom, right, you would use display.actualContentWidth/Height.

The green is the defined content area. The blue is your typical 16:9 phone. The Yellow is 2:1 S8 and the pink is the iPad 

Rob

#7

Hey, I’m also developing my app to be working on the OnePlus 5T, it’s my phone so it better be working good on it.

As long as you have in your main.lua have something like this:

\_G.\_W = display.contentWidth -- Get the width of the screen \_G.\_H = display.contentHeight -- Get the height of the screen

anytime you need to fit or position objects according to your screen size (content-area) you can use _W and _H. Understanding how to use anchorX and anchorY helps when offsetting objects from devices edges. This will definitely make things scale better and improve precision across different device dimensions.

Here is how I have my config.lua to support OnePlus 5T:

elseif display.pixelHeight / display.pixelWidth \>= 2 then application = { content = { -- width = display.pixelWidth/3, -- height = display.pixelHeight/3, fps = 60, width = 360, height = 720, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, -- i don't know LOL ["@4x"] = 3, -- OnePlus 5T }, }, } end
#8

@jason,

What kind of app or game are you trying to make?  If you give a few details I may be able to point in the right direction to save yourself effort and heartache.

#9

in general, when letterboxing, regardless of the difference between device’s aspect ratio and content’s aspect ratio, you’ll need to do one of two things to get the device’s true zero coordinate (or you can do them both, though they’re redundant*)

1.  leave xAlign|yAlign as “center”|“center” in config.lua, then use display.screenOriginX|Y to get the device zero

2.  set xAlign|yAlign to “left”|“top” in config.lua, then content zero will equal device zero (tradeoff:  contentCenterX|Y will no longer equal device center, instead calc as display.actualContentWidth|Height / 2)

*setting xAlign|yAlign to “left”|“top” causes display.screenOriginX|Y to be 0|0, that’s why redundant.