【cocos2D-x学习】5.坐标系其三——再看Cocos中的坐标系

【目标】学习cocos-2Dx 中的坐标系

【参考】：

《中文文档- Cocos2D-X中文站》 http://cocos2d.cocoachina.com/document

《【cocos2d-x官方文档】cocos2d-x坐标系详解》 http://www.ityran.com/archives/3367

《Cocos-2d 坐标系及其坐标转换》 http://blog.csdn.net/tskyfree/article/details/8292544

《CGAffineTransform Reference》 https://developer.apple.com/library/mac/#documentation/graphicsimaging/reference/CGAffineTransform/Reference/reference.html

一、入手的简单例子

这里仅讨论设置位置的坐标系，TILE地图坐标系、触屏坐标系等不在讨论范围之内。

先看一段HelloWorld的代码：

[cpp] view plain copy

CCSprite* pSprite = CCSprite::create("HelloWorld.png");
CC_BREAK_IF(! pSprite);
// Place the sprite on the center of the screen
pSprite->setPosition(ccp(size.width/2, size.height/2));
// Add the sprite to HelloWorld layer as a child layer.
this->addChild(pSprite, 0);

这段代码是在 HelloWorld 的 init 中的代码，其中 HelloWorld 是一个 CCLayer，HelloWorld.png是一张和屏幕大小(480 * 320)一样的图片，最终显示的效果是这张图片恰好占据了整个屏幕的大小，显示出来。我们就从这里开始。

1、源：图片

首先我们有一张图片，HelloWorld.png，480 * 320，这个是实际上要显示的内容的真正来源，对于坐标系的研究而言，最核心的关心，是这张图片上的某个点 (x, y)，最后映射到屏幕的什么位置。

2、子节点 -》父节点

接下来是pSprite，它是CCSprite的对象，是一个节点。在这段代码中，pSprite通过加载HelloWorld.png，获得了展示的内容纹理，在CCSprite中可以看到，他实际上就是通过 ccGLBindTexture2D 将纹理绘制了出来，并且将自己的内容区域设置成纹理的大小。

但pSprite并不是我们所想要显示的全部，他只是整个界面的一部分，被加载进父节点helloWorld中。这个动作是由addChild完成的，而具体摆放在父节点的什么位置呢？pSprite 设置了自己的位置 setPosition。不过注意到这个setPosition是在 addChild之前，也就是说，pSprite在还不知道自己的父亲在什么地方的时候，就已经设置好自己的位置了。因此可以猜测，这个Position是与父节点相对独立的。

3、根节点 -》世界

HelloWorld这个根节点在加载了所有的子布局之后，对他而言，已经没有父节点了，那么就需要把自己显示在屏幕上，这一步的变换就是从自己的坐标系映射向屏幕。不过在cocos之中，目前我还没有看到类似于 glFrustum 这样的透视裁剪设置（毕竟移动设备总是全屏显示的），所以实际上世界坐标系到屏幕坐标系的映射基本是固定的，这里就合一了。

4、对流程的总结

子节点坐标系 -> 父节点坐标系 -> ………… -> 根节点的坐标系 -> 世界坐标系

在节点中的位置在父节点中的位置在根节点中的位置在世界中的位置

二、从CCNode分析坐标系的变换

1、齐次变换矩阵 CCAffineTransform

根据从OpenGL中的经验可以知道，坐标系的切换的核心，就是变换矩阵。在cocos中，有个类是专门用来表示这样的矩阵的，就是 CCAffineTransform。由于cocos2D是一个二维引擎，所以坐标是二维的，那么齐次变换矩阵就应该是3*3的，所以 CCAffineTransform 的矩阵如下（函数可见 __CCAffineTransformMake() ）：

（式2-1）

需要注意的是这个矩阵和《4.坐标系其二——OpenGL中的坐标系》中的变换矩阵的表示方式不同，两者成转置关系，所以这里的矩阵是右乘坐标点的（函数代码可见 __CCPointApplyAffineTransform(const CCPoint& point, const CCAffineTransform& t) ）：

