Bug in anchorY and Y?

Audio and Graphics
#1

According to API doucmentation, changing anchorX and anchorY will not affect position of a displayobject.

I added an image with display.newImageRect() and set anchorX = 0 and anchorY = 1. After placing the image with x & y coordinates as I want it I change anchorY = 0.5 to enable me to center other objects with this image.

But to my surprise, the image moves to the position as if I have set anchorY = 0.5 before setting coordinates.

Using Corona Version 2014.2171 (2014.2.8) and new Composer scenes.

local myImage function scene:create( event ) local sceneGroup = self.view myImage = display.newImageRect("images/myimage.png", 235, 180); myImage.anchorX = 0; myImage.anchorY = 0.5; sceneGroup:insert(myImage); myImage.x = 5; myImage.y = display.contentHeight - 50; end function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Called when the scene is still off screen (but is about to come on screen). elseif ( phase == "did" ) then -- Called when the scene is now on screen. -- Insert code here to make the scene come alive. -- Example: start timers, begin animation, play audio, etc. -- Game scene is visible, start game round... myImage.anchorY = 0.5; -- This moves the image when changing anchor position end end

Any ideas?

#2

Hi @claes.lindblom,

The statement in the docs is a bit misleading and I’m going to correct it today. When you adjust the anchor point, the object’s position will move (visually, on the screen), but its origin point in content coordinates will not change. Essentially, the geometry of the object (the way its drawn) will shift according to how the anchor point was changed. Sorry for the confusion on this.

Brent

#3

Hi @Brent,

Ok, then I understand but then anchorX & Y is not really a replacement for setReferencePoint.

How can I get the same behaviour as setReferencePoint without having to use contentBounds and calculate center X & Y?

/Claes

#4

Hi Claes,

It is a replacement for reference points. Are you trying to determine the exact center of an object, no matter what its anchor is? For example, even if the anchor is 0,0, you want to get the center point of that object?

Brent

#5

Hi,

Before graphics 2.0 I could use setReferencePoint as refererence point for aligning multiple objects. Sometimes center but also top or bottom. Now I thought I could do the same with anchors but that was not the case so I’m basically looking for a way to set a reference point on an object that I can use when positioning other objects relative to this object.

Example: Align object A with B with the center point to align middle. Or align center of A with top of B.

Best regards

/Claes

#6

Hi Claes,

Can you show me a specific example of how you used reference points for this? Then I can compare the usage of anchor points to that.

Thanks,

Brent

#7

Hi,

Of course. Here is a simple example from how I have used it in Graphics 1.0 for static positioned images

-- First image placed in bottom right corner local image1 = display.newImageRect("images/myimage.png", 235, 180) sceneGroup:insert(image1) image1:setReferencePoint( display.BottomLeftReferencePoint ) image1.x = 5 image1.y = display.contentHeight - 100 -- Center other images with center of image1 as reference image1:setReferencePoint( display.CenterReferencePoint ) local image2 = display.newImageRect("images/myimage.png", 235, 180) sceneGroup:insert(image2) image2:setReferencePoint( display.CenterReferencePoint ) image2.x = image1.x image2.y = image1.y local image3 = display.newImageRect("images/myimage.png", 235, 180) sceneGroup:insert(image3) image3:setReferencePoint( display.CenterReferencePoint ) image3.x = image1.x image3.y = image1.y

/Claes

#8

Hi Claes,

So if I understand, in 1.0, you could change the reference point afterward, and the object itself would not move (so really, it didn’t matter if you adjusted it afterward). But now, changing the anchor point moves the object itself according to the new anchor point.

What I would suggest is that you align objects using the “contentBounds” API. The following example doesn’t exactly match your code block, but it shows one method how to align objects based on the edges/corners of other objects.

[lua]

–put a RED box in the upper-right corner

local red = display.newRect( 0, 0, 200, 200 )

red:setFillColor(1,0,0)

red.anchorX = 1

red.anchorY = 0

red.x = display.contentWidth

red.y = 0

–put a BLUE box on the screen

local blue = display.newRect( 0, 0, 100, 200 )

blue:setFillColor(0,0,1)

–align the top-right corner of BLUE with the bottom-left corner of RED

blue.anchorX = 1

blue.anchorY = 0

blue.x = red.contentBounds.xMin

blue.y = red.contentBounds.yMax

[/lua]

Hope this helps,

Brent

#9

Hi,

Yes that would work but I still kind of miss the feature with center coordinates. Now I need to calculate myself.

Thanks

/Claes

#10

@Brent,

How would you implement the same code for two circles instead of two squares?  I’m having the same problem aligning two circles; the anchorX and anchorY keep displaying as if they were 0.5.

Thanks,

Jonathan

#11

Hi @sharp100,

Can you post a little code? Circles will have the same anchor points as if imaginary (square) boundaries surrounded them. If you want to align the edges of circles that are different sizes and which don’t share the same horizontal or vertical axis, then you’ll need to calculate the math for that (which should be easy enough to find online; I just don’t recall the formula off hand).

Brent

#12

