新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> Android开发应用 >> 【cocos2D-x学习】3.坐标系

【cocos2D-x学习】3.坐标系

查看次数15885 发表时间2013-06-05 10:36:34

【目标】:调试通过《cocos2D-x权威指南》中实例3.1.4:通过节点控制屏幕中的全体渲染对象【参考】:《cocos2D-x权威指南》 (也就是我现在正在学的书,纯入门级不解释)cocos2D-x源码: cocos2dxase_nod...

【目标】:调试通过《cocos2D-x权威指南》中实例3.1.4:通过节点控制屏幕中的全体渲染对象

【参考】:

《cocos2D-x权威指南》 (也就是我现在正在学的书,纯入门级不解释)

cocos2D-x源码: cocos2dxase_nodesCCNode.cpp

【第一部分】:helloWorld模板的超入门级架构解读心得

作为超级菜鸟,刚拿到模板代码的时候,研究了好久才找到在哪里动笔改。实际上模板架构还是很简单的:

1) main.cpp: _tWinMain 就是 win32程序入口不解释。

对比一般的WIN32程序流程:注册wndclass -> CreateWindow & ShowWindow -> 消息队列循环

可以看到这里的流程如下: CCEGLView::sharedOpenGLView(); - > CCApplication::sharedApplication()->run();

很显然,CCEGLView::sharedOpenGLView() 是创建窗口,而 CCApplication::sharedApplication()->run(); 完成绘制和消息队列功能

2) AppDelegate: tWinMain的开头会调用 AppDelegate app; 构造一个 AppDelegate 的实例,而 AppDelegate 是继承与 CCApplication 的,在CCApplication的初始化代码中,可以看到

CCApplication::CCApplication()
: m_hInstance(NULL)
, m_hAccelTable(NULL)
{
    m_hInstance    = GetModuleHandle(NULL);
    m_nAnimationInterval.QuadPart = 0;
    CC_ASSERT(! sm_pSharedApplication);
    sm_pSharedApplication = this;
}

将全局实例 sm_pSharedApplication 设置为了 AppDelegate app,所以后面调用 CCApplication::sharedApplication()->run() 实际上都是调用的 AppDelegate 的方法。

3) HelloWorldScene : AppDelegate::applicationDidFinishLaunching() 中构造并启动。可以参考其中的调用

【第二部分】:坐标系

1、 源程序无比简单,就是在helloWorld模板下,创建一个父节点CCNode anode,将场景中所有节点作为其子节点添加,然后通过对父节点的操作来达到操纵子节点的目的。

和初始代码相比,只需要将原有的 this->addChild(XXX, z); 改为 aNode->addChild(XXX, z);

2、注意到3.1.4.4 中对整体旋转的处理:

aNode->setPosition(ccp(200, 200)); 
aNode->setRotation(90.0);

只能围绕默认锚点(0,0)进行旋转,比较SB。

既然一个sprite可以通过设置锚点来实现中心旋转,那么作为父节点的CCNode为什么不可以呢?

3、坐标系

参考

http://www.cnblogs.com/pengyingh/articles/2433081.html

http://www.2cto.com/kf/201208/148630.html

http://article.ityran.com/archives/3367

这里有这几个概念,只说明我这个初学者的看法,很可能不正确。

1)世界坐标系:即原 WINDOWS 中的 MM_TEXT。原点左上,正方向为右下。根据参考文档中所述,触摸等事件使用的是该坐标系。

2)GL坐标系:即OPENGL坐标系,右手坐标系,原点左下,正方向为右上前。

【TODO:需要澄清的事实:坐标系的单位?】

在WINDOW上既然是MM_TEXT,那么就应该是以PX为单位了(实测确实如此),不过不知道android和IOS上是以什么为单位的。根据我自己的DEFY的显示情况,应该也是以PX为单位。

(PS:关于android PX DPI DENSITY DIP 可以参考 http://blog.csdn.net/zhuojiuyihu/article/details/7292669

3)节点坐标系:父节点提供给子节点的相对坐标系,自然场景可以参考物理学中的相对坐标系。其情况又可以分为两种:

3.1: 原点和正方向(不考虑锚点)

aNode->convertToWorldSpace(testPoint);
aNode->convertToNodeSpace(testPoint);

不考虑父节点 aNode 的锚点,以aNode的“原设定”左下为原点,“原设定”的右上为正方向。

注意这里指的是“原设定”,这是因为父节点本身可能会旋转,如果发生旋转的话,节点坐标系也会随着旋转。

3.2: 原点和正方向(考虑锚点)

aNode->convertToWorldSpaceAR(testPoint);
aNode->convertToNodeSpaceAR(testPoint);