（式2-2）

【这个类，我有一个地方没有弄明白，就是 CCAffineTransformTranslate 这个函数实际上是左乘了位移矩阵，转置之后，就相当于在第四节中的齐次矩阵右乘了位移矩阵，相当于先进行位移，再进行剩余变换，不过幸好我们这里不需要涉及到这个方法】

2、节点的变换矩阵 nodeToParentTransform

对于子节点中的坐标(x, y) ，到父节点坐标系中的位置 (x', y') ，这个变换矩阵，在CCNode 中，是用 nodeToParentTransform 来获取的。这就是一个 CCAffineTransform 矩阵，那么里面的值到底是多少呢？我们可以具体看代码：

[cpp] view plain copy

CCAffineTransform CCNode::nodeToParentTransform(void)
{
if (m_bIsTransformDirty)
{
// Translate values
float x = m_tPosition.x;
float y = m_tPosition.y;
if (m_bIgnoreAnchorPointForPosition)
{
x += m_tAnchorPointInPoints.x;
y += m_tAnchorPointInPoints.y;
}
// Rotation values
float c = 1, s = 0;
if (m_fRotation)
{
float radians = -CC_DEGREES_TO_RADIANS(m_fRotation);
c = cosf(radians);
s = sinf(radians);
}
bool needsSkewMatrix = ( m_fSkewX || m_fSkewY );
// optimization:
// inline anchor point calculation if skew is not needed
if (! needsSkewMatrix && !m_tAnchorPointInPoints.equals(CCPointZero))
{
x += c * -m_tAnchorPointInPoints.x * m_fScaleX + -s * -m_tAnchorPointInPoints.y * m_fScaleY;
y += s * -m_tAnchorPointInPoints.x * m_fScaleX + c * -m_tAnchorPointInPoints.y * m_fScaleY;
}
// Build Transform Matrix
m_tTransform = CCAffineTransformMake( c * m_fScaleX, s * m_fScaleX,
-s * m_fScaleY, c * m_fScaleY,
x, y );
// XXX: Try to inline skew
// If skew is needed, apply skew and then anchor point
if (needsSkewMatrix)
{
......// skew 这一段没有研究，因为暂时还用不到这个变换
}
m_bIsTransformDirty = false;
}
return m_tTransform;
}

代码本身并没有难解之处，现在假定设定的Position是 (Px, Py)，锚点是 (Ax, Ay)，旋转的角度是β°，缩放的比例是(Sx, Sy)，needsSkewMatrix = false，对于CCSprite来说m_bIgnoreAnchorPointForPosition = false，（Layer中是true）。那么生成的矩阵是

（式2-3）

注意我这里把这个矩阵分解成了四个矩阵相乘，下面来看看这样做的道理。不过这里涉及到锚点，那么先对这个概念加以评述。

3、锚点

锚点的坐标是未变换前的坐标系下的坐标值（现在说有点抽象，所谓的变换就是缩放、旋转这种）。它是缩放、旋转等变换的中心点。从图像的展示效果上来看，如果锚点是(x, y)，则指定的是图片中(x, y)坐标的点与节点指定的position重合。

在cocos中，锚点不是直接设定的，而是设定一个比例，比如 (0.3, 0.5)，然后在CCNode中，再根据内容大小 contentSize ，去乘以这个比例，确定锚点的真实坐标。这就是为什么在《3.坐标系》中说到要使得锚点的设定有效，必须要设定content大小的原因，如果 contentSize 一直是0，那么无论你比例设置的是多少，锚点都始终在 CCPointZero。

4、子节点 -> 父节点

根据上面的分析，可以将子节点坐标系到父节点坐标系的变换分解为以下几个动作，这里需要注意的是坐标系和坐标系中的内容之间相对独立的关系：

（1）子节点的原点移动到锚点的位置，方便后面基于锚点的变换，这样原来坐标系下的坐标 (Ax, Ay)，在新的坐标系下就成了(0, 0)

