cocos2dx实现翻书效果。

因为项目需求，需要使用cocos实现3d翻书的效果，刚开始确实没有什么思路，cocos2d做3d的效果这不是开玩笑吗。但是，再难也得做啊，没办法。

开始查资料，在百度，google上搜索了好几天，基本把所有的文章都翻遍了，根本没有人实现过，好吧，我承认有点虚了，这可咋办。

后来想到cocos2dx的例子里有个类似的效果，不过那个是个action，后来看了看感觉还可以，只是效果和我的需求有点差异，但终归是找到了实现的思路，于是开始看cocos2dx的源码，主要用到的是cocos的网格动画，涉及到以下几个文件：

CCGrid.h /cpp :网格数据及渲染，包括基本网格数据和3D网格数据，这是数据的基础。

CCActionGrid.h /cpp :网格基本动画，这是动画的基础。

CCActionGrid3D.h/cpp: 3D网格基本动画，这是3D网格动画的基础。

CCActionTiledGrid.h / cpp :网格衍生动画，这是最终的特效实现。

咱们这里主要用到CCGrid.h进行渲染，其他三个是action的实现。

这里插一句，在此之前，我曾经还想用遮罩去实现类似的翻书效果，因为android上类似效果的实现就是实用遮罩的，可是在cocos中这种方法行不通，最终放弃了。

看CCActionPageTurn3d这个类，cocos的翻页效果的实现就是在这个类中实现的，在这个类中有个update()函数:

/*

 * Update each tick

 * Time is the percentage of the way through the duration

 */

voidCCPageTurn3D::update(float time)

{

    float tt =MAX(0, time -0.25f);

    float deltaAy = (tt * tt *500);

    float ay = -100 - deltaAy;

    

    float deltaTheta = - (float)M_PI_2 *sqrtf( time) ;

    float theta =/*0.01f */ + (float)M_PI_2 +deltaTheta;

    

    float sinTheta =sinf(theta);

    float cosTheta =cosf(theta);

    

    for (int i =0; i <=m_sGridSize.width; ++i)

    {

        for (int j =0; j <=m_sGridSize.height; ++j)

        {

           // Get original vertex

            ccVertex3F p = originalVertex(ccp(i ,j));

            

            float R = sqrtf((p.x * p.x) + ((p.y - ay) * (p.y - ay)));

            float r = R * sinTheta;

            float alpha = asinf( p.x / R );

            float beta = alpha / sinTheta;

            float cosBeta = cosf( beta );

            

           // If beta > PI then we've wrapped around the cone

           // Reduce the radius to stop these points interfering with others

            if (beta <= M_PI)

            {

                p.x = ( r *sinf(beta));

            }

            else

            {

               // Force X = 0 to stop wrapped

                // points

                p.x =0;

            }

 

            p.y = ( R + ay - ( r * (1 - cosBeta) * sinTheta));

 

           // We scale z here to avoid the animation being

           // too much bigger than the screen due to perspective transform

            p.z = (r * (1 - cosBeta ) * cosTheta) /7;// "100" didn't work for

 

           //    Stop z coord from dropping beneath underlying page in a transition

           // issue #751

            if( p.z < 0.5f )

            {

                p.z =0.5f;

            }

            

           // Set new coords

            setVertex(ccp(i, j), p);

            

        }

    }

}

刚开始看这个，完全不知所云，一堆三角函数，，简直了，后来找了好久，找到一篇论文

正好把源码解释得一清二楚，论文的链接为：http://www.parc.com/content/attachments/turning-pages-3D.pdf

看完之后才明白，原来是建立了一个数学模型，通过数学模型去计算每个顶点在变换过程中的位置，明白了。到现在才理解大学时老师说的那句话，数学对编程来说很重要。

回到主题，我们要实现的是类似翻书的效果，通过上面的算法，得到的效果和我的需求有点差异，既然他是想象成一个锥体的运到，我们可以想象成一个圆柱体的运到，通过改变圆柱体轴心的位置，来实现翻动的效果，不多说了，直接上源码：

voidPageTurn::calculateHorizontalVertexPoints(float offsetX)

