Cocos2dx开发之锚点实例讲解

写在前面——有不对的地方，烦请大家批评指正，我也会继续努力提高自己。如果转载请注明出处，谢谢大家支持——Forward。

我的微博——秦京一梦

QQ技术交流群——forTheDream（225117179）



锚点概念

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



几何图形说明

上面的文字描述可能不太容易理解，下面作者发扬严谨的科研风格，绘图做以下说明：

假设我们要把一个精灵加载到场景中去，这个精灵上使用的图片资源是一张四边形图片，如下图所示





图 1

OK，当我们使用Cocos2dx下对应的API要给这个精灵设置一个特定的位置时，设置的结果是什么样的呢？这就与我们给定这个精灵的锚点有关，设置不同的锚点，加载结果也会不同。锚点的设置可以根据你的喜好随意设置，但是一般来说常用的锚点有哪些呢？如下图红色圈所表示的——左下角、左上角、右上角、右下角，在Cocos2dx中默认使用的锚点坐标是四边形的几何中心点。





图 2



在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本身的资源图片上的哪一点来与这个位置对齐。





不早了，该休息了，晚安！