Solar2D screen positions for all devices resolution

FileEX · March 16, 2021, 6:21pm

I have an application made in Solar2D (formerly Corona SDK) but it looks different on different devices. How can I make the item positions the same for all resolutions and devices?

My app on LG K10 2017

My app on LG K8

My code part:

local composer = require 'composer';
local bm = require 'backManager';

display.setDefault('background', 0.19,0.23,0.3);

local topBar = display.newRect(display.contentCenterX,0,display.contentWidth, 50);
topBar:setFillColor(0.13,0.16,0.2);

topBar.y = topBar.contentHeight * 0.5 - display.topStatusBarContentHeight / 2;

bm.create(topBar.y);
bm.setVisible(false);

local options = {
	text = 'MatUM - Umiem to',
	x = topBar.x, 
	y = topBar.y * 0.5 - display.screenOriginY,
	width = topBar.contentWidth, 
	height = topBar.contentHeight, 
	font = native.systemFontBold, 
	fontSize = 17,
	align = 'center',
};

local title = display.newText(options);
title.anchorY = 0;

depilz · March 16, 2021, 6:54pm

You should also add the display.screenOriginY to you topBar position

So this should place it in the right position.
topBar.y = topBar.contentHeight * 0.5 - display.topStatusBarContentHeight / 2 + display.screenOriginY

FileEX · March 16, 2021, 7:17pm

topBar.y = display.screenOriginY + (topBar.contentHeight / 2) - display.topStatusBarContentHeight / 2;

Results on all devices:

depilz · March 16, 2021, 7:43pm

There are 2 things that I don’t understand

Why are you using topBar.contentHeight instead of topBar.height? (I have never seen that before)

And why are you subtracting half of display.topStatusBarContentHeight? (Shouldn’t you add it up?)

I would normally do it like this:

local topBar = display.newRect(display.contentCenterX, screen.originY + display.topStatusBarContentHeight, display.contentWidth, 50);
topBar.anchorY = 0
topBar:setFillColor(0.13,0.16,0.2);

depilz · March 16, 2021, 7:44pm

Or, if you really want to keep the anchor at .5

local topBar = display.newRect(display.contentCenterX, screen.originY + display.topStatusBarContentHeight + 25, display.contentWidth, 50);
topBar:setFillColor(0.13,0.16,0.2);

FileEX · March 16, 2021, 7:47pm

Look at the emulator

depilz · March 16, 2021, 7:49pm

Seems to be working now!

FileEX · March 16, 2021, 7:51pm

It looks weird on emulator

depilz · March 16, 2021, 7:59pm

It’s because all the other objects are using topBar.y position as reference.

The anchor says which point of it will be used as the reference to place the object.
(Check this for more information.)

If you want to avoid anchors for now, use this formula and everything is going to run well again

local topBar = display.newRect(display.contentCenterX, screen.originY + display.topStatusBarContentHeight + 25, display.contentWidth, 50);
topBar:setFillColor(0.13,0.16,0.2);

FileEX · March 16, 2021, 8:01pm

It still doesn’t look like it should

depilz · March 16, 2021, 8:02pm

Try this:

local topBar = display.newRect(display.contentCenterX, screen.originY + 25, display.contentWidth, 50);
topBar:setFillColor(0.13,0.16,0.2);

FileEX · March 16, 2021, 8:25pm

Result on all devices now:

roaminggamer · March 16, 2021, 8:52pm

@FileEX

Hi. I’m a little different from other folks here. In SSK I calculate left, top, right, bottom, and other values then use those. I like the shorthand names and find them easier to remember.

You can get my code from SSK, or a shortened version (minus cleaning steps) here:

	_G.centerX  = display.contentCenterX
	_G.centerY  = display.contentCenterY
	_G.fullw  	= display.actualContentWidth
	_G.fullh  	= display.actualContentHeight
	_G.left   	= centerX - fullw/2
	_G.right  	= centerX + fullw/2
	_G.top    	= centerY - fullh/2
	_G.bottom 	= centerY + fullh/2

