DisplayObject location top right of screen

[duskandawn]

Hello,
I have been struggling to understand the docs around content scaling. And I am still not sure which api to use and when ?
Here is my simple setup, I am trying to show a Score textview at top right of my screen.
My current dimensions look like

local screenW, screenH, halfW = display.actualContentWidth, display.actualContentHeight
print("Screen width " .. screenW)
-- Screen width 988.40240478516
print("Screen height " .. screenH)
-- Screen height 480
print("Screen width actual" .. display.contentWidth)
-- Screen width actual 320
print("Screen height actual" .. display.contentHeight)
-- Screen height actual 480

And my config.lua looks like this

application = {
	content = {
		width = 320,
		height = 480,
		scale = "letterbox",
		xAlign = "center",  
		yAlign = "center",
		fps = 60,
	}

}

Now my understanding reading the doc is : With simple scaling,

https://docs.coronalabs.com/guide/system/adaptiveScale/index.html
The fixed virtual content width and height, represented by display.contentWidth and display.contentHeight, make it easier to code an app because it provides a static content size to design around

So i thought for me position my score to top right I should just do this

local options = {
		parent = backGroup,
		text = "score: 0",     
		x = display.contentWidth - 10, -- 10 pixels left from end of contentWidth
		y = display.screenOriginY + 5,
	}
scoreText = display.newText(options)

But this setup is more in center of screen.

Setting x = 600 position is correctly on Pixel3a simulator but this is not device agnostic and and am sure this break for other resolutions. What am I missing here ?

1. How do I set it to flush to top right of screen ?
2. Also if someone could please explain difference between actualContentWidth and contentWidth in respect to my current setup. And which one should I use and when ?

[redbol]

Try this:

local _H , _W = display.contentHeight, display.contentWidth;
local options = {
	parent = backGroup,
	text = "score: 0",     
	x = _W
	y = 0
}
scoreText = display.newText(options)
scoreText.anchorX = 1
scoreText.anchorY=0

if scoreText.text will be “score: 10000…” call

scoreText.anchorX = 1
scoreText.anchorY=0

again. It wil fix position of scoreText

good to know: https://docs.coronalabs.com/guide/graphics/transform-anchor.html

[duskandawn]

Hmm @redbol
I did try this, and it looks like this …

Still no luck…

[luantiang]

@duskandawn,

There was a blog article on “content scaling” dated August 2018 which I find it useful. Have you taken a look?

If you haven’t, you may want to visit it. Here is the link,
https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/

Further, on display.newText(), there is an important parameter “align” which could help to position the text. Here is the URL,
https://docs.coronalabs.com/api/library/display/newText.html#align-optional

[duskandawn]

Thanks @luantiang I will go over the article… still new to solar2d. I do have align=right for this. I can only think since I am using Corona cards on my device simulator vs Corona sdk on Corona simulator ?

[luantiang]

@duskandawn,

Here is a screenshot I just did to put my “dimensions” text into the tight upper right-hand corner of the screen.

Here is the code snippets to position the “dimensions” I have used in my simple “hello world” app on simulator on Windows.

local width = display.contentWidth
local height = display.contentHeight
local dimensions = display.newText( {
    text = width .. " | " .. height,
    fontSize = 50,
    align = "right"
} )
dimensions.anchorX = 1
dimensions.x = width
dimensions.y = dimensions.height * 0.5

[duskandawn]

Thanks for all your help @luantiang…
I just tried with this using corona cards:

local testRect = display.newRect(0,0,50,50)
testRect:setFillColor(150,0,0);

And I see this…

Also using corona sdk with corona simulator… for iPHone X i see this

And Iphone 4 looks right

Why is it still not at top left or top right ??
I am on version 2020.3602

[luantiang]

On iPhoneX and other newer devices, the screen origin x and y may not be “0”. In fact, the top left corner may be negative values. There is a concept called “safe area”. Please see these URLs for a better understanding.
https://docs.coronalabs.com/api/library/display/safeActualContentWidth.html
https://docs.coronalabs.com/api/library/display/safeScreenOriginX.html
https://docs.coronalabs.com/api/library/display/getSafeAreaInsets.html

[XeduR]

Like @luantiang already explained, you should read the tutorial on understanding content scaling.

If you have a taller or a wider device than you’ve defined in your build.settings, then they will extend beyond the defined content area, which will lead to the origin x/y values often being negative.

Also, Solar2D’s :setFillColor() uses values between 0 and 1, 0 being black and 1 being white. If you wish to get red according to RGB(140,0,0) then you need to divide that 140 by 255.

[duskandawn]

Thank you so much @luantiang @XeduR, went over the article multiple times now, and its much more clear to me on how on how content scaling works. I will work through the changes on my larger device screens following it…

I just have one last question from the article

Around background filing where is says -

the most extreme screen was the 16:9 screens and the iPads (in the other direction). This made it a very easy formula for filling the background. Based on a 320×480 content area, you would want your backgrounds to be 360×570 for portrait or 570×360 for landscape. Center it on the screen and you would have no black “ letterbox ” bars to contend with. The S8 and S8 are a 1:2 aspect ratio which means your backgrounds need to be 640×360 to fully fill the screen.

How does the article comes up with the number 360, i understand 570 is (16/9*320).
Any ideas ?

[XeduR]

That 360 was the width you needed to accommodate the wider iPad screens back in who knows when. You get that from dividing the height of an old iPhone device’s resolution with iPad’s screen ratio, i.e. 480/(1024/768) = 360.

As a general piece of advice, you should forget all fixed values like that. You need to design your apps so that they work on all screens, regardless of their aspect ratios.