（2）在新的坐标系下进行缩放（这一步和3可以调换位置），缩放前的点 (1,1) ，缩放后成了 (Sx, Sy)

（3）在2的基础上，进行旋转，注意代码中的这样一句

[cpp] view plain copy

float radians = -CC_DEGREES_TO_RADIANS(m_fRotation);

也就是说，设置的 setRotation 的角度是 β°的话，实际应用在矩阵中的是 -β°，再注意到这个旋转矩阵的写法和OpenGL中的旋转矩阵完全一样。在默认的右手坐标系下，Z轴指向屏幕外，所以旋转正方向是逆时针，也就是逆时针旋转了 -β°，进一步，就是顺时针旋转了 β°。出于方便的原因，除了这里，本文中其他地方提到的β角度实际上都是-β。

（4）将坐标系原点移动到 (-Px, -Py)，使得原来位于原点的图像，现在的坐标变成了 (Px, Py)。

综合下来，（可以到第四节中查阅变换对应的齐次变换矩阵，实际上正好对应着式2-3分解的几个矩阵），由于递进的变换就是按照式2-1形式表示的矩阵的右乘，这样就得到了式(2-3)。

这里再回答一个上面提出的问题，即为什么锚点指示着与positon重合的图片的点：看第四步就懂了，最终摆在position上的点，是在第三步中生成的坐标系的原点，而这个点就是锚点。由于锚点在2-3步变换中都是不受影响的（旋转、缩放什么的不会改变原点），所以它就来自于第一步的平移的结果，就是对应着在第一步操作之前的坐标系下的(Ax, Ay)的点，也就是图片上(Ax, Ay)点。

这样说还有些麻烦，正向想更容易理解：图片上锚点位置点(Ax, Ay)，在第一步变换的时候成为了原点，在后续的缩放和旋转中不受影响，然后在第四步中，在新的坐标系下坐标值成了(Px, Py)，但是内容本身并不发生变化。

4、屏幕坐标系

cocos中的屏幕坐标系，原点在显示框的左下角，正方向是右上，右手坐标系，单位是像素px。

至于坐标是怎么从节点坐标系映射过来的，则很简单：如果你是根节点，假设 nodeToParentTransform = NtP，则节点中的某个点 (x, y)，对应着的屏幕上的点(x', y')有：

(x', y') = (x, y) * NtP

如果你是子节点，则 nodeToWorldTransform 是所有NtP的累乘：

[cpp] view plain copy

CCAffineTransform CCNode::nodeToWorldTransform()
{
CCAffineTransform t = this->nodeToParentTransform();
for (CCNode *p = m_pParent; p != NULL; p = p->getParent())
t = CCAffineTransformConcat(t, p->nodeToParentTransform());
return t;
}

三、锚点坐标系？

从上面的变换过程可以看到，如果把子节点到父节点的变换过程分解为两步，先平移到锚点看做第一步，则可以提取出锚点坐标系的概念。不过这个坐标系本身没有直接获取变换矩阵的方法，所以存在感并不强烈。不过有个方法 convertToNodeSpaceAR，用来将一个世界坐标系下的点 (x', y')，转换为这个所谓锚点坐标系下的坐标值 (x, y) 的方法。

这个方法的实现相当简单，毕竟所谓的锚点坐标系也只是简单平移得到的：

[cpp] view plain copy

CCPoint CCNode::convertToNodeSpaceAR(const CCPoint& worldPoint)
{
CCPoint nodePoint = convertToNodeSpace(worldPoint);
return ccpSub(nodePoint, m_tAnchorPointInPoints);
}

必须要指出的是，所有目前我已知的，变换中涉及到坐标的，如 setPosition等，都是在节点坐标系下的值，和锚点本身并没有关系。

四、Z轴

这一段是题外话，在 addChild中设定的 zOrder，是值越小，越在下面，这个和Z轴指向屏幕外是一样的。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。