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中默認錨點也是如此），加載結果：

?

加載代碼：

???????????????????//?加載測試精靈

???????????????????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本身的資源圖片上的哪一點來與這個位置對齊。

=====================================

圖層的旋轉失敗的案例

【http://blog.csdn.net/davidsu33/article/details/9849945】

cocos2dx中經常會用到節點的旋轉，一旦涉及到物體的旋轉則會涉及到旋轉所相對的中心點的位置，對于CCNode而言，其提供了設置錨點的接口，用來設置錨點的相對位置。

見CCNode源代碼中CCNode.cpp

[cpp]?view plaincopy

///?anchorPoint?getter??

const?CCPoint&?CCNode::getAnchorPoint()??

{??

????return?m_obAnchorPoint;??

}??

??

void?CCNode::setAnchorPoint(const?CCPoint&?point)??

{??

????if(?!?point.equals(m_obAnchorPoint))??

????{??

????????m_obAnchorPoint?=?point;??

????????m_obAnchorPointInPoints?=?ccp(m_obContentSize.width?*?m_obAnchorPoint.x,?m_obContentSize.height?*?m_obAnchorPoint.y?);??

????????m_bTransformDirty?=?m_bInverseDirty?=?true;??

????}??

}??

其錨點的坐標值是一個相對值0~1，其中m_obAnchorPoint表示的是相對錨點坐標，m_obAnchorPointInPoints表示的是錨點在屏幕中的像素坐標，所以對于CCNode的坐標系轉換會涉及到多種轉換方式。

我們也可以通過設置ignoreAnchorPointForPosition來忽略錨點的作用。

對于圖層而言其ignoreAnchorPointForPosition的默認值為false，CCSprite默認值為true，但是有時候大家會發現，即便咱們設置了圖層的ignoreAnchorPointForPosition為false，但是圖層的旋轉仍然沒有按照預定的結果來進行，原因是因為默認CCLayer的圖層的大小為CCSize(0,0)，所以不管你怎么設置圖層的大小始終為(0,0)，經過錨點比例進行計算之后其錨點的坐標仍然是(0,0)，如下圖所示：

但是設置了CCLayer的大小之后，就會發現，咱們設置的錨點就能起到作用了

[cpp]?view plaincopy

void?LayerIgnoreAnchorPointPos::onEnter()??

{??

????LayerTest::onEnter();??

??????

????bool?ignore?=?this->isIgnoreAnchorPointForPosition();??

????//this->ignoreAnchorPointForPosition(false);??

????//CCSize?layerSize?=?this->getContentSize();??

????setContentSize(CCDirector::sharedDirector()->getWinSize());??

????setAnchorPoint(ccp(0.5,?1));??

????//CCSize?layerSize2?=?this->getContentSize();??

????//CCPoint?pt?=?this->getPosition();??

????//setPosition(ccp(layerSize2.width/2,?layerSize2.height/2));??

??

????CCSize?s?=?CCDirector::sharedDirector()->getWinSize();??

??

????CCLayerColor?*l?=?CCLayerColor::create(ccc4(255,?0,?0,?255),?150,?150);??

??

????l->setAnchorPoint(ccp(0.5f,?0.5f));??

????l->setPosition(ccp(?s.width/2,?s.height/2));??

??

????CCMoveBy?*move?=?CCMoveBy::create(2,?ccp(100,2));??

????CCMoveBy?*?back?=?(CCMoveBy?*)move->reverse();??

????CCSequence?*seq?=?CCSequence::create(move,?back,?NULL);??

????l->runAction(CCRepeatForever::create(seq));??

????this->addChild(l,?0,?kLayerIgnoreAnchorPoint);??

??

????CCSprite?*child?=?CCSprite::create("Images/grossini.png");??

????l->addChild(child);??

????CCSize?lsize?=?l->getContentSize();??

????child->setPosition(ccp(lsize.width/2,?lsize.height/2));??

??

????CCMenuItemFont?*item?=?CCMenuItemFont::create("Toggle?ignore?anchor?point",?this,?menu_selector(LayerIgnoreAnchorPointPos::onToggle));??

??

????CCMenu?*menu?=?CCMenu::create(item,?NULL);??

????this->addChild(menu);??

??

????menu->setPosition(ccp(s.width/2,?s.height/2));??

??

??????

????//this->setAnchorPoint(ccp(0.5,?0.5));??

????CCDirector::sharedDirector()->getActionManager()->addAction(??

????????????????????????????????????????????????????????????????????????????CCRepeatForever::create(??

????????????????????????????????????????????????????????????????????????????CCSequence::create(CCRotateBy::create(2,?360),??

????????????????????????????????????????????????????????????????????????????CCRotateBy::create(2,?-360),??

????????????????????????????????????????????????????????????????????????????0)??

????????????????????????????????????????????????????????????????????????????),??

????????????????????????????????????????????????????????????????????????????this,??

????????????????????????????????????????????????????????????????????????????false);??

}??

總結

以上是生活随笔為你收集整理的Cocos2dx开发之锚点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。