Tutorial: Anchor Points

Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1

NOTE: This tutorial is outdated and has been replaced by the Transforms and Anchors guide and Extending Anchor Points tutorial.

Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1
Rob Miracle

Rob Miracle creates mobile apps for his own enjoyment and the amusement of others. He serves the Corona Community in the forums, on the blog, and at local events.

This entry has 25 replies

  1. gtt says:

    Thanks Rob! don’t know if you saw but I requested such blog post by you ๐Ÿ™‚

    In any case many thanks!

  2. Looks like a lot of extra work to me to calculate this for every x and y reference point… So I’ll be sticking to the old referencepoints for as long as I can.

    • Rob Miracle says:

      If you’re using the normal ones (TopLeft, Center, CenterRight, etc.), then Anchor points will actually save you quite a bit of code and time. obj.anchorX = 0; obj.anchorY = 0 is less than obj:setReferencePoint(display.TopLeftReferecenePoint). Secondly, they can be set as defaults, so if you want to left, center align a bunch of display.newText() objects, you can set the default, create the fields, and then set the default back to center when done.

      Now if you are using variable reference points using .xReference and .yReference, it’s probably a bit of a trade off. I found it a bit faster to determine the anchor point (92 pixels in / 412 total width) rather than having to do 412 / 2 – 92 and remembering to make it negative. But either works.

      • Sky Jay says:

        What about adding % option to the list? Like using “anchorX = 50%” to centre objects. It will be extending “V2 anchorX” exactly like “V1 center reference point”, that way we wont have to calculate x and y of objects.

      • no, anchorX and anchorY isn’t at all thought through. Having them in ratios is bad, because corona uses ratios nowhere else. It’s not what you get from corona, so you will always have to calculate them.

        this would be acceptable, but I really don’t get why corona limits the ratios to be >0 and <1.

  3. Following up on my original post, would it be possible to include a function that would allow the “old” style using pixel values, and have it automatically convert? Something like:


    Having these functions automatically do the division by total width and height and setting both anchor points? This might be related to my very personal workflow, but the alternative seems to be lots and lots of painstaking manual measurements in photoshop and mindnumbing divisions.

    • gtt says:

      You can easily write an helper function that accepts and object and x, y coordinates and converts to 0.0-1.0 values:

      local min, max = math.min, math.max
      local function setAnchorCoordinates( object, xReference, yReference )
      object.anchorX, object.anchorY = min( 1, max( 0, xReference / object.width ) ), min( 1, max( 0, yReference / object.height ) )

      • Sean says:

        I found this idea very useful, but it does have a bug. You need to add .5 to the values generated because xReference or yReference assume that 0 is the center of the object (unless they are in a group it seems).

        function setAnchorCoordinates( object, xReference, yReference )
        object.anchorX = math.min( 1, math.max( 0, (xReference / object.width)+.5) )
        print(“x”,object.anchorX,” width “, object.width)
        object.anchorY = math.min( 1, math.max( 0, (yReference / object.height)+.5 ) )
        print(“y”,object.anchorY,” width “, object.height)

  4. David says:

    Hey Rob. Great tutorial – any word on Physics? I’ve been having problems with it in my game – something about hybrid mode not obeying the anchor points…


    • Rob Miracle says:

      I would recommend posting in the Graphics 2.0 with problems that you have and if you have what looks like a reproducible bug, the engineers would like a project with the necessary art and things so they can visually see what you’re seeing (filed with the Report a bug link at the top.)

    • Walter says:

      As with reference points in the 1.0 engine, anchor points are not honored by the physics system.

      • Alex Beylin says:

        Is there any estimate when this is going to be fixed?

  5. Antti says:

    What is the difference between object.anchorX and object.xReference besides units? Are xReference and yReference also deprecated?

    • Walter says:

      Yes, xReference and yReference are not available in the G2.0 engine, even in v1 mode, as we could not simulate them properly in the G2.0 engine

      • Thomas says:

        Hmmm… That explains why my graphics were all screwed up, even in compatibility mode. Just checking: I am still able to finish my (big) current project and build for iOS 7 using the current (non-g2.0) builds, right?

        • Rob Miracle says:

          You can continue to use the latest public build 1202 or any of the recent 1.0 Daily builds. The latest of this reply is 1236.

  6. Krishna Raj Salim says:

    Hi, this is not working with my corona version: 2013.1202 (2013.8.28), even the sample code doe not seem to work. I still get the object rotation with respects to it’s visual centre point .

    • Rob Miracle says:

      Hi Krishna. This is a Graphics 2.0 feature which is only available to Pro and Enterprise subscribers and is only in daily builds numbered greater than 2000.

  7. JJ says:

    Hello there,

    I’ve been testing the new anchor points but I seem to be running into some kind of issue when it’s used with texturepacker sprites.

    Basically when I set the anchorX of my image to 0 (was previously display.CenterLeftReferencePoint), it loses it “hitbox” and doesn’t work with eventListener attached. Essentially it’s just

    myImage.anchorX = 0

    It doesn’t register the touch event unless I click on the very left side of the image.

    I’ve tried this with a regular display.newRect and it works perfectly for the rectangle however it’s not working with display.newSprite with sprites from texturepacker.

    Hope you understand what I meant.


  8. Davut Engin says:

    I used negative yReference in my project for rotating gauge pointer.
    But I cant migrate it to Graphics 2.0.
    Because anchorX and anchorY doesnot support negative value.
    I think it have to support negative values.
    And also it have to support number range more then 0 to 1.

    Thanks ๐Ÿ™‚

  9. simran says:

    Nice tutorial, but I have this huge confusion! The object is rotating at an anchor point os obviously its x, y coordinates are never changing, what If I had to determine collision of an object with this hand which is continuously rotating? I mean how do I get points along the length of its hands with its changing position, anyone, please?

    • Brent says:

      Hi @simran,
      Are you using physics for your project? If so, detecting collisions should be a snap. Here’s a list of guides/videos to get started on that if you’re not familiar with it:



  10. Antheor says:

    Mixing graphics 1.0 and 2.0 in your tutorials/articles/docs, etc. is QUITE confusing.

    You have to find a way to make it a standard for EVERYONE.

    • Rob Miracle says:

      All of Corona SDK’s tutorials, articles and docs should all be Graphics 2.0 base. Where are you seeing that this isn’t the case?


      • Rob Miracle says:

        Well there could be some very old tutorials that are still 1.0, but….