cocos2dx3.2学习之路之锚点

最近电脑出问题了，在整电脑，导致博客不能更新，现在我们来看看cocos2dx里面关于坐标的一个重要概念：锚点。

为什么要提一下锚点，是因为刚开始接触不是很好理解，所以专门找了一下资料提供参考。

这里说明一下转载地址是：http://blog.sina.com.cn/s/blog_ad1675150101ffre.html

锚点概念

由于我们在使用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中默认锚点也是如此），加载结果：

"bubble.png");

CC_BREAK_IF( !pTestSprite );

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

pTestSprite->setPosition(ccp(0.0f,163); text-indent:21pt"> 加载结果如下

图5

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

加载代码：

"bubble.png");

CC_BREAK_IF( !pTestSprite );

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

pTestSprite->setPosition(ccp(0.0f,163); text-indent:21pt"> 加载结果展示：

图6

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

下面提供一个自己写的例子：

auto red = LayerColor::create(Color4B(255,128),400,400);
red->ignoreAnchorPointForPosition(false);
red->setAnchorPoint(Point(0.5,0.5));
red->setPosition(Point(400,400));

auto green = LayerColor::create(Color4B(100,255,200,200);
green->ignoreAnchorPointForPosition(false);
green->setAnchorPoint(Point(0.5,0.5));

red->addChild(green);

auto sprite = Sprite::create("CloseNormal.png");
sprite->setPosition(200,200);
layer->addChild(green,0);

我们改变layer->addChild(green,0);为

layer->addChild(red,0);

看一下效果

相信大家看了我这两个图一定会明白锚点了，还不明白的话尽管邮件骚扰，邮箱[e-mail]