cocos2d-x座標系詳解

cocos2d-x官方文檔

笛卡爾座標系

不一樣座標系簡介

笛卡爾座標系

你可能上學的時候就已經知道「笛卡爾座標系」了，它在幾何課本里常常用到。若是你已經忘得差很少了，下面這些圖片能夠很快喚起你的記憶：





在移動遊戲開發過程當中，有三種類型的座標系你可能遇到：

UI座標系

iOS/Android/Windows SDK中的通用UI座標系：

• 起點座標(x=0, y=0)位於左上角
• X軸從屏幕最左邊開始，由左向右漸增
• Y軸座標從屏幕最上方開始，由上向下漸增

詳見下圖



 

Direct3D座標系

DirectX 使用Left-handed Cartesian Coordinate

OpenGL和Cocos2d座標系

Cocos2d-x/-html5/-iphone使用的座標系和OpenGL的座標系同樣，名爲「Right-handed Cartesian Coordinate Syste」。



在2D世界中，咱們僅會使用x軸和y軸。因此在你的cocos2d遊戲中：

• 起點座標(x=0, y=0)位於左下角，這意味着屏幕位於
• X軸從屏幕最左邊開始，由左向右漸增
• Y軸座標從屏幕最下方開始，由下向上漸增

下面這張圖片有助於更好的闡述Cocos2d-x座標：



必定要注意：通用UI座標系和DirectX座標系是不同的。

Parent and Childrens

因爲每一個類都繼承自CCNode（cocos2d-x的最頂層類），因此每一個類都會默認有anchorPoint屬性。 當咱們在一個位置畫一個的對象的時候，cocos2d-x會合並屬性位置和anchorPoint。固然，當旋轉一個對象時，cocos2d-x會圍繞繞anchorPoint旋轉的。

咱們建立一個灰色父對象和一個藍色子對象。設置父對象位置是ccp(100,100),子對象的anchor point位於圓心。

    CCSprite* parent = CCSprite::create("parent.png");
    parent->setAnchorPoint(ccp(0, 0));// Anchor Point
    parent->setPosition(ccp(100, 100));
    parent->setAnchorPoint(ccp(0, 0));
    addChild(parent);

    //create child
    CCSprite* child = CCSprite::create("child.png");
    child->setAnchorPoint(ccp(0.5, 0.5));
    child->setPosition(ccp(0, 0));
    parent->addChild(child);//add child sprite into parent sprite.

因爲咱們設置子對象的位置是ccp(0,0)，父對象位置是ccp(100,100)。因此，子對象位置是：

![](http://www.cocos2d-x.org/attachments/1559/parent.jpeg）

錨點

做爲例子，下面這個精靈有的錨點位於 ccp(0,0)，位置位於ccp(0,0)。



這個矩形精靈將被放到它的父對象（layer）的左下角。

示例：

// create sprite
CCSprite* sprite = CCSprite::create("bottomleft.png");
sprite->setAnchorPoint(ccp(0, 0));// Anchor Point
sprite->setPosition(ccp(0,0));
addChild(sprite);

在另外一個例子中，咱們會擺放一個座標爲ccp(0.5,0.5)的anchorPoint，以便您更好的理解錨點的相對值。

// create sprite
CCSprite* sprite = CCSprite::create("center.png");
sprite->setAnchorPoint(ccp(0.5, 0.5));// Anchor Point
sprite->setPosition(ccp(0,0));
addChild(sprite);

正如你從圖中看出的，錨點取的不是像素值，此值的X和Y是相對於此節點的大小的。

獲取可視區域大小, 獲取可視區域起點 vs 獲取窗口大小

• getVisibleSize
• getVisibleOrigin
• getWinSize

VisibleSize（可視區域大小）會返回此點的OpenGL視圖的可視區域大小。若是沒有調用CCEGLView::setDesignResolutionSize()的話，此值等於getWinSize的大小。 getVisibleOrigin（獲取可視區域起點）會返回此點的OpenGL視圖的可視區域起點。請移步Multi resolution support查看詳情。

如何轉換座標

convertToNodeSpace：

舉例，convertToNodeSpace用於tile-based的遊戲，即有一個大地圖。convertToNodeSpace會轉換openGL觸摸點轉成.tmx 地圖或者其餘近似的座標。

例子：

下面的圖片會展示，node1的錨點(0,0)，node2的錨點是(1,1)。

咱們會調用CCPoint point = node1->convertToNodeSpace(node2->getPosition()); 轉換node2的屏幕座標爲node1的位置。結果是，node2的位置是(-25，-60).

convertToWorldSpace：

convertToWorldSpace(常量 CCPoint& nodePoint) 轉換node座標爲SCREEN座標。convertToWorldSpace會常常返回你的精靈的SCREEN位置，若是你想捕獲精靈的taps並且須要移動/縮放layer的時候，這可能很是有幫助。

CCPoint point = node1->convertToWorldSpace(node2->getPosition());

上面的代碼會轉換node2座標爲node2在屏幕上對應的座標。

convertToWorldSpaceAR

convertToWorldSpaceAR返回相對錨點的位置：因此若是你的場景 - 根layer有一個錨點位於ccp(0.5f, 0.5f)。- 默認的，convertToNodeSpaceAR應返回相對於屏幕中心的位置。

convertToNodeSpaceAR - 和convertToWorldSpaceAR是同樣的邏輯。

示例代碼：

CCSprite *sprite1 = CCSprite::create("CloseNormal.png");

sprite1->setPosition(ccp(20,40));

sprite1->setAnchorPoint(ccp(0,0));

this->addChild(sprite1);

CCSprite *sprite2 = CCSprite::cteate("CloseNormal.png");

sprite2->setPosition(ccp(-5,-20));

sprite2->setAnchorPoint(ccp(1,1));

this->addChild(sprite2);

CCPoint point1 = sprite1->convertToNodeSpace(sprite2->getPosition());

CCPoint point2 = sprite1->convertToWorldSpace(sprite2->getPosition());

CCPoint point3 = sprite1->convertToNodeSpaceAR(sprite2->getPosition());

CCPoint point4 = sprite1->convertToWorldSpaceAR(sprite2->getPosition());

CCLog("position = (%f,%f)",point1.x,point1.y);

CCLog("position = (%f,%f)",point2.x,point2.y);

CCLog("position = (%f,%f)",point3.x,point3.y);

CCLog("position = (%f,%f)",point4.x,point4.y);

結果：

position = (-25.000000,-60.000000)

position = (15.000000,20.000000)

position = (-25.000000,-60.000000)

position = (15.000000,20.000000)