Question

I want to place an image in another DisplayObject ( Vector Object ) when the reference object can vary in size and position.

local memoRect = display.newRect(135,100,440,540)
local memoTitle = display.newImage("images/memobg.png", 135, 100)

I want to place memoTitle inside the bounds of memoRect in a relative way. But the following code doesn’t work.

local memoRect = display.newRect(135,100,440,540)
local memoTitle = display.newImage("images/memobg.png", memoRect.x + 10, memoRect.y + 20)

I would expect the above code to place memoTitle at the upper left of memoRect instead this code places memoTitle origin at the X center of memoRect and the Y top/0.

Is this the expected behavior?
Is this a bug?

How do I place DisplayObjects relative to one another?

Answer 1

The correct answer that I derived after a couple hours of trying different things is basically the referencePoint default is absurdly set to display.CenterReferencePoint instead of display.TopLeftReferencePoint

Once I did the following everything behaved as I expected.

local memoRect = display.newRect(0,0,440,540)
local memoTitle = display.newImage("images/memobg.png", 0, 0)
memoRect:setReferencePoint(display.TopLeftReferencePoint)
memoTitle:setReferencePoint(display.TopLeftReferencePoint)
memoRect.x = 135; memoRect.y = 100
memoTitle.x = memoRect.x + 10; memoTitle.y = memoRect.y + 20

everything is now working relative to each other ( actually the DisplayGroup that they are in ). This way I can move one thing and the other things will position themselves relative to that object.

I don’t know the absurd logic behind making the default display.CenterReferencePoint but it isn’t logical at all my any reasoning I can imagine.