OK , here is a working sample of anchor points with circles.  I started tracking all of the anchor points with little green circles and it made me realize that it was easier to just keep all the anchors centered (0.5) to avoid confusion.

[lua]

– radii of circles

local redRad = 100

local blueRad = 50

local greenRad = 10

local redBlueRad = redRad + blueRad  – I used this as the hypotenuse of an imaginary circle whose radius was the distance between the centers of the the red and blue circles (green center point circles)

–put a RED circle on the screen

local red = display.newCircle( 0, 0, redRad )

red:setFillColor(1,0,0)

red.anchorX = 0.5              – to keep it simple, I made all anchor points centered (0.5)

red.anchorY = 0.5

red.x = display.contentWidth - redRad

red.y = 0 + redRad

–put a BLUE circle on the screen

local blue = display.newCircle( 0, 0, blueRad )

blue:setFillColor(0,0,1)

blue.anchorX = 0.5

blue.anchorY = 0.5

blue.x = red.x - math.cos( 0.785 ) * redBlueRad  – 45 degrees translated into radians = 0.785

blue.y = red.y + math.sin( 0.785 ) * redBlueRad  – redBlueRad is the imaginary hypotenuse red and blue centers

–put a GREEN circle on the screen as a center point

local green = display.newCircle( 0, 0, greenRad )

green:setFillColor(0,1,0)

green.anchorX = .5

green.anchorY = .5

green.x = red.x

green.y = red.y

–put a GREEN circle on the screen as a center point

local green2 = display.newCircle( 0, 0, greenRad )

green2:setFillColor(0,1,0)

green2.anchorX = .5

green2.anchorY = .5

green2.x = blue.x

green2.y = blue.y

[/lua]

Jonathan

#13

Hi @claes.lindblom,

The statement in the docs is a bit misleading and I’m going to correct it today. When you adjust the anchor point, the object’s position will move (visually, on the screen), but its origin point in content coordinates will not change. Essentially, the geometry of the object (the way its drawn) will shift according to how the anchor point was changed. Sorry for the confusion on this.

Brent

#14

Hi @Brent,

Ok, then I understand but then anchorX & Y is not really a replacement for setReferencePoint.

How can I get the same behaviour as setReferencePoint without having to use contentBounds and calculate center X & Y?

/Claes

#15

Hi Claes,

It is a replacement for reference points. Are you trying to determine the exact center of an object, no matter what its anchor is? For example, even if the anchor is 0,0, you want to get the center point of that object?

Brent

#16

Hi,

Before graphics 2.0 I could use setReferencePoint as refererence point for aligning multiple objects. Sometimes center but also top or bottom. Now I thought I could do the same with anchors but that was not the case so I’m basically looking for a way to set a reference point on an object that I can use when positioning other objects relative to this object.

Example: Align object A with B with the center point to align middle. Or align center of A with top of B.

Best regards

/Claes

#17

Hi Claes,

Can you show me a specific example of how you used reference points for this? Then I can compare the usage of anchor points to that.

Thanks,

Brent

#18

Hi,

Of course. Here is a simple example from how I have used it in Graphics 1.0 for static positioned images

-- First image placed in bottom right corner local image1 = display.newImageRect("images/myimage.png", 235, 180) sceneGroup:insert(image1) image1:setReferencePoint( display.BottomLeftReferencePoint ) image1.x = 5 image1.y = display.contentHeight - 100 -- Center other images with center of image1 as reference image1:setReferencePoint( display.CenterReferencePoint ) local image2 = display.newImageRect("images/myimage.png", 235, 180) sceneGroup:insert(image2) image2:setReferencePoint( display.CenterReferencePoint ) image2.x = image1.x image2.y = image1.y local image3 = display.newImageRect("images/myimage.png", 235, 180) sceneGroup:insert(image3) image3:setReferencePoint( display.CenterReferencePoint ) image3.x = image1.x image3.y = image1.y

/Claes

#19

Hi Claes,

So if I understand, in 1.0, you could change the reference point afterward, and the object itself would not move (so really, it didn’t matter if you adjusted it afterward). But now, changing the anchor point moves the object itself according to the new anchor point.

What I would suggest is that you align objects using the “contentBounds” API. The following example doesn’t exactly match your code block, but it shows one method how to align objects based on the edges/corners of other objects.

[lua]

–put a RED box in the upper-right corner

local red = display.newRect( 0, 0, 200, 200 )

red:setFillColor(1,0,0)

red.anchorX = 1

red.anchorY = 0

red.x = display.contentWidth

red.y = 0

–put a BLUE box on the screen

local blue = display.newRect( 0, 0, 100, 200 )

blue:setFillColor(0,0,1)

–align the top-right corner of BLUE with the bottom-left corner of RED

blue.anchorX = 1

blue.anchorY = 0

blue.x = red.contentBounds.xMin

blue.y = red.contentBounds.yMax

[/lua]

Hope this helps,

Brent

#20

Hi,

Yes that would work but I still kind of miss the feature with center coordinates. Now I need to calculate myself.

Thanks

/Claes