origin vs. anchors - difference?

Getting Started Newbie Questions
#1

Hi,

I know this is a newbie question… but I studied the docs and guides on anchors such as 

https://docs.coronalabs.com/guide/graphics/transform-anchor.html

https://docs.coronalabs.com/guide/graphics/container.html

and API docs on display objects… but I’m still not that clear on the difference between anchors and origin :) 

I came across these key phrases:

The origin is the point around which all transforms occur

The anchor of an object controls how geometry is positioned relative to the object’s origin

I can’t yet visualize the difference between the above statements. 

Is origin simply the x,y of the display object?  

Thanks in advance for any insights you can provide!

#2

To keep it simple, just think of anchor points as a means of aligning your objects based on its (x,y) coordinate.  Good examples are:

  • Anchor (0.5,0.5) does center alignment.
  • Anchor (0,0) does top-left alignment.
  • Anchor (0,1) does bottom-left alignment.
  • Anchor (1,0) does top-right alignment.
  • Anchor (1,1) does bottom-right alignment.

So, yes, the anchor point is effectively the object’s origin given the above examples.  The key detail here is that anchor points are set to normalized values that range from 0 to 1 and this normalized value is relative to the object’s width and height.  Versus the (x,y) coordinate of the object is of course the position of the object within the parent object’s coordinate space.  I think the animated GIF we show in our Anchor guide that you linked to best demonstrates this.

#3

Thanks so much for your detailed description, that is really helpful!  

One last clarification I have regarding ‘origin’:  Would ‘origin’ basically be the object.x and object.y in the example below?

so if we have: 

local rect = display.newRect( 0, 0, 100, 100 )  – x,y,w,h
rect.x = 200

rect.y = 200

then:

  1. the ‘origin’ for rect would be 200,200 and… 

  2. it’s default anchor would be (.5,.5) so the ‘anchor’ would be at 200,200 also… and the rectangle would be centered at 200,200, (basically taking up the space 150 to 250 in the x axis and 150 to 250 in the y axis since the width and height are 100 in this case?)

Thanks again!

#4

Yep.  Exactly right!  :)

#5

Thank you for your help!!

#6

To keep it simple, just think of anchor points as a means of aligning your objects based on its (x,y) coordinate.  Good examples are:

  • Anchor (0.5,0.5) does center alignment.
  • Anchor (0,0) does top-left alignment.
  • Anchor (0,1) does bottom-left alignment.
  • Anchor (1,0) does top-right alignment.
  • Anchor (1,1) does bottom-right alignment.

So, yes, the anchor point is effectively the object’s origin given the above examples.  The key detail here is that anchor points are set to normalized values that range from 0 to 1 and this normalized value is relative to the object’s width and height.  Versus the (x,y) coordinate of the object is of course the position of the object within the parent object’s coordinate space.  I think the animated GIF we show in our Anchor guide that you linked to best demonstrates this.

#7

Thanks so much for your detailed description, that is really helpful!  

One last clarification I have regarding ‘origin’:  Would ‘origin’ basically be the object.x and object.y in the example below?

so if we have: 

local rect = display.newRect( 0, 0, 100, 100 )  – x,y,w,h
rect.x = 200

rect.y = 200

then:

  1. the ‘origin’ for rect would be 200,200 and… 

  2. it’s default anchor would be (.5,.5) so the ‘anchor’ would be at 200,200 also… and the rectangle would be centered at 200,200, (basically taking up the space 150 to 250 in the x axis and 150 to 250 in the y axis since the width and height are 100 in this case?)

Thanks again!

#8

Yep.  Exactly right!  :)

#9

Thank you for your help!!