现在的位置: 首页 > 综合 > 正文

cocos2d-x之详解坐标系

2013年09月03日 ⁄ 综合 ⁄ 共 4122字 ⁄ 字号 评论关闭

http://www.114151.com/cocos2d-x-coordinate-system/

 

在几何体系中通常使用“笛卡尔”坐标系来描述坐标,就像下图展示的那样,通过左手或是右手来描述坐标系。

但是在手机游戏开发中,界面UI坐标系有以下三种类型:

UI坐标系:在iOS/Android/Windows SDK这些系统平台场,通常使用的UI坐标系定义如下:

屏幕左上角就是坐标系原点(0,0);x坐标从左向右增量变换,y坐标从上向下增量变换,如下图所示:

Direct3D坐标系:DirectX坐标系使用的是左手“笛卡尔”坐标系。

OpenGL和Cocos2d坐标系:/-html5/-iphone/OpenGL坐标系使用的是右手“笛卡尔”坐标系。

在2D游戏世界中,只使用到x和y坐标。屏幕左下角是坐标系的原点(0,0);x坐标从左向右增量变换;y坐标从下向上增量变换。

下面通过cocos2d-x贴图来详细说明一下。

在上图中,蓝色圆和黑色圆使用的是同一坐标(100,100),但不同的是它们的描点坐标不同,这里的描点坐标可以理解为坐标系的原点。蓝色圆的描点坐标是(0.5,0.5),而黑色圆的描点坐标是(0,0)。

 

GD Star Rating
a WordPress rating system

本文出自 扣蛋饭粒,转载时请注明出处及相应链接。

本文永久链接:

http://www.114151.com/cocos2d-x-coordinate-system/

 

 ------------------------------------------------------------------------------------------------------------------------

cocos2d-x 坐标研究

http://blog.163.com/zjf_to/blog/static/201429061201292193855498/

今天晚上,对cocos2d-x里面的四个表示坐标的方法进行了一下研究,特意做了下笔记,如下:
CCPoint convertToNodeSpace(const CCPoint& worldPoint);
CCPoint convertToWorldSpace(const CCPoint& nodePoint);
CCPoint convertToNodeSpaceAR(const CCPoint& worldPoint);
CCPoint convertToWorldSpaceAR(const CCPoint& nodePoint);

在理解这个之前,要多世界坐标和本地坐标有一定的理解,
GL坐标系Cocos2D以OpenglES为图形库,所以它使用OpenglES坐标系。GL坐标系原点在屏幕左下角,x轴向右,y轴向上。

屏幕坐标系苹果的Quarze2D使用的是不同的坐标系统,原点在屏幕左上角,x轴向右,y轴向下。ios的屏幕触摸事件CCTouch传入的位置信息使用的是该坐标系。因此在cocos2d中对触摸事件做出响应前需要首先把触摸点转化到GL坐标系。可以使用CCDirector的convertToGL来完成这一转化。

世界坐标系也叫做绝对坐标系,cocos2d中的元素是有父子关系的层级结构,我们通过CCNode的position设定元素的位置使用的是相对与其父节点的本地坐标系而非世界坐标系。最后在绘制屏幕的时候cocos2d会把这些元素的本地坐标映射成世界坐标系坐标。世界坐标系和GL坐标系一致,原点在屏幕左下角,

本地坐标系也叫做物体坐标系,是和特定物体相关联的坐标系。每个物体都有它们独立的坐标系,当物体移动或改变方向时,和该物体关联的坐标系将随之移动或改变方向。比如用cocos2d-x创建了个矩形colorLayer:CCRect(10,10,100,100),这是的本地坐标系为以(10,10)为坐标原点,x轴向右,y轴向上。如果创建了一个CCSprite,锚点为(0.5,0.5),位置为(100,100),size为(40,40),这时的本地坐标系为以(80,80)为坐标原点,x轴向右,y轴向上。总之,本地坐标系原点为node的左下角坐标

接下来,convertToNodeSpace:调用CCPoint point = node1->convertToNodeSpace(node2->getPosition());
将node2的坐标转化成相对于node1的本地坐标

 cocos2d-x 坐标研究 - zjfzjf - zjfzjf,
比如坐标如上图所示,node1的锚点为(0,0),node2的锚点为(1,1),转化之后,node的坐标变成了(-25,-60)

而convertToWorldSpace:调用CCPoint point = node1->convertToWorldSpace(node2->getPosition());

 cocos2d-x 坐标研究 - zjfzjf - zjfzjf
是将node的坐标转化成相对于node1的世界坐标,如上图所示:首先将node1的坐标当做世界坐标,然后让node2的坐标位置重置成相对于node1的世界坐标,也就是(15,20)

convertToNodeSpaceAR,就是把node1的坐标系原点设置在锚点的位置,这里的锚点是(0,0)所以转化之后的坐标系位置和上面的convertToNodeSpace一样,结果也是一样的,convertToWorldSpaceAR同理

测试:
CCSprite *sprite1 = CCSprite::spriteWithFile("CloseNormal.png");
sprite1->setPosition(ccp(20,40));
sprite1->setAnchorPoint(ccp(0,0));
this->addChild(sprite1);
CCSprite *sprite2 = CCSprite::spriteWithFile("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)
和预算的一样

这里在将sprite1的锚点设置成(0.5,0.5),对convertToNodeSpaceAR和convertToWorldSpaceAR进行了进一步的测试
sprite1->setAnchorPoint(ccp(0.5,0.5));
sprite1->setPosition(ccp(100,100));
CCPoint point5 = sprite1->convertToNodeSpaceAR(sprite2->getPosition());
CCPoint point6 = sprite1->convertToWorldSpaceAR(sprite2->getPosition());
CCLog("position = (%f,%f)",point5.x,point5.y);
CCLog("position = (%f,%f)",point6.x,point5.y);

运算结果:
size = (40.000000,40.000000)
position = (-105.000000,-120.000000)
position = (95.000000,80.000000)
分析:重置的sprite1的坐标为(100,100),锚点为(0.5,0.5)所以对于convertToNodeSpaceAR和convertToWorldSpaceAR这两个方法的坐标系为原点(100,100),所以用convertToNodeSpaceAR转化之后的坐标为(-105,-120)用convertToWorldSpaceAR化之后的坐标为(95,80),和运算结果一样
 

 

抱歉!评论已关闭.