Content Positioning

[bubblebobble]

I know this has been covered a thousand times but I just cannot seem to find the correct answer.

I would like my buttons to stay inthe same positions on different device screen sizes.
For example I have a left/right buttons and a fire button at the bottom of the screen and hi and current scores at the top.

I would like to query the devices actualscreen height and width and then position the buttons according to the screen size.

At present I have the config set at 320/480.
I have tried using actualcontentwidth / height etc but the buttons are still not positioning correctly.

I am looking for a basic formula using the display properties to accomplish this.
So, if i have a button positioned at the bottom of the screen on one device I would like it so on another device with a different screen size not further up the screen.

Any thoughts are most welcome.

[Il.Sui]

Hi, have you tried the letterbox scale mode?

https://docs.coronalabs.com/guide/basics/configSettings/index.html

[bubblebobble]

Hi,
Yes letterbox mode is being used.

Basically I have been adjusting all the Uis on my games so the buttons will be lower on higher resolution devices as the buttons are quite high up the screen.
When I position them lower in the areas that will work it makes the user experience far better.
But moving too and from different devices they are moving off screen slightly.
This is why I am trying to figure out positioning them relative to the actual screen on various devices
I hope that make sense

[KyleLeighGames]

Hey,
The left edge and top of the screen does vary with the device you are using. So if you position an image at (0,0) its location will change depending on the device.

If you use display.screenOriginX it will give you the coordinates of the left edge of the screen. This does vary depending on device. Use it with display.actualContentWidth.

You can also use display.safeScreenOriginX and display.safeActualContentHeight for the useable area on the screen.

[bubblebobble]

Hey,
Thanks for that, with that info I found a guide by Rob that explains the usage - everything looking good now
Again thanks for the help

[XeduR]

You can also use my screen module, which does all the calculations for you. Here’s a link to a sample project that’s using it. You’ll find screen.lua inside the spyric folder.

Solar2D-Plugins-Public/Screen at main · SpyricGames/Solar2D-Plugins-Public

[kakula]

I already downloaded and will use @XeduR’s code

But i would like to share with you a few information that might help in understanding some of the complexity in here

The first thing that you should know is whatever scale you chose in config.lua will affect everything else

Personally I always use letterBox for my apps (I make apps more than I make games)

If you set your app to letterBox with #### width and #### height you are telling the compiler or interpreter or phone or whatever is doing the job that whatever screen or phone being used that it must be considered as the width or height you set, no matter what the actual resolution of the phone was

and now it gets tricky.

let’s say you set the width and height to be 1080X1920
and you use a phone that is actually 1080X1920 then this is your lucky day
specially if the phone has all zero values returned by display.getSafeAreaInsets()

In this case the app or game will look exactly on the phone as the simulator

and now most phones don’t return zeros those days

And what are those values?
virtual back buttons at the bottom, camera lens in the middle of the screen … and don’t forget the setStatusBar … you name it!

so what happens if you run your app on iPhoneX … width will be as whatever you set, but height will be much larger … and all of this because you used letterBox

How to fix it?

don’t say:

object.y = display.contentHeight-object.height*0.5 -50

But say whatever is in Xedure’s code which will add the values of those parameters which will vary based on phone being used

but don’t expect the app to look exactly the same on all phones … because for example a scrollview object will be larger in height, and will show more icons without scrolling as soon as the app starts … but the button beneath it will always be as far from the scrollview on all phones if you know how to position it

So NEVER HARD CODE ANYTHING

Why would anyone then use letterBox?

What happens if we don’t use letterbox?

All images that you worked hard for will be stretched and the app or game will look funny … UNLESS by accident the phone being used matched the resolution you set in config.lua

I hope i’m not complicating things … but it is indeed complicated by nature

You cannot just fit an image dimensioned as 500X1000 in a frame dimensioned as 600X1000 in real life and actual life
But you can easily fit it in 1000X2000 or 250X500 without having to change how it looks

[colinmorgan]

I use "zoomEven" and work within a safe zone in the middle, understanding that on phones, the edges will be cut off and on tablets the top and bottom will be cut off. I mostly work from the middle outward and get the actual screen dimensions on launch, so I can do some shimming of various elements to take advantage of the real estate I’ve got depending on the device.

The only time it hasn’t worked was with a player who was using a folding device that was super skinny when folded and essentially square when it was open. The screenshots he sent me were wild.

[XeduR]

I just updated my screen module a few minutes ago.

Now there’s a new function screen.waitUntilReady, which resolves the annoying waiting issues with Android devices that have software keys.

I don’t remember who it was, but someone tested the screen module using a fold device and they said the module worked as expected. Those devices are something I personally try to avoid like the plague.

[bubblebobble]

@XeduR So if you dont mind explaining to me with your module how to position an object 20 units in from the right top of screen.safe.maxX and the same for the Y.

screen = require(“spyric.screen”)

object= display.newImage(“image.png”)
object.x = screen.safe.maxX ???
object.y = screen.safe.maxY ???

[XeduR]

Yeah, sorry the documentation has been “coming” for a while.

The main properties you’re interested in are:

screen.minX -- left edge of the screen
screen.maxX -- right edge of the screen
screen.minY -- top edge of the screen
screen.maxY -- bottom of the screen
screen.width -- screen width
screen.height -- screen height
screen.centerX -- screen's center on x-axis
screen.centerY -- screen's center on y-axis
screen.diagonal -- the distance from one corner to the opposite corner

If you wanted to position a display object 20 pixels from the top right corner of the screen, it’d go exactly like you just did it, but you’d have to also offset the object as they are anchored by their centre position by default.

local screen = require( "spyric.screen" )

local object = display.newImage( "image.png" )
object.x = screen.safe.maxX - object.width*0.5 - 20
object.y = screen.safe.minY + object.height*0.5 + 20

-- alternatively you could use anchors to position the objects.
local object = display.newImage( "image.png" )
object.x = screen.safe.maxX - 20
object.y = screen.safe.minY + 20
object.anchorX, object.anchorY = 1, 0

Using screen.safe properties will account for the notches. screen properties go to the actual edges and ignore the notches. If a device doesn’t have notches, then these are the same.

One thing to remember is that in Solar2D the y-coordinates are reversed (not sure what the original design idea was). As you go down in the screen, the value of the y-coordinate increases.