Relative coordinates for different scales

[olesolo]

Okay I’m totally n00b
And I’m using Ultimate config with presets for several different devices (iPhone, iPhone 5, iPad, iPad Retina, Android).

In my case background is a still image placed in a center of the screen

background.x = display.contentCenterX;  
background.y = display.contentCenterY;  

I want to place several objects on a background in specific coordinates. But objects appear in different places every time when change a hardware(scale).

As I understand .x is calculated in a reference to device screen. But how can I use .x relative to my background image?

For now I’m using a primitive code

newX = background.x - background.contentWidth/2 + target.contentWidth/2 [import]uid: 150806 topic_id: 35471 reply_id: 335471[/import]

[bjsorrentino]

Hi @olesolo,
Are you trying to position an object relative to an edge of the screen in all configurations? For example, a menu bar that hugs the bottom of the screen in all instances? Or, does your background extend off the screen (on some devices) and you want to have some other objects “absolute positioned” on that background, such that they might also reside partially off-screen on some devices? Please clarify what you’re goal is, and I can help you out.

Thanks,
Brent Sorrentino
[import]uid: 200026 topic_id: 35471 reply_id: 140965[/import]

[olesolo]

Hi Brent,
Yes, my background extend on some devices and I want to show some objects on it, so they appear on the same place on different devices. And yes, on some devices this objects could rside partly off the screen too. [import]uid: 150806 topic_id: 35471 reply_id: 140990[/import]

[bjsorrentino]

Hi @olesolo,
My preferred method to make an object adhere to a certain side of the screen (and this is just one way, not the only way) is to use a pair of offset variables. I declare these near the top of any module I need them in, so I have access to them in any function later on. It looks like this:

local ox, oy = math.abs(display.screenOriginX), math.abs(display.screenOriginY)

Then, to position something on the top edge (or relative to the top edge), I subtract “oy” from its y value. Bottom edge, add “oy” to its y position. Left edge, subtract “ox” from its x, and right edge, add “ox” to its x value.

These values should be dynamically calculated no matter what device you’re using.

I -think- this is what you’re seeking, but let me know if I misunderstood.

Brent [import]uid: 200026 topic_id: 35471 reply_id: 141003[/import]

[olesolo]

I think you misunderstood me but this is my mistake.
Please take a look at this pic.
http://d.pr/i/kAJv

For now when I set .x coordinate it’s calculated as “b” from the edge of the screen no matter which device is it. The object (green circle) is “jumping” on each device.
What I want it’s to use .x depending on background (red rect) Top Left Corner. It’s marked as “a” on image.

[import]uid: 150806 topic_id: 35471 reply_id: 141016[/import]

[bjsorrentino]

OK, so you need the object to be in the exact same position relative to the -background image-, not the screen edge?

One option is to use the “contentBounds” property. You can read any of the 4 outside boundaries of an object (like your background) and then align another object to that point (or an offset of it). As in:

local leftEdge = myBackground.contentBounds.xMin  
--display new object "newObject" on this line...  
newObject.x = leftEdge  

http://docs.coronalabs.com/api/type/DisplayObject/contentBounds.html

Can you test that and let me know the results?

Thanks,
Brent [import]uid: 200026 topic_id: 35471 reply_id: 141052[/import]

[olesolo]

Thanks Brent!
It’s working Is it any way to set default x0 and y0 as a TopLeftCorner
For now I use

local leftEdgeX = background.contentBounds.xMin local leftEdgeY = background.contentBounds.yMin obj:setReferencePoint( display.TopLeftReferencePoint ) obj.x = leftEdgeX + 100 obj.y = leftEdgeY + 50 [import]uid: 150806 topic_id: 35471 reply_id: 141152[/import]

[bjsorrentino]

Hi @olesolo,
This code appears to be correct. Is it working, or is there something wrong with the behavior? [import]uid: 200026 topic_id: 35471 reply_id: 141477[/import]

[olesolo]

Hi Brent,
Code is working perfect! Thanks! [import]uid: 150806 topic_id: 35471 reply_id: 141482[/import]

[bjsorrentino]

Hi @olesolo,
Are you trying to position an object relative to an edge of the screen in all configurations? For example, a menu bar that hugs the bottom of the screen in all instances? Or, does your background extend off the screen (on some devices) and you want to have some other objects “absolute positioned” on that background, such that they might also reside partially off-screen on some devices? Please clarify what you’re goal is, and I can help you out.

Thanks,
Brent Sorrentino
[import]uid: 200026 topic_id: 35471 reply_id: 140965[/import]

[olesolo]

Hi Brent,
Yes, my background extend on some devices and I want to show some objects on it, so they appear on the same place on different devices. And yes, on some devices this objects could rside partly off the screen too. [import]uid: 150806 topic_id: 35471 reply_id: 140990[/import]

[bjsorrentino]

Hi @olesolo,
My preferred method to make an object adhere to a certain side of the screen (and this is just one way, not the only way) is to use a pair of offset variables. I declare these near the top of any module I need them in, so I have access to them in any function later on. It looks like this:

local ox, oy = math.abs(display.screenOriginX), math.abs(display.screenOriginY)

Then, to position something on the top edge (or relative to the top edge), I subtract “oy” from its y value. Bottom edge, add “oy” to its y position. Left edge, subtract “ox” from its x, and right edge, add “ox” to its x value.

These values should be dynamically calculated no matter what device you’re using.

I -think- this is what you’re seeking, but let me know if I misunderstood.

Brent [import]uid: 200026 topic_id: 35471 reply_id: 141003[/import]

[olesolo]

I think you misunderstood me but this is my mistake.
Please take a look at this pic.
http://d.pr/i/kAJv

For now when I set .x coordinate it’s calculated as “b” from the edge of the screen no matter which device is it. The object (green circle) is “jumping” on each device.
What I want it’s to use .x depending on background (red rect) Top Left Corner. It’s marked as “a” on image.

[import]uid: 150806 topic_id: 35471 reply_id: 141016[/import]

[bjsorrentino]

OK, so you need the object to be in the exact same position relative to the -background image-, not the screen edge?

One option is to use the “contentBounds” property. You can read any of the 4 outside boundaries of an object (like your background) and then align another object to that point (or an offset of it). As in:

local leftEdge = myBackground.contentBounds.xMin  
--display new object "newObject" on this line...  
newObject.x = leftEdge  

http://docs.coronalabs.com/api/type/DisplayObject/contentBounds.html

Can you test that and let me know the results?

Thanks,
Brent [import]uid: 200026 topic_id: 35471 reply_id: 141052[/import]

[olesolo]

Thanks Brent!
It’s working Is it any way to set default x0 and y0 as a TopLeftCorner
For now I use

local leftEdgeX = background.contentBounds.xMin local leftEdgeY = background.contentBounds.yMin obj:setReferencePoint( display.TopLeftReferencePoint ) obj.x = leftEdgeX + 100 obj.y = leftEdgeY + 50 [import]uid: 150806 topic_id: 35471 reply_id: 141152[/import]

[bjsorrentino]

Hi @olesolo,
This code appears to be correct. Is it working, or is there something wrong with the behavior? [import]uid: 200026 topic_id: 35471 reply_id: 141477[/import]

[olesolo]

Hi Brent,
Code is working perfect! Thanks! [import]uid: 150806 topic_id: 35471 reply_id: 141482[/import]