Cocos2d-x坐標系介紹

Cocos2d-x坐標系介紹

在圖形圖像和游戲應用開發中坐標系是非常重要的，我們在Android和iOS等平臺應用開發的時候使用的二維坐標系它的原點是在左上角的。而在Cocos2d-x坐標系中它原點是在左下角的，而且Cocos2d-x坐標系又可以分為：世界坐標和模型坐標。

UI坐標

UI坐標就是Android和iOS等應用開發的時候使用的二維坐標系。它的原點是在左上角的。

UI坐標原點是在左上角，x軸向右為正，y軸向下為正。我們在Android和iOS等平臺使用的視圖、控件等都是遵守這個坐標系。然而在Cocos2d-x默認不是采用UI坐標，但是有的時候也會用到UI坐標，例如在觸摸事件發生的時候，我們會獲得一個觸摸對象（Touch），觸摸對象（Touch）提供了很多獲得位置信息的函數，如下面代碼所示：

Point touchLocation = touch->getLocationInView();

使用getLocationInView()函數獲得觸摸點坐標事實上就是UI坐標，它的坐標原點在左上角。而不是Cocos2d-x默認坐標，我們可以采用下面的語句進行轉換：

Point touchLocation2 = Director::getInstance()->convertToGL(touchLocation);

通過上面的語句就可以將觸摸點位置從UI坐標轉換為OpenGL坐標，OpenGL坐標就是Cocos2d-x默認坐標。

OpenGL坐標

我們在上面提到了OpenGL坐標，OpenGL坐標是種三維坐標。由于Cocos2d-x底層采用OpenGL渲染，因此的默認坐標就是OpenGL坐標，只不過只采用兩維（x和y軸）。如果不考慮z軸，OpenGL坐標的原點在左下角。

提示:  三維坐標根據z軸的指向不同分為：左手坐標和右手坐標。右手坐標是z軸指向屏幕外。左手坐標是z軸指向屏幕里.OpenGL坐標是右手坐標，而微軟平臺的Direct3D[1]是左手坐標。

世界坐標和模型坐標

由于OpenGL坐標有可以分為：世界坐標和模型坐標，所以Cocos2d-x的坐標也有世界坐標和模型坐標。

你是否有過這樣的問路經歷：張三會告訴你向南走一公里，再向東走500米。而李四會告訴你向右走一公里，再向左走500米。這里兩種說法或許都可以找到你要尋找的地點。張三采用的坐標是世界坐標，他把地球作為參照物，表述位置使用地理的東、南、西和北。而李四采用的坐標是模型坐標，他讓你自己作為參照物，表述位置使用你的左邊、你的前邊、你的右邊和你的后邊。

我們看看圖3-21，從圖中可以看到A的坐標是(5,5)，B的坐標是(4,6)，事實上這些坐標值就是世界坐標。如果采用A的模型坐標來描述B的位置，則B的坐標是(1,-1)。

有的時候我們需要將世界坐標與模型坐標互相轉換。我們可以通過Node對象如下函數實現：

Point convertToNodeSpace ( const Point & worldPoint )。將世界坐標轉換為模型坐標。

Point convertToNodeSpaceAR ( const Point & worldPoint )。將世界坐標轉換為模型坐標。AR表示相對于錨點。

Point convertTouchToNodeSpace ( Touch * touch )。將世界坐標中觸摸點轉換為模型坐標。

Point convertTouchToNodeSpaceAR ( Touch * touch )。將世界坐標中觸摸點轉換為模型坐標。AR表示相對于錨點。

Point convertToWorldSpace ( const Point & nodePoint )。將模型坐標中觸摸點轉換為世界坐標。

Point convertToWorldSpaceAR ( const Point & nodePoint )。將模型坐標中觸摸點轉換為世界坐標。AR表示相對于錨點。

下面我們通過兩個例子了解一下世界坐標與模型坐標互相轉換。

1、世界坐標轉換為模型坐標

下面是世界坐標轉換為模型坐標實例運行結果。

在游戲場景中有兩個Node對象，其中Node1的坐標是(400, 500)，大小是300 x 100像素。Node2的坐標是(200, 300)，大小也是300 x 100像素。這里的坐標事實上就是世界坐標，它的坐標原點是屏幕的左下角。

編寫代碼如下：

