cocos2d-x 坐标系总结(从如何判断精灵是否在屏幕可见范围谈起)

骑猪看日落 2022-08-25 08:34 115阅读 0赞

萌生系统了解这方面的问题这个念头, 是因为今天刚遇到的一个问题。

最近在写一个跑酷游戏,基于cocos2d-x。 在死亡判断的时候,有一个情况,就是主角被移出了屏幕可见范围,则判断为死亡。(玩过天天酷跑的都知道吧)

本来一个很简单的问题,却因为自己学习的不够系统,折腾了半天。

因为我的主角(sprite)的父类是地图(map),而不是直接加到游戏场景中(scence)。所以,我通过getPosition获得到的坐标,是相对地图的。无法直接和屏幕做比较。

于是乎,我又计算出地图相对于场景的坐标,再进行换算,得到精灵相对与场景的坐标,再判断是否在可见范围....

折腾了半天,虽然达到了要求,但是。很麻烦！

后来百度了一下.. 发现了世界坐标系这个概念。

仅仅两行代码,就解决了,而且十分准确,方便。

CCPoint worldSpace = getGameMap()->convertToWorldSpace(getCurrentRolePoint());
        
        if (worldSpace.x <= 0)
        {
            //修改图片,改为受伤状态
            mSprite->stopAllActions();
            mSprite->setTexture(picHurt);
            
            return;
        }

后悔阿...

恶补了一下,mark一下。

下面就系统的介绍下cocos2d-x中的坐标系。(参考网上一些博文,加上自己的心得写成的 )

参考文章:http://blog.csdn.net/crayondeng/article/details/11936309

一、

（1）OpenGL坐标系

Cocos2D-x以OpenGL和OpenGL ES为基础，所以自然支持OpenGL坐标系。该坐标系原点在屏幕左下角，x轴向右，y轴向上。

（2）屏幕坐标系

屏幕坐标系使用的是不同的坐标系统，原点在屏幕左上角，x轴向右，y轴向下。iOS的屏幕触摸事件CCTouch传入的位置信息使用的是该坐标系。因此在Cocos2D-x中对触摸事件做出响应前，需要首先把触摸点转化到OpenGL坐标系。这一点在后面的触屏信息中会详细介绍，可以使用CCDirector的convertToGL方法来完成这一转化。

在处理触摸事件的回调方法中，我们会经常碰到这两者的坐标系统的转换处理问题。在CCTouch文件中已经为我们封装好了获取触摸点在OpenGL坐标系统和屏幕坐标系统中的坐标位置。

①从触摸点获取到在屏幕坐标系中的坐标

**\[cpp\]** [view plain][] [copy][view plain]

1.  // returns the current touch location in screen coordinates
2.  CCPoint CCTouch::getLocationInView() **const**
3.  \{ 
4.  **return** m\_point; 
5.  \}

②从触摸点获取到在OpenGL坐标系中的坐标

**\[cpp\]** [view plain][] [copy][view plain]

1.  // returns the current touch location in OpenGL coordinates
2.  CCPoint CCTouch::getLocation() **const**
3.  \{ 
4.  **return** CCDirector::sharedDirector()->convertToGL(m\_point); 
5.  \}

二、  
（1）世界坐标系统

世界坐标系也叫作绝对坐标系，是游戏开发中建立的概念，因此，“世界”即是游戏世界。它建立了描述其他坐标系所需要的参考标准。我们能够用世界坐标系来描述其他坐标系的位置。它是Cocos2D-x中一个比较大的概念。

Cocos2D-x中的元素是有父子关系的层级结构。通过CCNode设置位置使用的是相对其父节点的本地坐标系，而非世界坐标系。最后在绘制屏幕的时候，Cocos2D-x会把这些元素的本地节点坐标映射成世界坐标系坐标。世界坐标系和OpenGL坐标系方向一致，原点在屏幕左下角，x轴向右，y轴向上。

（2）节点坐标系统

节点坐标系是和特定节点相关联的坐标系。每个节点都有独立的坐标系。当节点移动或改变方向时，和该节点关联的坐标系（它的子节点）将随之移动或改变方向。这一切都是相对的，相对于基准的，只有在节点坐标系中才有意义。

CCNode类的设置位置使用的就是父节点的节点坐标系。它和OpenGL坐标系的方向也是一致的，x轴向右，y轴向上，原点在父节点的左下角。如果父节点是场景树中的顶层节点，那么它使用的节点坐标系就和世界坐标系重合了。

\*\*\*\*

锚点

锚点指定了贴图上和所在节点原点（也就是设置位置的点）重合的点的位置，因此只有在CCNode类节点使用贴图的情况下，锚点才有意义。

锚点的默认值是（0.5，0.5），表示的并不是一个像素点，而是一个乘数因子。（0.5，0.5） 表示锚点位于贴图长度乘0.5和宽度乘0.5的地方，即贴图的中心。