SSK2 Docs - https://roaminggamer.github.io/RGDocs/pages/SSK2/
Page talking about these values: https://roaminggamer.github.io/RGDocs/pages/SSK2/globals/

SSK Source: https://github.com/roaminggamer/SSK2

SSK Code for all globals I create:

github.com

roaminggamer/SSK2/blob/master/ssk2/core/variables.lua

-- =============================================================
-- Copyright Roaming Gamer, LLC. 2008-2018 (All Rights Reserved)
-- =============================================================
-- Global Variables
-- =============================================================

-- =============================================================
-- Display
-- =============================================================
_G.w             	= display.contentWidth
_G.h             	= display.contentHeight
_G.centerX       	= display.contentCenterX
_G.centerY       	= display.contentCenterY
_G.fullw         	= display.actualContentWidth 
_G.fullh         	= display.actualContentHeight
_G.unusedWidth   	= _G.fullw - _G.w
_G.unusedHeight  	= _G.fullh - _G.h
_G.left	        	= 0 - _G.unusedWidth/2
_G.top           	= 0 - _G.unusedHeight/2
_G.right         	= _G.w + _G.unusedWidth/2

This file has been truncated. show original

I think, if you use my top you can get that rectangle to align perfectly.

Note: I didn’t see you mention your config.lua settings, but I always use letterbox scaling and suggest you do so too. e.g.

application = {
	content = {
		width = 640,
		height = 960, 
		scale = "letterbox", 
		--fps = 60,
	},
}

roaminggamer · March 16, 2021, 8:54pm

Oh, and when creating that rectangle, the easiest way to align to the top would be:

local rect = display.* ... call to make rectangle.
rect.anchorY = 0;
rect.y = top

FileEX · March 16, 2021, 9:06pm

It still looks like this

local composer = require 'composer';
local bm = require 'backManager';
require 'screen';

display.setDefault('background', 0.19,0.23,0.3);

local topBar = display.newRect(display.contentCenterX, top, display.contentWidth, 50);
topBar:setFillColor(0.13,0.16,0.2);
topBar.anchorY = 0;
topBar.y = top;

bm.create(topBar.y);
bm.setVisible(false);

local options = {
	text = 'MatUM - Umiem to',
	x = topBar.x,
	y = topBar.y + topBar.height/4,
	width = topBar.contentWidth, 
	height = topBar.contentHeight, 
	font = native.systemFontBold, 
	fontSize = 17,
	align = 'center',
};

local title = display.newText(options);
title.anchorY = 0;

My config

local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
	content = {
    	width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ),
   		height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ),
		scale = "letterbox",
		xAlign = "center",
        yAlign = "center",
   		fps = 30,

  		imageSuffix = {
     		["@2"] = 1.8,
     		["@4"] = 3.6,
  		},
	}
}

roaminggamer · March 16, 2021, 9:47pm

Please download this example and run it:
https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2021/03/screen_bounds_help.zip

The result should look like this:

Let me know how it works and we’ll try to go from there.

roaminggamer · March 16, 2021, 9:50pm

I’m using the Solard2D simulator version 2021.3641 on Windows.

I generally use Borderless 640x960, but if you use a different simulated device, and see a problem, let us know so I (and perhaps others) can try that device in the simulator.

FileEX · March 16, 2021, 9:53pm

In solar2D emulator it’s looks great, like your example

roaminggamer · March 16, 2021, 9:53pm

And not on the simulator… does it work on your device?

I’m trying to set a baseline with code we (you, I, and anyone else) can modify without messing with your code.

BTW, its a simulator

I mention this because there are emulators (xCode has emulators) and BlueStacks emulators for Android devices. When you say emulator it might confuse the discussion. In this case I know you meant the Corona/Solar2D simulator, but just an FYI.

roaminggamer · March 16, 2021, 9:59pm

Once I know how this works on your test device I can start suggesting things to check for in your code and experiments to do.