Understanding anchorPoint in cocos2d

On July 26, 2010, in cocos2d, by admin

There’s something in cocos2d which is super easy to understand, but that most people seem to have problems with it at first : Anchor Points. Every class derived from CCNode (Ultimate cocos2d class) will have a anchorPoint property.

When determining where to draw the object (sprite, layer, whatever), cocos2d will combine both properties position and anchorPoint. Also, when rotating an object, cocos2d will rotate it around its anchorPoint, as if a pin were placed on that very spot.

Positioning

As a first example, this sprite has an anchorPoint of ccp(0,0) and a position of ccp(0,0). This rectangle sprite will be placed at the bottom left corner of its parent, the layer.

CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.position=ccp(0,0);
sprite.anchorPoint=ccp(0,0);
[self addChild:sprite];






In this second example, we will assign a anchorPoint of ccp(-1,-1) to better understand the relative value of the anchor point.

CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.position=ccp(0,0);
sprite.anchorPoint=ccp(-1,-1);
[self addChild:sprite];






As you can see in the image, the anchor point is not a pixel value. The value of X and Y are relative to the size of the node. For example, in a 30×30 pixel square, something like the image above, a anchorPoint of ccp(-1,-1) will mean “Place the anchor 1 * myWidth to the left and 1 * myHeight under the sprite

As a final example, to better understand the combination of position and anchorPoint, I’ll show you different lines of code that give exactly the same result as the first image. That piece of code will combine both position and anchorPoint, and show you how to use the contentSize property.

CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.anchorPoint=ccp(1,1);
sprite.position=ccp(sprite.contentSize.width , sprite.contentSize.height);
[self addChild:sprite];

Using this snippet, we place the anchorPoint at ccp(1,1), which places it 1 * width to the right and 1 * height over. If we kept position at ccp(0,0), the sprite would be outside the screen, to the bottom left of it.

By placing the sprite at a position equal to ccp(1 * width, 1* height), it returns to the origin, at the bottom left corner.




Rotation

When rotating, we need to be careful with anchorPoint, as it can give us some very weird results, more so when using irregular anchor points such as ccp(0,0). By default, the anchorPoint is set to ccp(0.5f,0.5f), which is the middle of the sprite on both X and Y axes (remember that anchorPoint is a relative value to the size of the sprite).

Using ccp(0.5f,0.5f) as an anchorPoint will give the simplest rotation possible, which doesn’t change the actual position of the sprite. It’ll rotate just as you would normally think.

In the following example, the anchorPoint is set to ccp(1,1), meaning the sprite will rotate around its top right corner.





Remember that since anchorPoint is relative, you can assign it to ccp(2,2) and the sprite will rotate around that point. This is the case in the following example.




Simpler than it looks

I hope this tutorial was clear and helped you better understand how to use anchor points in cocos2d, and combine them with the position to place the sprites where you like, how you like. Also, by using different anchor points, you learned that it is possible to create different rotating patterns, such as rotating around external points.

Tagged with:  

14 Responses to “Understanding anchorPoint in cocos2d”

  1. mysticBoy says:

    Hey, this article really helped me out, thanx for this cool stuff. Though it seems simple, if you don’t understand it, it causes a lot of time to be killed debugging :)

    Thanx again, keep it up.

  2. Great info, my next project is using cocos2d and really needed to grasp anchor points. Thank You!

  3. Supreme says:

    Awesomely explained…..!!
    thanks admin..:)
    continue with this kind of good stuff….(Y)

  4. Niclas says:

    Thanks, I just understood that the default anchor point is at the center. sprite.anchorPoint=ccp(0,0); helped me get my background right, in the left bottom corner that is.. :)

  5. mikezang says:

    Hi,
    If my sprite rotates right around anchor point(2, 2), in the same time, I want to it can rotate left around anchor point(0.5, 0.5), what can I do?
    Do I have to use a parent node? is it possible without parent node?

  6. Abhishek says:

    Thanks, now i cleared abt anchor point

  7. David says:

    Thanks for that. Could you tell me how to update to a new anchor point if the sprite is moved?

  8. Martin says:

    This helped me out.
    Thanks

  9. nikhil Gupta says:

    THANKS
    THIS IS VERY HELPFUL ARTICLE……

  10. Jiaren says:

    Thank you for your great tutorial, it helps me to understan the anchor point!

  11. Mahmud Ahsan says:

    Nice tutorial, helpful to understand how anchor points work.

  12. shafi says:

    Yes, it saved my day.
    Thanks buddy!

  13. Sash says:

    Great! This is really useful. The big help was the realisation that it anchor points are relative to the size of the object. I wish I had found this long long ago!

  14. Michael says:

    hey , this article is very useful for me,but here something questions : the second and third picture is not really right I think you shoud change the order of these two pictures .I was wonderiing is this so?

Leave a Reply

Free WordPress Theme

Archives

All entries, chronologically...

Weboy