改变锚点的值虽然可能看起来节点的图像位置发生了变化，但其实并不会改变节点的位置，其实变化的只是贴图相对于你设置的位置的相对位置，相当于你在移动节点里面的贴图，而非节点本身。如果把锚点设置成（0，0），贴图的左下角就会和节点的位置重合，这可能使得元素定位更为方便，但会影响到元素的缩放和旋转等一系列变换。因此并没有一种锚点设置是放之四海而皆准的，要根据你这个对象的使用情况来定义。在Cocos2D-x中锚点为默认值（0.5，0.5），这样的锚点设置要把一个节点放置到贴图的中央。

\*\*\*\*

上面关于世界坐标系和节点坐标系的介绍摘抄自Cocos2dx权威指南一书，下面我简单通俗的讲解一下我的理解：

其实，二者之间是一个绝对和相对的概念，世界坐标系是绝对的，而节点坐标系是相对的。

可以这样理解世界坐标系，所谓绝对，其实它就是和OpenGL坐标系（等同）一致的坐标系统，原点在屏幕左下角，x轴方向向右，y轴方向向上。

而节点坐标系是相对于具体的节点来说的，每一个物体都有一个特定的坐标系统，当节点移动时，那么它本身的坐标系统也就跟着发生变化。但是有一点需要**特别注意：节点坐标系的原点默认是其左下角位置。**

例如说：我们在一个layer中添加一个sprite，锚点为（0，0），size为（40，40），位置为（50，50），那么此时这个sprite的节点坐标系统是神马呢？ ------- 这时它的节点坐标系统就是以（50，50）为坐标系统原点，x轴向右，y轴向上的坐标系。

对上面的例子稍稍变一下：锚点位置改为（0.5，0.5），其他不变，那么这个时候sprite的节点坐标系统又是多少呢？（注意到上面的：节点坐标系的原点默认是其左下角位置） ----- 这个时候它的节点坐标系统就是以（30，30）为坐标系统原点，x轴向右，y轴向上的坐标系。

这样理解是否好一些呢？（如有不对之处，欢迎评论指正！）

关于这两个坐标系统之间的转换，在CCNode中定义了以下四个常用的坐标变换的相关方法。

**\[cpp\]** [view plain][] [copy][view plain]

1.  /\*\* 
2.   \* Converts a Point to node (local) space coordinates. The result is in Points.
3.   \*/
4.   CCPoint convertToNodeSpace(**const** CCPoint& worldPoint); 
5.  
6.  /\*\* 
7.   \* Converts a Point to world space coordinates. The result is in Points.
8.   \*/
9.   CCPoint convertToWorldSpace(**const** CCPoint& nodePoint); 
10. 
11. /\*\* 
12.  \* Converts a Point to node (local) space coordinates. The result is in Points.
13.  \* treating the returned/received node point as anchor relative.
14.  \*/
15.  CCPoint convertToNodeSpaceAR(**const** CCPoint& worldPoint); 
16. 
17. /\*\* 
18.  \* Converts a local Point to world space coordinates.The result is in Points.
19.  \* treating the returned/received node point as anchor relative.
20.  \*/
21.  CCPoint convertToWorldSpaceAR(**const** CCPoint& nodePoint);

convertToWorldSpace：把基于当前节点的本地坐标系下的坐标转换到世界坐标系中。

convertToNodeSpace：把世界坐标转换到当前节点的本地坐标系中。

这两种转换都是不考虑锚点的，都以当前节点父类的左下角的坐标为标准。另外，CCNode还提供了convertToWorldSpaceAR和convertToNodeSpaceAR。这两个方法完成同样的功能，但是它们的基准坐标是基于坐标锚点的。几乎所有的游戏引擎都会使用类似的本地坐标系而非世界坐标系来指定元素的位置。

这样做的好处是，当计算物体运动的时候，使用同一本地坐标系的元素可以作为一个子系统独立计算，最后再加上坐标系的运动即可，这是物理研究中常用的思路。例如，一个在行驶的车厢内上下跳动的人，只需要在每帧绘制的时候计算他在车厢坐标系中的位置，然后加上车的位置就可以计算出人在世界坐标系中的位置。如果使用单一的世界坐标系，人的运动轨迹就变复杂了，就涉及中学所学到的运动轨迹的合成与分解。

上面的解释也是来自Cocos2dx权威指南一书，下面我通过一个例子来说明这四个方法的理解和作用。

1、convertToNodeSpace 和 convertToWorldSpace

**\[cpp\]** [view plain][] [copy][view plain]

