錨點概念
由於我們在使用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本身的資源圖片上的哪一點來與這個位置對齊。