{

    float theta = (GLfloat)(M_PI /6.0f);

    float R =50;

    float b = (m_pBgSprite->getContentSize().width - offsetX *1.4f) *sinf(theta);

    

    

    

    for (int i =0; i <=m_sGridSize.width; ++i)

    {

        for (int j =0; j <=m_sGridSize.height; ++j)

        {

           // Get original vertex

           ccVertex3F p =originalVertex(ccp(i ,j),m_pForeSprite);

            

            float x = (p.y + b) / tanf(theta);

            

            float pivotX = x + (p.x - x) * cosf(theta) * cosf(theta);

            float pivotY = pivotX * tanf(theta) - b;

            

            float l = (p.x - pivotX) / sinf(theta);

            float alpha = l / R;

            if (l >= 0) {

                if (alpha > M_PI) {

                    p.x = (GLfloat)(mHOffsetX + pivotX - R * (alpha -M_PI) *sinf(theta));

                    p.y = (GLfloat)(mHOffsetY + pivotY + R * (alpha -M_PI) *cosf(theta));

                    p.z = (GLfloat)(2 * R /9);

                }

                else if (alpha <= M_PI)

                {

                    p.x = (GLfloat)(mHOffsetX + pivotX + R *sinf(alpha) *sinf(theta));

                    p.y = (GLfloat)(mHOffsetY + pivotY - R *sinf(alpha) *cosf(theta));

                    p.z = (GLfloat)((R - R *cosf(alpha))/9);

                }

            }

            else

            {

                p.x +=mHOffsetX;

                p.y +=mHOffsetY;

            }

            

           // Set new coords

            setVertex(ccp(i, j), p,m_pForeSprite);

            

            

        }

    }

    

    for (int i =0; i <=m_sGridSize.width; ++i)

    {

        for (int j =0; j <=m_sGridSize.height; ++j)

        {

           // Get original vertex

           ccVertex3F p =originalVertex(ccp(i ,j),m_pBgSprite);

            float x = (p.y + b) / tanf(theta);

            

            float pivotX = x + (p.x - x) * cosf(theta) * cosf(theta);

            float pivotY = pivotX * tanf(theta) - b;

            

            float l = (p.x - pivotX) / sinf(theta);

            float alpha = l / R;

            if (l >= 0) {

                if (alpha > M_PI) {

                    p.x = (GLfloat)(mHOffsetX + pivotX - R * (alpha -M_PI) *sinf(theta));

                    p.y = (GLfloat)(mHOffsetY + pivotY + R * (alpha -M_PI) *cosf(theta));

                    p.z = (GLfloat)(2 * R /9);

                }

                else if (alpha <= M_PI)

                {

                    p.x = (GLfloat)(mHOffsetX + pivotX + R *sinf(alpha) *sinf(theta));

                    p.y = (GLfloat)(mHOffsetY + pivotY - R *sinf(alpha) *cosf(theta));

                    p.z = (GLfloat)((R - R *cosf(alpha))/9);

                }

            }

            else

            {

                p.x +=mHOffsetX;

                p.y +=mHOffsetY;

            }

            

            setVertex(ccp(i, j), p,m_pBgSprite);

            

            

            

        }

    }

    

    //    float R2 = 50;

    //    float offsetX2 = mTouchBegin.x - pTouch->getLocation().x;

    //    float pivotX2 = m_pForeSpriteVertical->getContentSize().height - offsetX2;

    //

    //

    //    for (int i = 0; i <= m_sGridSize.width; ++i)

    //    {

    //        for (int j = 0; j <= m_sGridSize.height; ++j)

    //        {

    //            // Get original vertex

    //            ccVertex3F p = originalVertex(ccp(i ,j),m_pForeSpriteVertical);

    //            float l = p.x - pivotX2;

    //            float alpha = l / R2;

    //            if (l >= 0) {

    //                if (alpha > M_PI) {

    //                    p.x = mVOffsetX + pivotX2 - R2 * (alpha - M_PI);

    //                    p.z = 2 * R2 / 9;

    //                    p.y = p.y + mVOffsetY;

    //                }

    //                else if (alpha <= M_PI)

    //                {

    //                    p.x = mVOffsetX + pivotX2 + R2 * sinf(alpha);

    //                    p.z = (R2 - R2 * cosf(alpha))/9;

    //                    p.y = p.y + mVOffsetY;

    //                }

    //            }

    //            else

    //            {

    //                p.x = p.x + mVOffsetX;

    //                p.y = p.y + mVOffsetY;

    //            }

    //

    //

    //            // Set new coords

    //            setVertex(ccp(i, j), p,m_pForeSpriteVertical);

    //

    //

    //        }

    //    }

    //

    //    for (int i = 0; i <= m_sGridSize.width; ++i)

    //    {

    //        for (int j = 0; j <= m_sGridSize.height; ++j)

    //        {

    //            // Get original vertex

    //            ccVertex3F p = originalVertex(ccp(i ,j),m_pBgSpriteVertical);

    //            float l = p.x - pivotX2;

    //            float alpha = l / R2;

    //            if (l >= 0) {

    //                if (alpha > M_PI) {

    //                    p.x = mVOffsetX + pivotX2 - R2 * (alpha - M_PI);

    //                    p.z = 2 * R2 / 9;

    //                    p.y = p.y + mVOffsetY;

    //                }

    //                else if (alpha <= M_PI)

    //                {

    //                    p.x = mVOffsetX + pivotX2 + R2 * sinf(alpha);

    //                    p.z = (R2 - R2 * cosf(alpha))/9;

    //                    p.y = p.y + mVOffsetY;

    //                }

    //            }

    //            else

    //            {

    //                p.x = p.x + mVOffsetX;

    //                p.y = p.y + mVOffsetY;

    //            }

    //

    //            // Set new coords

    //            setVertex(ccp(i, j), p,m_pBgSpriteVertical);

    //            

    //            

    //            

    //        }

    //    }

}

3d节点的渲染我用的是CCGridBase的子类CCGrid3D，只需要把CCGrid3DAction中渲染的部分摘出来即可，代码在cocos中都有（补充下，我用的是cocos2dx2.2.6），以下是最终效果：