1.  CCSprite \*sprite1 = CCSprite::create("CloseNormal.png"); 
2.   sprite1->setPosition(ccp(20,40)); 
3.   sprite1->setAnchorPoint(ccp(0,0)); 
4.  **this**\->addChild(sprite1); //此时添加到的是世界坐标系，也就是OpenGL坐标系
5.  
6.   CCSprite \*sprite2 = CCSprite::create("CloseNormal.png"); 
7.   sprite2->setPosition(ccp(-5,-20)); 
8.   sprite2->setAnchorPoint(ccp(1,1)); 
9.  **this**\->addChild(sprite2); //此时添加到的是世界坐标系，也就是OpenGL坐标系
10. 
11. //将 sprite2 这个节点的坐标ccp(-5,-20) 转换为 sprite1节点 下的本地(节点)坐标系统的 位置坐标
12.  CCPoint point1 = sprite1->convertToNodeSpace(sprite2->getPosition()); 
13. 
14. //将 sprite2 这个节点的坐标ccp(-5,-20) 转换为 sprite1节点 下的世界坐标系统的 位置坐标
15.  CCPoint point2 = sprite1->convertToWorldSpace(sprite2->getPosition()); 
16. 
17.  CCLog("position = (%f,%f)",point1.x,point1.y); 
18.  CCLog("position = (%f,%f)",point2.x,point2.y);

运行结果：

**\[cpp\]** [view plain][] [copy][view plain]

1.  Cocos2d: position = (-25.000000,-60.000000) 
2.  Cocos2d: position = (15.000000,20.000000)

![SouthEast][]  ![SouthEast 1][]

下面解释一下：我们添加了两个节点sprite1（node1），sprite2（node2）。

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

相当于我们将sprite2这个节点添加到（实际没有添加，只是这样理解）sprite1这个节点上，那么就需要使用sprite1这个节点的节点坐标系统，这个节点的节点坐标系统的原点在（20，40），而sprite1的坐标是（-5，-20），那么经过变换之后，sprite1的坐标就是（-25，-60）。

![SouthEast 2][]

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

此时的变换是将sprite2的坐标转换到sprite1的世界坐标系下，而其中世界坐标系是没有变化的，始终都是和OpenGL等同，只不过sprite2在变换的时候将sprite1作为了”参照“而已。所以变换之后sprite2的坐标为：（15，20）

通俗一点理解就是，sprite2的坐标在sprite1节点左下角（原点）坐标的基础上加上sprite2的坐标（也即基于sprite1原点的平移，平移坐标就是sprite1的ccp（-5，-20））就可以得到sprite2变换后的坐标：（15，20）=sprite1原点坐标（20，40）+ 平移（-5，-20）

![SouthEast 3][]

2、convertToNodeSpaceAR 和 convertToWorldSpaceAR

注意到这两个方法只不过增加了AR的约束，也即锚点。其意思是：修改变换的基准。这样理解：

convertToNodeSpaceAR，就是将节点坐标系的坐标原点修改在其锚点位置。（convertToNodeSpace 节点坐标系的原点位置是其左下角）

convertToWorldSpaceAR，就是在变换的时候将参照坐标修改到其锚点位置。（convertToWorldSpace 参照坐标是在其左下角）

下面给出一个例子说明一下这两个方法：

**\[cpp\]** [view plain][] [copy][view plain]

1.  CCSprite \*sprite1 = CCSprite::create("CloseNormal.png"); 
2.   sprite1->setPosition(ccp(100,100)); 
3.   sprite1->setAnchorPoint(ccp(0.5,0.5)); 
4.  **this**\->addChild(sprite1); 
5.  
6.   CCSprite \*sprite2 = CCSprite::create("CloseNormal.png"); 
7.   sprite2->setPosition(ccp(-5,-20)); 
8.   sprite2->setAnchorPoint(ccp(1,1)); 
9.  **this**\->addChild(sprite2); 
10. 
11.  CCPoint point3 = sprite1->convertToNodeSpaceAR(sprite2->getPosition()); 
12.  CCPoint point4 = sprite1->convertToWorldSpaceAR(sprite2->getPosition()); 
13. 
14.  CCLog("position = (%f,%f)",point3.x,point3.y); 
15.  CCLog("position = (%f,%f)",point4.x,point4.y);

运行结果：

**\[cpp\]** [view plain][] [copy][view plain]

1.  Cocos2d: position = (-105.000000,-120.000000) 
2.  Cocos2d: position = (95.000000,80.000000)

首先关于  convertToNodeSpaceAR 我们可以用下面这个图来看。

sprite1节点的节点坐标系原点现在变成节点的锚点所在位置，在这个位置建立一个坐标系，那么就可以确定sprite2转换到这个节点坐标系所在的位置了。  
![SouthEast 4][]

而关于 convertToWorldSpaceAR 其实其变换和 convertToWorldSpace 是十分类似的，只不过其原点变成其节点的锚点，而不是左下角。

那么变换的过程： sprite2变换后的坐标（90，80） = sprite1的锚点（100，100） + 平移（-5，-20）。

**学习的路上,与君共勉**

[view plain]: http://blog.csdn.net/crayondeng/article/details/11936309#
[SouthEast]: https://img-blog.csdn.net/20130923170343375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY3JheW9uZGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220824/a82ab82590514a35a0015374ce97cee3.png
[SouthEast 2]: /images/20220824/93b5ee10ef8b49c0bdb824466a25daf8.png
[SouthEast 3]: /images/20220824/d765b386be234c42a7f303f607cbd214.png
[SouthEast 4]: /images/20220824/69faee8bb4794eec89dd59a06f995028.png