Cocos2d-x从入门到精通第八课《坐标系统》

一． Cocos2d-x坐标系的概念

本节课视频教程地址：http://edu.csdn.net/course/detail/1342/20992?auto_start=1

Cocos2d-x的坐标系和Opengl的坐标系相同，都起源于笛卡尔坐标系。那么什么是笛卡尔坐标系呢，如图：




笛卡尔坐标系有左右坐标系和右手坐标系，上图就是右手坐标系，而Cocos2d-x和Opengl使用的正式笛卡尔坐标系的右手坐标系。从图中我们可以看到有x,y,z三个轴，分别垂直。但是在2D的世界中Z轴是并不存在的，所以屏幕的坐标使用X,Y轴就可以表示了，下面我们来看一下屏幕坐标和Cocos的2d的坐标系统的区别和联系。如图：






从图中可以看出，屏幕坐标系和Cocos的2d坐标系都是有X,Y两个轴组成，而且方向上没有区别，但是Cocos的2d坐标系的原点(0,0)在左下角，而屏幕坐标系的原点(0,0)在左上角。

二． 世界坐标系和本地坐标系

世界坐标系也叫做绝对坐标系，是游戏开发中建立的概念。因此，“世界”指游戏世界。cocos2d中的元素是有父子关系的层级结构，我们通过Node的setPosition设定元素的位置使用的是相对与其父节点的本地坐标系而非世界坐标系。最后在绘制屏幕的时候cocos2d会把这些元素的本地坐标映射成世界坐标系坐标。
本地坐标系也叫相对坐标系，是和节点相关联的坐标系。每个节点都有独立的坐标系，当节点移动或改变方向时，和该节点关联的坐标系将随之移动或改变方向。

在实际开发中我们往往需要根据需求对两者进行转换，那么该如何转换呢，这里就不得不提到两个方法convertToNodeSpace，convertToWorldSpace，下面我们通过代码来看一下通过这两种方法进行运算后的坐标。代码如下：

//创建node1
    Node* node1 =Node::create();
    //设置node1的坐标
node1->setPosition(Vec2(20, 40));
    //设置锚点为（0，0）
node1->setAnchorPoint(Vec2(0,0));
    //创建node2
    Node* node2 =Node::create();
    //设置node2的坐标
node2->setPosition(Vec2(-5,-20));
    //设置node2的锚点
node2->setAnchorPoint(Vec2(1,1));
    //通过convertToNodeSpace获得node2相对node1的坐标
    Vec2nodePosition = node1->convertToNodeSpace(node2->getPosition());
    //通过converToWorldSpace获得node2的屏幕坐标
Vec2 worldPosition = node1->convertToWorldSpace(node2->getPosition());

运行结果：

下面我们来通过两幅图来看一下：









convertToNodeSpace标示图

node1的锚点为（0,0）位置(20,40)，node2的锚点为（1,1）,位置(-5,-20)，上面说过convertToNodeSpace作为参照物时，锚点的位置是(0,0)，程序中设置的描点不起作用，碰巧，node1的锚点为(0,0),所以以(20,40)这个点做为参照物，方向为向右，向上为正方向，(-5,-20)相对于这个参考点就是(-25,-60)








convertToWorldSpace标示图



是将node2的坐标转化成相对于node1的世界坐标，这个可以这样理解，因为世界坐标是固定的，node1的世界坐标只是在固定世界坐标的基础上做了平移，这边是(20,40),而node2相对于node1的世界坐标也只是做了同样大小的平移而已，也就是(-5,-20)通过(20,40)做了平移，结果(15,20)



除了这个两个函数之外还有convertToWorldSpaceAR和convertToNodeSpaceAR两者和前两个函数的最的区别的就是提供了把锚点转成(0,0)的作用.

三.坐标系的总结

本节课主要讲解了Cocos2d-x坐标系，Cocos2d-x的坐标系就是使用的笛卡尔坐标系的右手坐标系，把屏幕的左下角设置成为了坐标系的原地，X和Y轴分别沿着屏幕向右和向上的方向。我们还讲解了convertToWorldSpace和convertToNodeSpace的使用方法和作用。

四，作业

结合本节课的知识去理解一下坐标系的使用。