Not off to a good start...

Solar2D General Questions/Discussion
#1

So I am brand new to Corona. Just installed today (see system specs in attached DxDiag.txt).

Running the following code:

local options = {    text = "Hello World!",    x = 0,    y = 0,    font = native.systemFont,    fontSize = 16,

   align = “left”
}; local textBox = display.newText(options);

only displays “World!”, like like X and Y coordinates are off the display as shown below:

[sharedmedia=core:attachments:8178]

Any ideas why this would be happening and/or how I can fix it?

Should (0, 0) not be the top left of the display? I even tried building for Windows with the same results.

#2

This is actually working as expected. All Corona display objects, .x and .y represent the center of the object by default. You would need to change the objects anchor point (.anchorX, .anchorY) to that it represents the Top, Left edge of the box:

local options = { text = "Hello World!", x = 0, y = 0, font = native.systemFont, fontSize = 16, align = "left" }; local textBox = display.newText(options); textBox.anchorX = 0 -- range 0 - 1, 0.5 is the default and is the center of the box textBox.anchorY = 0

The default anchor points are 0.5 representing the center. 0 represents the top or left edge, 1 represents the right or bottom edge.

Rob

#3

This is very well described in the online documentation, which is a great place to start on your first day.

One of the first things it mentions is the coordinate system.

#4

I assumed that rather than asking about anchor points, they were asking why the object was not in the very top left corner of the screen but slightly offset. 

The answer to that question is “content scaling”: https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/.

Your config.lua file will be setting a default size for the app, for instance 640*960. On devices which do not match that aspect ratio, the content is scaled until it reaches the width or height of the screen. The 0, 0 position of the content respects that scaling, and so there is some negative space outside it. If you want to get the true edges of the screen you can use:

display.screenOriginX --left edge display.screenOriginX + display.actualContentWidth --right edge display.screenOriginY --top edge display.screenOrigin + display.actualContentHeight --bottom edge

I usually cache these to global variables and use them when setting the positions of all my display objects:

minX = display.screenOriginX maxX = display.screenOriginX + display.actualContentWidth minY = display.screenOriginY maxY = display.screenOrigin + display.actualContentHeight screenWidth = maxX - minX screenHeight = maxY - minY --place an object 1/4 of the way across the screen myThing.x = minX + (screenWidth \* 0.25) --and 1/3 from the bottom of the screen myThing.y = maxY - (screenHeight \* 0.333)
#5

Thanks for the information. I did go back and reference the API documentation. It was just unexpected that the anchor would center on the textbox by default. Thanks for the info on content scaling too, that was helpful as well.

#6

Back in our old Graphics 1.0 days, some objects were referenced by their top, left corner. Others were referenced by their center. This created a lot of inconsistency in our APIs. In the instance of a circle, you would naturally want to X and Y to reference its center. In some cases, it feels right to reference rectangle objects by the top, left corner and at other times it makes more natural sense to reference it by its center. You can change the default anchor points to be something different than center if it makes sense for your app.

But consider this scenario. You want to construct a button which is a display.newText() drawn on top of a display.newRect():

If you use the top, left corners of the display.newRect() and the top, left corners of the display.newText() and you want to resize the button, you have to do a lot of calculations to get the text centered in the rectangle as opposed to:

local buttonBackground = display.newRect( 200, 100, 256, 128 ) buttonBackground:setFillColor( 0.25, 0.5, 1.0 )  local buttonText = display.newText( "Tap Me", buttonBackground.x, buttonBackground.y, "Exo 2 Black", 48 )

With that code, you can change the size of the button without having to think about positioning the text. You can change the X, Y of the background and the text will center itself (* Note if you move the background after you create the object, you would need to move the text to buttonText.x = buttonBackground.x, etc. to keep them together.

So there is a considerable benefit to centering objects. 

Rob

#7

This is actually working as expected. All Corona display objects, .x and .y represent the center of the object by default. You would need to change the objects anchor point (.anchorX, .anchorY) to that it represents the Top, Left edge of the box:

local options = { text = "Hello World!", x = 0, y = 0, font = native.systemFont, fontSize = 16, align = "left" }; local textBox = display.newText(options); textBox.anchorX = 0 -- range 0 - 1, 0.5 is the default and is the center of the box textBox.anchorY = 0

The default anchor points are 0.5 representing the center. 0 represents the top or left edge, 1 represents the right or bottom edge.

Rob

#8

This is very well described in the online documentation, which is a great place to start on your first day.

One of the first things it mentions is the coordinate system.

#9

I assumed that rather than asking about anchor points, they were asking why the object was not in the very top left corner of the screen but slightly offset. 

The answer to that question is “content scaling”: https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/.

Your config.lua file will be setting a default size for the app, for instance 640*960. On devices which do not match that aspect ratio, the content is scaled until it reaches the width or height of the screen. The 0, 0 position of the content respects that scaling, and so there is some negative space outside it. If you want to get the true edges of the screen you can use:

display.screenOriginX --left edge display.screenOriginX + display.actualContentWidth --right edge display.screenOriginY --top edge display.screenOrigin + display.actualContentHeight --bottom edge

I usually cache these to global variables and use them when setting the positions of all my display objects:

minX = display.screenOriginX maxX = display.screenOriginX + display.actualContentWidth minY = display.screenOriginY maxY = display.screenOrigin + display.actualContentHeight screenWidth = maxX - minX screenHeight = maxY - minY --place an object 1/4 of the way across the screen myThing.x = minX + (screenWidth \* 0.25) --and 1/3 from the bottom of the screen myThing.y = maxY - (screenHeight \* 0.333)
#10

Thanks for the information. I did go back and reference the API documentation. It was just unexpected that the anchor would center on the textbox by default. Thanks for the info on content scaling too, that was helpful as well.

#11

Back in our old Graphics 1.0 days, some objects were referenced by their top, left corner. Others were referenced by their center. This created a lot of inconsistency in our APIs. In the instance of a circle, you would naturally want to X and Y to reference its center. In some cases, it feels right to reference rectangle objects by the top, left corner and at other times it makes more natural sense to reference it by its center. You can change the default anchor points to be something different than center if it makes sense for your app.

But consider this scenario. You want to construct a button which is a display.newText() drawn on top of a display.newRect():

If you use the top, left corners of the display.newRect() and the top, left corners of the display.newText() and you want to resize the button, you have to do a lot of calculations to get the text centered in the rectangle as opposed to:

local buttonBackground = display.newRect( 200, 100, 256, 128 ) buttonBackground:setFillColor( 0.25, 0.5, 1.0 )  local buttonText = display.newText( "Tap Me", buttonBackground.x, buttonBackground.y, "Exo 2 Black", 48 )

With that code, you can change the size of the button without having to think about positioning the text. You can change the X, Y of the background and the text will center itself (* Note if you move the background after you create the object, you would need to move the text to buttonText.x = buttonBackground.x, etc. to keep them together.

So there is a considerable benefit to centering objects. 

Rob