考虑父节点的锚点,以锚点为原点,“原设定”的右上为正方向。坐标系同样会旋转,不过旋转是以锚点为中心,所以在这个方法中,原点倒是不会随旋转而乱跑。

3.3:单位

对于节点坐标系的单位,又需要特别说明,因为会随着 setScale 而变化。

        cin >> scale;
        aNode->setScale( ((float)scale)/10 );
        CCPoint anchorPoint = aNode->getAnchorPointInPoints();
        aNode->setPosition(ccp(200, 200));
        CCPoint testPoint = ccp(10, 10);
        CCPoint nodePoint = aNode->convertToNodeSpace(testPoint);

当setscale(1) 时输出结果是:(-190, -190); 当 setScale(0.5) 时,输出结果是 (-380, -380),也就是说坐标系的单位值也变成了原来的0.5倍。

另外需要注意的是,setPosition 使用的显然不是节点坐标系,由于这里锚点设置的是默认的原点(0,0), 所以无论输入什么 scale, 其左下角原点在世界坐标系上的位置都是固定的。

这里和锚点牵扯的比较厉害,下面研究了锚点再来看一个稍微复杂一些的例子。

【第三部分:锚点】

名称还是挺形象的,我理解就是图像转换的中心点。需要注意的是,和原点并不是一个概念。

1、设置锚点的方法

第二部分提到书上 3.1.4.4 这个示例只是按照默认锚点旋转,对于图像旋转而言,并不是很好用。

书上有这样一句话:“只有CCNode节点使用贴图的情况下,锚点才有意义。”

不过在某些情况下,一个本身无贴图的CCNode节点,可能是作为几个有贴图的子节点的集中管理器出现的,那么提供一个锚点来进行操作还是挺有意义的。所以还是要尝试启用这个功能。现在我们的代码中的 aNode 就是这样一个CCNode,那么下面要为他设置锚点,然后再进行旋转。

如果我们直接使用一般节点的锚点设置方法是无效的:

        aNode->setAnchorPoint(ccp(0.5,0.5));
        aNode->setRotation(90.0);

会发现界面完全没有动。

查阅CCNode.cpp 源代码,可以看到

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


可以看到,在实现旋转的时候,关键的几个变量是 m_bIgnoreAnchorPointForPosition 和 m_tAnchorPointInPoints。

m_bIgnoreAnchorPointForPosition 可以通过 ignoreAnchorPointForPosition(true) 来打开,

至于 m_tAnchorPointInPoints 则需要再设置setAnchorPoint "之前"调用 setContentSize(size) 来设置 size,这是因为 m_tAnchorPointInPoints 是根据 setAnchorPoint 设置进去的相对值和 ContentSize 的值相乘得到的,而一个没有设置贴图的 CCNode , 其contentSize 是 0, 所以如果直接设置 setAnchorPoint, 会发现用 getAnchorPointInPoints 查出来的锚点值仍然是0。

具体来说,代码如下:

        CCSize size = CCDirector::sharedDirector()->getWinSize();
        aNode->ignoreAnchorPointForPosition(true);
        aNode->setContentSize(size);    //这里的aNode实际装载的是整个界面,所以size也是整个winSize
        aNode->setAnchorPoint(ccp(0.5,0.5));
        aNode->setRotation(90.0);

这样就可以实现旋转了。

可以看到这样设置锚点还挺麻烦的,肯定不是最好的方法,我看到后面scene节点和layer节点设置要容易的多,可能是更好的办法。

2. 锚点、旋转和节点坐标系

缩放和坐标系前面讨论过了,这里主要讨论旋转。实际上,节点坐标系是随着节点一起旋转的。只看一个例子,基本上就可以理解了:

        aNode->ignoreAnchorPointForPosition(true);
        aNode->setContentSize(size);
        aNode->setAnchorPoint(ccp(0.5,0.5));

        CCPoint anchorPoint = aNode->getAnchorPointInPoints();
        cout << "x = " << anchorPoint.x  << "; y = " << anchorPoint.y << endl;
        aNode->setPosition(ccp(200, 200));
        aNode->setRotation(90.0);

        CCPoint testPoint = ccp(10, 10);
        CCPoint nodePoint = aNode->convertToNodeSpace(testPoint);
        cout << "node point x = "<< nodePoint.x << "; y = " << nodePoint.y << endl;

输出的结果是 x = 590; y = -270 (辅助信息:eglView->setFrameSize(480, 320);) 容易看到坐标轴实际上随着图片转动了

 


(转发请注明转自:学PHP)    


  相关推荐




  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: