Cocos2dx學習筆記9：cocos2dx錨點(Anchor Point)

錨點(AnchorPoint)是相對坐標，通常用來定義物體內部的點，在cocos2dx中，一般都是以加載精靈來實現游戲元素的表現，而精靈一般都是對應的一張圖片資源。

我們在設置精靈位置的時候，要設置精靈中的錨點來和我們的坐標點相對應，就比如人站在地上，我們要設置人的腳為錨點，假如設置人的頭為錨點，那么人的身子就都會在底下了。

Anchor Point的兩個參數都在0~1之間。一般Node的錨點默認為(0.5， 0.5)，而Layer的錨點則在左下角（0，0）。

在cocos2dx中物體的旋轉等動作都是圍繞錨點進行的。錨點不同，決定著物體的位置不同。描述起來比較抽象，用幾張圖瞬間就可以明白了。

1、設置layer的坐標位置為屏幕的中心vec2（0.5,0.5）

auto layer = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 顏色數據（紅）

layer->setContentSize(CCSizeMake(80, 80));//設置大小

layer->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

layer->setAnchorPoint(Vec2(0.5,0.5));//設置錨點(0.5,0.5)居中

addChild(layer);//添加到場景并設置繪制層的順序

從圖中我們可以看出來，我們設置的代碼是layer的錨點是居中，而運行顯示的則是錨點在左下角（0，0）位置。這是什么情況呢？

原來是因為Layer比較特殊，它默認忽略錨點。所以要調用ignoreAnchorPointForPosition()接口來改變錨點。

因為ignoreAnchorPointForPosition()默認為true參數，忽略錨點。我們要將參數改為false，為不忽略錨點，這樣錨點才會在layer有效果。

這樣錨點就在layer層中心點了，如果用精靈來代替層的話這不需要設置ignoreAnchorPointForPosition()函數，直接設置錨點即可。

2、設置layer的坐標位置為屏幕的左下角vec2（0,0）

auto layer = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 顏色數據（紅）

layer->setContentSize(CCSizeMake(80, 80));//設置大小

layer->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

layer->setAnchorPoint(Vec2(0,0));//設置錨點(0,)左下角

layer->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(layer);//添加到場景并設置繪制層的順序

是不是發現和我們剛才不設置忽略錨點參數為false的時候一樣的啊。

是不是發現和我們剛才不設置忽略錨點參數為false的時候一樣的啊。

3、設置layer的坐標位置為屏幕的右下角vec2（1,0）

auto layer = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 顏色數據（紅）

layer->setContentSize(CCSizeMake(80, 80));//設置大小

layer->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

layer->setAnchorPoint(Vec2(1,0));//設置錨點(1,0)右下角

layer->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(layer);//添加到場景并設置繪制層的順序

4、設置layer的坐標位置為屏幕的左上角vec2（0,1）

auto layer = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 顏色數據（紅）

layer->setContentSize(CCSizeMake(80, 80));//設置大小

layer->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

layer->setAnchorPoint(Vec2(0,1));//設置錨點(0,1)左上角

layer->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(layer);//添加到場景并設置繪制層的順序

5、設置layer的坐標位置為屏幕的右上角vec2（1,1）

auto layer = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 顏色數據（紅）

layer->setContentSize(CCSizeMake(80, 80));//設置大小

layer->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

layer->setAnchorPoint(Vec2(1,1));//設置錨點(0,1)右上角

layer->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(layer);//添加到場景并設置繪制層的順序

相信通過幾張圖我們可以了解錨點的概念了，錨點位置是針對設置錨點的物體而言，所以圖中的錨點都是針對的是紅色的方塊而言。錨點的起始位置為左下角(0,0)到右上角(1,1)，百分比形式設置的。

我們來設置4中顏色的層，其他參數(位置坐標，顏色塊大小)相同的情況下，分別設置四個角為錨點。

auto red = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 顏色數據（紅）

red->setContentSize(CCSizeMake(80, 80));//設置大小

red->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

red->setAnchorPoint(Vec2(0,0));//設置錨點(0,0)左下角

red->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(red);//添加到場景并設置繪制層的順序

auto green = LayerColor::create(Color4B(0, 255,0, 255));//RGBA 顏色數據（綠）

green->setContentSize(CCSizeMake(80, 80));//設置大小

green->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

green->setAnchorPoint(Vec2(0,1));//設置錨點(0,1)左上角

green->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(green, 30);//添加到場景并設置繪制層的順序

auto blue = LayerColor::create(Color4B(0, 0, 255, 255));//RGBA 顏色數據（藍）

blue->setContentSize(CCSizeMake(80, 80));//設置大小

blue->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

blue->setAnchorPoint(Vec2(1,0));//設置錨點(1,0)右下角

blue->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(blue, 20);//添加到場景并設置繪制層的順序

auto white  = LayerColor::create(Color4B(255, 255, 255, 255));//RGBA 顏色數據（白）

white->setContentSize(CCSizeMake(80, 80));//設置大小

white->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height/2));//設置坐標

white ->setAnchorPoint(Vec2(1,1));//設置錨點(1,1)右上角

white ->ignoreAnchorPointForPosition(false);//設置忽略錨點

addChild(white , 20);//添加到場景并設置繪制層的順序

注意：layer層是特殊的，所以錨點默認為忽略狀態，而其他node節點的則正常。

錨點相信已經分析的很清楚了（其實我已經哭暈在廁所了）。

本文由閉眼就天黑整理編輯，轉載請注明：http://www.byjth.com/biji/28.html | 閉眼就天黑專欄_原創技術博客