Tutorial: Anchor Points 15 Oct 2013 Rob Miracle Tutorials, Tips and Demos 011NOTE: This tutorial is outdated and has been replaced by the Transforms and Anchors guide and Extending Anchor Points tutorial. 011 Graphics 2.0 reference point tutorial Corona Editor + Sublime T... Tutorial: Multi-Pass Shad... 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 gtt says: October 16, 2013 at 04:29 Thanks Rob! don’t know if you saw but I requested such blog post by you 🙂 In any case many thanks! Thomas Vanden Abeele says: October 16, 2013 at 04:31 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: October 16, 2013 at 14:42 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: March 10, 2014 at 03:40 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. johannes_lalala says: January 22, 2015 at 08:32 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. Thomas Vanden Abeele says: October 16, 2013 at 04:37 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: image.calcAnchor(-42,0) 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: October 16, 2013 at 06:46 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 ) ) end Sean says: February 7, 2014 at 20:49 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) end David says: October 16, 2013 at 09:39 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… Thanks, David Rob Miracle says: October 16, 2013 at 14:44 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: October 16, 2013 at 15:07 As with reference points in the 1.0 engine, anchor points are not honored by the physics system. Alex Beylin says: October 18, 2013 at 06:29 Is there any estimate when this is going to be fixed? Antti says: October 16, 2013 at 12:07 What is the difference between object.anchorX and object.xReference besides units? Are xReference and yReference also deprecated? Walter says: October 16, 2013 at 15:06 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: October 17, 2013 at 03:39 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: October 17, 2013 at 16:06 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. Krishna Raj Salim says: November 9, 2013 at 21:41 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: November 10, 2013 at 09:03 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. JJ says: November 14, 2013 at 15:44 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 myImage:addEventListener(“touch”,myImageClicked) 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. Thanks Davut Engin says: November 19, 2013 at 13:11 Hello, 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 🙂 simran says: May 19, 2014 at 00:50 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: May 19, 2014 at 10:12 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: http://coronalabs.com/resources/tutorials/physics-box2d/ Brent Antheor says: November 15, 2014 at 10:05 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: November 15, 2014 at 17:22 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 Rob Miracle says: November 15, 2014 at 17:22 Well there could be some very old tutorials that are still 1.0, but….