Anchor point Y axis

Hey guys, quick question. When I set the anchor point of an image to be at 0,0 or top left, the x position of the image works correctly but Y does not. If I set a top-left anchored image to the position (0,0), I get the attached result (ignore the dragon). As you can see, the rect is about 50 pixels too low. Here are the four lines to draw it:

rect = display.newRect(0, 0, 100, 100) rect.anchorX = 0 rect.anchorY = 0 rect.x = 0 rect.y = 0

Is this a bug or am I doing something wrong? It is also worth noting that everything works correctly while simulating an iPhone 4.

Hello @saannunziato and welcome to the forums!

0, 0 isn’t necessecarily the left, top of the screen. When you set a width and height in config.lua you’re defining a base content area but it doesn’t always fit the screen’s shape. For instance, if you set your width to 320 and height to 480, you’ve defined a content area that is a rectangle that has an aspect ratio of 1.5:1.  (480/320 = 1.5). This happens to be the size of an iPhone 4 screen. If you change your skin to an iPhone 5 for instance, it has an aspect ratio of 16:9 (1.77777778:1) meaning it’s taller. The actual screen size, when scaled to a 320 point wide content area for an iPhone 5 is 320 x 568.  The iPhone 6/7 and 6/7 plus are even a touch taller and would be 320x570.

Now if you are on one of those devices or skins, the 320x480 content area gets centered on the screen, and for easy of math I’m going to refer to the iPhone5 here on out. 568-480 == 88. So the iPhone 5 has 88 more points of usable screen than the iPhone 4 does. You have 44 points above Y=0 and 44 points below Y=480.

So how on Earth are you supposed to work with this, you’re probably asking?

It’s actually quite easy, but it takes a bit of understanding about some of Corona’s screen measurement APIs.

display.contentWidth and display.contentHeight will always return you the value you put in config.lua. Nothing more, nothing less. They don’t care at all what device you’re on.

To get to the bottom of the screen, you would use the APIs: display.actualContentWidth, display.actualContentHeight. These should always get you the right and bottom of the screen.

To get the actual left, top, you have to use the APIs: display.screenOriginX and display.screenOriginY. In your example, 0 will be the left edge, but -44 is the top of the screen when using an iPhone 5 and 0 on an iPhone 4. When you get to the iPad, which when scaled to your content area, 0 will be the top but left will be -20.  Let’s put this in a practical use:

rect = display.newRect(0, 0, 100, 100) rect.anchorX = 0 rect.anchorY = 0 rect.x = 0 + display.screenOriginY rect.y = 0 + display.screenOriginY

That will get you to the left, top of the screen like you’re trying to do.

There is a way to configure your config.lua to make 0, 0 always be the left, top and display.contentWidth, display.contentHeight to always be the right, bottom, but it causes your center values to change depending on the screen and will lead to more frustration than it solves as you always have to position things left, right of center and above/below center when things have to be a fixed distance away from each other. That said, our recommended strategy is to use the code above. 

Another option you can do, if you don’t plan on using display.contentCenterX and display.contentCenterY would be to change the xAlign and yAlign values in your config.lua to “left”, “top”. That will also make the left, top 0,0 and display.actualContentWidth, display.actualContentHeight the right, bottom.  But you would have to calculate your own center points. This is a practical strategy for business like apps where you might have more content that fits the screen and you’re going to have a scrollView the size of the screen so they can scroll down to get more content on short screens.

Something to consider.

Rob

Hello @saannunziato and welcome to the forums!

0, 0 isn’t necessecarily the left, top of the screen. When you set a width and height in config.lua you’re defining a base content area but it doesn’t always fit the screen’s shape. For instance, if you set your width to 320 and height to 480, you’ve defined a content area that is a rectangle that has an aspect ratio of 1.5:1.  (480/320 = 1.5). This happens to be the size of an iPhone 4 screen. If you change your skin to an iPhone 5 for instance, it has an aspect ratio of 16:9 (1.77777778:1) meaning it’s taller. The actual screen size, when scaled to a 320 point wide content area for an iPhone 5 is 320 x 568.  The iPhone 6/7 and 6/7 plus are even a touch taller and would be 320x570.

Now if you are on one of those devices or skins, the 320x480 content area gets centered on the screen, and for easy of math I’m going to refer to the iPhone5 here on out. 568-480 == 88. So the iPhone 5 has 88 more points of usable screen than the iPhone 4 does. You have 44 points above Y=0 and 44 points below Y=480.

So how on Earth are you supposed to work with this, you’re probably asking?

It’s actually quite easy, but it takes a bit of understanding about some of Corona’s screen measurement APIs.

display.contentWidth and display.contentHeight will always return you the value you put in config.lua. Nothing more, nothing less. They don’t care at all what device you’re on.

To get to the bottom of the screen, you would use the APIs: display.actualContentWidth, display.actualContentHeight. These should always get you the right and bottom of the screen.

To get the actual left, top, you have to use the APIs: display.screenOriginX and display.screenOriginY. In your example, 0 will be the left edge, but -44 is the top of the screen when using an iPhone 5 and 0 on an iPhone 4. When you get to the iPad, which when scaled to your content area, 0 will be the top but left will be -20.  Let’s put this in a practical use:

rect = display.newRect(0, 0, 100, 100) rect.anchorX = 0 rect.anchorY = 0 rect.x = 0 + display.screenOriginY rect.y = 0 + display.screenOriginY

That will get you to the left, top of the screen like you’re trying to do.

There is a way to configure your config.lua to make 0, 0 always be the left, top and display.contentWidth, display.contentHeight to always be the right, bottom, but it causes your center values to change depending on the screen and will lead to more frustration than it solves as you always have to position things left, right of center and above/below center when things have to be a fixed distance away from each other. That said, our recommended strategy is to use the code above. 

Another option you can do, if you don’t plan on using display.contentCenterX and display.contentCenterY would be to change the xAlign and yAlign values in your config.lua to “left”, “top”. That will also make the left, top 0,0 and display.actualContentWidth, display.actualContentHeight the right, bottom.  But you would have to calculate your own center points. This is a practical strategy for business like apps where you might have more content that fits the screen and you’re going to have a scrollView the size of the screen so they can scroll down to get more content on short screens.

Something to consider.

Rob