cocos2dx锚点简述

由于我们在使用Cocos2dx进行开发时，一般都是在场景中加载精灵来实现的，而精灵上挂载的往往都不是一个点而是一张图片资源，那么我们在场景中设置这个精灵的位置时，对这张资源图片来说是应该把这张图片资源中的哪个点与我们设置的点对齐呢？这里就引出了锚点这个概念，我们通过设置锚点来确定资源图片上哪个点与我们设置位置点对齐。简而言之，锚点确定精灵自己在父节点的加载位置。

 锚点就是你在CCNode中，使用贴图的基准点。默认锚点为(0.5, 0.5)。精灵在进行运动的过程中，都需要一个锚点，比如在旋转的过程中，设置的锚点不一样，旋转效果是不一样的。比如使用默认锚点，精灵是以中点为轴心旋转；使用(0, 0)作为锚点，精灵是以左下角为轴心旋转；使用(1, 1)作为锚点，精灵是以右上角为轴心旋转。

在Cocos2dx中，我们可以使用setAnchorPoint这个接口来设置锚点，参数是一个cocos2d：：CCPoint类型，这个点是（0.0f,0.0f）~（1.0f，1.0f）之间的一个值。

 

锚点Demo演示

我们在下面这个场景中来做测试，首先如下图所示，我们在这个场景中添加一个精灵A作为背景精灵：

加载代码：

                   // 添加背景资源

                   cocos2d::CCSprite* pBg = cocos2d::CCSprite::create("wndbg.png");

                   CC_BREAK_IF( !pBg );

                   pBg->setPosition(ccp(300.0f,300.0f));

                   this->addChild(pBg);

 

图 3

然后我们在这个精灵上开始增加另外一个精灵B作为测试精灵。

好，我们把测试精灵B的锚点设置为左下角（0.0f，0.0f），然后加载到背景精灵A之上，如下图所示：

加载代码：

                   // 加载测试精灵

                   cocos2d::CCSprite* pTestSprite = cocos2d::CCSprite::create("bubble.png");

                   CC_BREAK_IF( !pTestSprite );

                   pTestSprite->setAnchorPoint(ccp(0.0f,0.0f));

                   pTestSprite->setPosition(ccp(0.0f,0.0f));

                   pBg->addChild(pTestSprite);

 

结果展示：

图 4

 

再看下面，我们把测试精灵B的锚点设置为中间（Cocos2dx中默认锚点也是如此），加载结果：

 

加载代码：

                   // 加载测试精灵

                   cocos2d::CCSprite* pTestSprite = cocos2d::CCSprite::create("bubble.png");

                   CC_BREAK_IF( !pTestSprite );

                   pTestSprite->setAnchorPoint(ccp(0.5f,0.5f));

                   pTestSprite->setPosition(ccp(0.0f,0.0f));

                   pBg->addChild(pTestSprite);

 

加载结果如下

图 5

 

下来呢，再把测试精灵B的锚点设置为右上角（1.0f，1.0f），加载结果如下：

 

加载代码：

 

                   // 加载测试精灵

                   cocos2d::CCSprite* pTestSprite = cocos2d::CCSprite::create("bubble.png");

                   CC_BREAK_IF( !pTestSprite );

                   pTestSprite->setAnchorPoint(ccp(1.0f,1.0f));

                   pTestSprite->setPosition(ccp(0.0f,0.0f));

                   pBg->addChild(pTestSprite);

 

加载结果展示：

图 6

 

NICE，至此，我们可以看到，测试精灵B锚点设置不会影响它在背景精灵上的位置（这个位置只是根据setPosition接口来改变），只会影响测试精灵B本身的资源图片上的哪一点来与这个位置对齐。