Cocos2d-x坐标系介绍

时间 2019-12-05

原文原文链接

在图形图像和游戏应用开发中坐标系是很是重要的，咱们在Android和iOS等平台应用开发的时候使用的二维坐标系它的原点是在左上角的。而在Cocos2d-x坐标系中它原点是在左下角的，并且Cocos2d-x坐标系又能够分为：世界坐标和模型坐标。

UI坐标

UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点是在左上角的。html

UI坐标原点是在左上角，x轴向右为正，y轴向下为正。咱们在Android和iOS等平台使用的视图、控件等都是遵照这个坐标系。然而在Cocos2d-x默认不是采用UI坐标，可是有的时候也会用到UI坐标，例如在触摸事件发生的时候，咱们会得到一个触摸对象（Touch），触摸对象（Touch）提供了不少得到位置信息的函数，以下面代码所示：node

Point touchLocation = touch->getLocationInView();编程

使用getLocationInView()函数得到触摸点坐标事实上就是UI坐标，它的坐标原点在左上角。而不是Cocos2d-x默认坐标，咱们能够采用下面的语句进行转换：函数

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

经过上面的语句就能够将触摸点位置从UI坐标转换为OpenGL坐标，OpenGL坐标就是Cocos2d-x默认坐标。spa

OpenGL坐标

咱们在上面提到了OpenGL坐标，OpenGL坐标是种三维坐标。因为Cocos2d-x底层采用OpenGL渲染，所以的默认坐标就是OpenGL坐标，只不过只采用两维（x和y轴）。若是不考虑z轴，OpenGL坐标的原点在左下角。操作系统

提示: 三维坐标根据z轴的指向不一样分为：左手坐标和右手坐标。右手坐标是z轴指向屏幕外。左手坐标是z轴指向屏幕里.OpenGL坐标是右手坐标，而微软平台的Direct3D[1]是左手坐标。.net

世界坐标和模型坐标

因为OpenGL坐标有能够分为：世界坐标和模型坐标，因此Cocos2d-x的坐标也有世界坐标和模型坐标。code

你是否有过这样的问路经历：张三会告诉你向南走一千米，再向东走500米。而李四会告诉你向右走一千米，再向左走500米。这里两种说法或许均可以找到你要寻找的地点。张三采用的坐标是世界坐标，他把地球做为参照物，表述位置使用地理的东、南、西和北。而李四采用的坐标是模型坐标，他让你本身做为参照物，表述位置使用你的左边、你的前边、你的右边和你的后边。orm

咱们看看图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表示相对于锚点。

下面咱们经过两个例子了解一下世界坐标与模型坐标互相转换。

一、世界坐标转换为模型坐标

下面是世界坐标转换为模型坐标实例运行结果。

在游戏场景中有两个Node对象，其中Node1的坐标是(400, 500)，大小是300 x 100像素。Node2的坐标是(200, 300)，大小也是300 x 100像素。这里的坐标事实上就是世界坐标，它的坐标原点是屏幕的左下角。

编写代码以下：

[html] view plain copy

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)。

二、模型坐标转换为世界坐标

下面是模型坐标转换为世界坐标实例运行结果。

在游戏场景中有两个Node对象，其中Node1的坐标是(400, 500)，大小是300 x 100像素。Node2是放置在Node1中的，它对于Node1的模型坐标是(0, 0)，大小也是150 x 50像素。

编写代码以下：

[html] view plain copy

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);

[1] Direct3D（简称：D3D）是微软公司在Microsoft Windows操做系统上所开发的一套3D绘图编程接口，是DirectX的一部份，目前广为各家显卡所支持。与OpenGL同为计算机绘图软件和计算机游戏最常使用的两套绘图编程接口之一。—— 引自于维基百科 http://zh.wikipedia.org/wiki/Direct3D