bool HelloWorld::init()
{
   
    if( !Layer::init() )
    {
         returnfalse;
    }
 
    SizevisibleSize = Director::getInstance()->getVisibleSize();
    Pointorigin = Director::getInstance()->getVisibleOrigin();
    autocloseItem = MenuItemImage::create(
         "CloseNormal.png",
         "CloseSelected.png",
         CC_CALLBACK_1(HelloWorld::menuCloseCallback,this));
 
    closeItem->setPosition(Point(origin.x+ visibleSize.width - closeItem->getContentSize().width/2 ,
         origin.y+ closeItem->getContentSize().height/2));
 
    automenu = Menu::create(closeItem, NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu,1);
    //創建背景
    autobg = Sprite::create("bg.png");                                                                                         ①
    bg->setPosition(Point(origin.x+ visibleSize.width/2,
         origin.y+ visibleSize.height/2));
 
    this->addChild(bg,0);                                                                                                                      ②
    //創建Node1
    autonode1 = Sprite::create("node1.png");                                                                           ③
    node1->setPosition(Point(400,500));
    node1->setAnchorPoint(Point(1.0,1.0));
 
    this->addChild(node1,0);                                                                                                               ④
    //創建Node2
    autonode2 = Sprite::create("node2.png");                                                                           ⑤
    node2->setPosition(Point(200,300));         
    node2->setAnchorPoint(Point(0.5,0.5));
 
    this->addChild(node2,0);                                                                                                               ⑥
 
    PointPoint1 = node1->convertToNodeSpace(node2->getPosition());                                      ⑦
    PointPoint3 = node1->convertToNodeSpaceAR(node2->getPosition());                                 ⑧
   
    log("Node2NodeSpace = (%f,%f)",Point1.x,Point1.y);
    log("Node2NodeSpaceAR = (%f,%f)",Point3.x,Point3.y);
 
    returntrue;
}

代碼①~②行是創建背景精靈對象，這個背景是一個白色900 x 640像素的圖片。代碼第③~④行是創建Node1對象，并設置了位置和錨點屬性。代碼第⑤~⑥行是創建Node2對象，并設置了位置和錨點屬性。第⑦行代碼將Node2的世界坐標轉換為相對于Node1的模型坐標。而第⑧行代碼是類似的，它是相對于錨點的位置。

運行結果如下：

Node2 NodeSpace = (100.000000,-100.000000)

Node2 NodeSpaceAR =(-200.000000,-200.000000)

Node2的世界坐標轉換為相對于Node1的模型坐標，就是將Node1的左下角作為坐標原點（圖3-22中的A點），我們不難計算出A點的世界坐標是(100,400)，那么convertToNodeSpace函數就是A點坐標減去C點坐標，結果是(-100,100)。而convertToNodeSpaceAR函數要考慮錨點，因此坐標原點是B點，B點坐標減去C點坐標，結果是(-200, -200)。

2、模型坐標轉換為世界坐標

下面是模型坐標轉換為世界坐標實例運行結果。

在游戲場景中有兩個Node對象，其中Node1的坐標是(400, 500)，大小是300 x 100像素。Node2是放置在Node1中的，它對于Node1的模型坐標是(0, 0)，大小也是150 x 50像素。

編寫代碼如下：

bool HelloWorld::init()
{
    if( !Layer::init() )
    {
         returnfalse;
    }
 
    SizevisibleSize = Director::getInstance()->getVisibleSize();
    Pointorigin = Director::getInstance()->getVisibleOrigin();
 
    autocloseItem = MenuItemImage::create(
         "CloseNormal.png",
         "CloseSelected.png",
         CC_CALLBACK_1(HelloWorld::menuCloseCallback,this));
 
    closeItem->setPosition(Point(origin.x+ visibleSize.width - closeItem->getContentSize().width/2 ,
         origin.y+ closeItem->getContentSize().height/2));
 
    automenu = Menu::create(closeItem, NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu,1);
 
    //創建背景
    autobg = Sprite::create("bg.png");
    bg->setPosition(Point(origin.x+ visibleSize.width/2,
         origin.y+ visibleSize.height/2));
    this->addChild(bg,0);
 
    //創建Node1
    autonode1 = Sprite::create("node1.png");
    node1->setPosition(Point(400,500));
    this->addChild(node1,0);
 
    //創建Node2
    autonode2 = Sprite::create("node2.png");
    node2->setPosition(Point(0.0,0.0));                                                                                              ①
    node2->setAnchorPoint(Point(0.0,0.0));                                                                              ②
    node1->addChild(node2,0);                                                                                                 ③
 
    PointPoint2 = node1->convertToWorldSpace(node2->getPosition());                                              ④
Point Point4 =node1->convertToWorldSpaceAR(node2->getPosition());                                  ⑤
 
 
    log("Node2WorldSpace = (%f,%f)",Point2.x,Point2.y);
    log("Node2WorldSpaceAR = (%f,%f)",Point4.x,Point4.y);
 
    returntrue;
}

上述代碼我們主要關注第③行，它是將Node2放到Node1中，這是與之前的代碼的區別。這樣第①行設置的坐標就變成了相對于Node1的模型坐標了。

第④行代碼將Node2的模型坐標轉換為世界坐標。而第⑤行代碼是類似的，它是相對于錨點的位置。

運行結果如下：

Node2 WorldSpace =(250.000000,450.000000)

Node2 WorldSpaceAR =(400.000000,500.000000)

所示的位置，可以用世界坐標描述。代碼①~③行修改如下：

node2->setPosition(Point(250, 450));

node2->setAnchorPoint(Point(0.0,0.0));

this->addChild(node2, 0);

更多精彩內容請關注史上最牛的cocos2d-x課程

《cocos2d-x手機游戲開發實戰》直播課程第一期

報名Cocos2d-x直播課程還送關東升老師iOS終身會員。

課程鏈接:http://edu.51cto.com/pack/view/id-13.html

會員鏈接:http://edu.51cto.com/member/id-3.html