cocos2dx坐標(biāo)系與笛卡爾坐標(biāo)系簡而言之，cocos2dx的2d中的坐標(biāo)系與我們初中所學(xué)的笛卡爾坐標(biāo)系一樣。也就是向右為X正軸，向上為Y正軸。
在屏幕中，其原點位于屏幕的左下方。
屏幕坐標(biāo)系屏幕坐標(biāo)系的Y正軸是向下，X正軸不變。原點位于左上方。
World Coordinate與Node Local
World Coordinate == > 世界坐標(biāo)系、絕對坐標(biāo)系
Node Local == > 本地坐標(biāo)系、相對坐標(biāo)系
世界坐標(biāo)系的意思是指游戲世界。Node Local坐標(biāo)系其實就是我們在調(diào)用setPositon的時候設(shè)置的位置是相對于父節(jié)點的，是相對坐標(biāo)，而不是絕對坐標(biāo)。
我們需要知道的一個比較重要的東西就是Anchor Point == > 錨點
之所以有錨點這個概念，是因為在游戲中，每個節(jié)點都有自己的坐標(biāo)系，這樣我們setPositon才能是相對于父親節(jié)點的，也就是相對坐標(biāo)系。
但是每個節(jié)點的坐標(biāo)系原點，可能不一樣。所以我們就把這個點成為錨點。簡而言之，錨點就是游戲中節(jié)點的坐標(biāo)系原點。而且每個節(jié)點都有自己的坐標(biāo)系。
驗證：看如下官方文檔。
我們用以下代碼為例，使用默認(rèn)Anchor Point值，將紅色層放在屏幕左下角，綠色層添加到紅色層上：
1 2 3 4 5 6 7 | auto red = LayerColor::create(Color4B(255, 100, 100, 128), visibleSize.width/2, visibleSize.height/2);
auto green = LayerColor::create(Color4B(100, 255, 100, 128), visibleSize.width/4, visibleSize.height/4);
red->addChild(green);
this->addChild(red, 0);
|
我們用以下代碼為例，將紅色層的Anchor Point設(shè)為中點放在屏幕中央，綠色層添加到紅色層上，綠色層錨點為右上角：
注：因為Layer比較特殊，它默認(rèn)忽略錨點，所以要調(diào)用ignoreAnchorPointForPosition()接口來改變錨點，關(guān)于ignoreAnchorPointForPosition()接口的使用說明，我們將在后面詳細(xì)講解。
1 2 3 4 5 6 7 8 9 10 11 | auto red = LayerColor::create(Color4B(255, 100, 100, 128), visibleSize.width/2, visibleSize.height/2);
red->ignoreAnchorPointForPosition(false);
red->setAnchorPoint(Point(0.5, 0.5));
red->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
auto green = LayerColor::create(Color4B(100, 255, 100, 128), visibleSize.width/4, visibleSize.height/4);
green->ignoreAnchorPointForPosition(false);
green->setAnchorPoint(Point(1, 1));
red->addChild(green);
this->addChild(red, 0);
|
我的理解：怎么理解呢，如果你明白了我剛才說的話，就能夠理解第二個代碼運行的效果。我們把紅色的錨點設(shè)置成0.5,05，綠色的設(shè)置成1,1則如圖上所示，兩個錨點分別為期兩個節(jié)點的坐標(biāo)原點。而綠色沒有設(shè)置位置，所以其位置默認(rèn)是相對于紅色是0,0位置。
為什么紅色成的左下角為本地坐標(biāo)原點了。你可以這樣理解。
1.每個節(jié)點的本地坐標(biāo)原點都是在左下角。
2.每個節(jié)點還有一個與AnchorPoint有關(guān)的坐標(biāo)系，其坐標(biāo)原點就是AnchorPoint，我們把其成為Anchor坐標(biāo)系。
3.setPosition針對的是AnchorPoint坐標(biāo)系下的節(jié)點，與父親本地節(jié)點坐標(biāo)系的位置。（此時AnchorPoint即代表這個節(jié)點，而節(jié)點的之后的渲染效果就看節(jié)點的AnchorPoint是在節(jié)點的什么位置
）
幾個知識要點換種說法:ignoreAnchorPointForPosition(true); == > 本質(zhì)上就是setAnchorPoint(0,0);什么時候把參數(shù)設(shè)置為false呢？
這種情況只有在Layer類中才需要使用，因為Layer的錨點是(0,0)。也就是等效于
ignoreAnchorPointForPosition(true);
所以我們要修改其錨點需要先
ignoreAnchorPointForPosition(false);
VertexZ，PositionZ和zOrder
關(guān)于這三個參數(shù)先看官方解釋。
- VerextZ是OpenGL坐標(biāo)系中的Z值
- PositionZ是Cocos2d-x坐標(biāo)系中Z值
- zOrder是Cocos2d-x本地坐標(biāo)系中Z值
在實際開發(fā)中我們只需關(guān)注zOrder。
可以通過setPositionZ接口來設(shè)置PositionZ。
以下是setPositionZ接口的說明：
1 | Sets the 'z' coordinate in the position. It is the OpenGL Z vertex value.
|
即PositionZ的值即為opengl的z值VertexZ。同樣節(jié)點的PositionZ也是決定了該節(jié)點的渲染順序，值越大，但是與zOrder不同的區(qū)別在于，PositionZ是全局渲染順序即在根節(jié)點上的渲染順序，而zOrder則是局部渲染順序，即該節(jié)點在其父節(jié)點上的渲染順序，與Node的層級有關(guān)。
我的理解:
我們開發(fā)中真正用到的也就是PositionZ，而PositionZ等效于VertexZ。PositionZ是什么呢，其實PositionZ就是三維坐標(biāo)中的Z軸，而cocos2dx的坐標(biāo)系和OpenGl、笛卡爾坐標(biāo)系是一致的，簡而言之前兩種都是笛卡爾坐標(biāo)系。也就是說我們以屏幕左下角為原點。
向右為X軸正向，向上為Y軸正向。所以Z軸就是向我們對著屏幕的這邊，也就是所我們設(shè)置Z軸，其實可以想象成立體的空間，在這個空間內(nèi)，節(jié)點的是有順序的，Z值越高，我們看過去越能先看到，因為我們所看的屏幕相當(dāng)于俯視圖。對把屏幕想成一張俯視圖。
所以Z軸值越大，就越先看到，越能蓋住它下面的東西，因為我們看的是俯視圖。有趣吧!.
那么OrderZ又是什么呢，OrderZ只是設(shè)置，在父親節(jié)點下，他們的繪制順序。但是PositionZ是決定最終呈現(xiàn)在屏幕面前的視覺順序。
我們接著來看官方所講述的觸摸事件于坐標(biāo)系的關(guān)系。先看官方文檔解釋如下：(我修改了官方注釋，請看我的理解)
觸摸點（Touch position)
所以在處理觸摸事件時需要用重寫以下四個函數(shù)：
1 2 3 4 | virtual bool onTouchBegan(Touch *touch, Event * event);
virtual void onTouchEnded(Touch *touch, Event * event);
virtual void onTouchCancelled(Touch *touch, Event * event);
virtual void onTouchMoved(Touch *touch, Event * event);
|
在函數(shù)中獲取到touch，我們在設(shè)計游戲邏輯時需要用到觸摸點在Cocos2d坐標(biāo)系中的位置，就需要將touch的坐標(biāo)轉(zhuǎn)換成OpenGL坐標(biāo)系中的點坐標(biāo)。
Touch position是屏幕坐標(biāo)系中的點，OpenGL position是Cocos2d-x用到的OpenGL坐標(biāo)系上的點坐標(biāo)。通常我們在開發(fā)中會使用兩個接口getLocation()和getLocationInView()來進(jìn)行相應(yīng)坐標(biāo)轉(zhuǎn)換工作。
在開發(fā)中一般使用getLocation()獲取觸摸點的GL坐標(biāo)，而getLocation()內(nèi)部實現(xiàn)是通過調(diào)用Director::getInstance()->convertToGL(_point);返回GL坐標(biāo)。
此外，關(guān)于世界坐標(biāo)系和本地坐標(biāo)系的相互轉(zhuǎn)換，在Node中定義了以下四個常用的坐標(biāo)變換的相關(guān)方法。
1 2 3 4 5 6 7 8 9 10 11 | // 把世界坐標(biāo)轉(zhuǎn)換到當(dāng)前節(jié)點的本地坐標(biāo)系中
Point convertToNodeSpace(const Point& worldPoint) const;
// 把基于當(dāng)前節(jié)點的本地坐標(biāo)系下的坐標(biāo)轉(zhuǎn)換到世界坐標(biāo)系中
Point convertToWorldSpace(const Point& nodePoint) const;
// 基于Anchor Point把基于當(dāng)前節(jié)點的本地坐標(biāo)系下的坐標(biāo)轉(zhuǎn)換到世界坐標(biāo)系中
Point convertToNodeSpaceAR(const Point& worldPoint) const;
// 基于Anchor Point把世界坐標(biāo)轉(zhuǎn)換到當(dāng)前節(jié)點的本地坐標(biāo)系中
Point convertToWorldSpaceAR(const Point& nodePoint) const;
|
下面通過一個例子來說明這四個方法的理解和作用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | auto *sprite1 = Sprite::create("HelloWorld.png");
sprite1->setPosition(ccp(20,40));
sprite1->setAnchorPoint(ccp(0,0));
this->addChild(sprite1); //添加到父親節(jié)點下，sprite1的錨點相對于父親節(jié)點的本地坐標(biāo)系的位置是x = 20， y = 40。而這個錨點又是自身的左下角。所以你可以畫出如下圖
auto *sprite2 = Sprite::create("HelloWorld.png");
sprite2->setPosition(ccp(-5,-20));
sprite2->setAnchorPoint(ccp(1,1));
this->addChild(sprite2); //意思如上
//將 sprite2 這個節(jié)點的坐標(biāo)ccp(-5,-20) 轉(zhuǎn)換為 sprite1節(jié)點 下的本地(節(jié)點)坐標(biāo)系統(tǒng)的 位置坐標(biāo)
Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition());
//將 sprite2 這個節(jié)點的坐標(biāo)ccp(-5,-20) 轉(zhuǎn)換為 sprite1節(jié)點 下的世界坐標(biāo)系統(tǒng)的 位置坐標(biāo)
Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition());
log("position = (%f,%f)",point1.x,point1.y);
log("position = (%f,%f)",point2.x,point2.y);
|
1 2 3 4 | 運行結(jié)果：
Cocos2d: position = (-25.000000,-60.000000)
Cocos2d: position = (15.000000,20.000000)
|
其中:Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition());
相當(dāng)于sprite2這個節(jié)點添加到（實際沒有添加，只是這樣理解）sprite1這個節(jié)點上，那么就需要使用sprite1這個節(jié)點的節(jié)點坐標(biāo)系統(tǒng)，這個節(jié)點的節(jié)點坐標(biāo)系統(tǒng)的原點在（20，40），而sprite1的坐標(biāo)是（-5，-20），那么經(jīng)過變換之后，sprite1的坐標(biāo)就是（-25，-60）。
其中:Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition());
此時的變換是將sprite2的坐標(biāo)轉(zhuǎn)換到sprite1的世界坐標(biāo)系下，而其中世界坐標(biāo)系是沒有變化的，始終都是和OpenGL等同，只不過sprite2在變換的時候?qū)?code style="margin: 0px; border: 1px solid #dddddd; border-radius: 3px; padding: 0px; background-color: #f8f8f8;">sprite1作為了”參照“而已。所以變換之后sprite2的坐標(biāo)為:（15，20）。
我的理解:
其實這四種相應(yīng)Layer層的方法已經(jīng)被廢棄，但是我們現(xiàn)在的關(guān)注點是坐標(biāo)系的理解，不必管它。
官方文檔說要闡述的是，說我們通過這些事件回調(diào)函數(shù)，在touch中取得的坐標(biāo)是屏幕坐標(biāo)。但是由于數(shù)據(jù)的封裝性，我們不用管，
我們只需要getLocation即可獲得笛卡爾坐標(biāo)系。
其他的Point convertToNodeSpace(const Point& worldPoint) const;的轉(zhuǎn)換例子，我修改了官方的注釋，只要理解了我上面所有的敘述，理解這個是十分容易的。不再復(fù)述。
說對就不難理解代碼的運行效果了。
2015/4/6上午1:53:18