Cocos2dx achieves the flop effect (CCScaleTo and CCOrbitCamera)

Cocos2dx achieves the flop effect (CCScaleTo and CCOrbitCamera)

As the project needs to achieve the effect of flop, I wrote this article in the process of completion, think about it is still a bit difficult.

I have been searching for a solution on the Internet for a long time. Basically, it is a solution that uses the CCOrbitCamera Action class to simulate the flop effect.

However, I have always been unsatisfactory.

It can be implemented using the CCOrbitCamera class, but if you move the card to the top left, bottom left, or other locations not in the center of the screen, this effect will not work, and the flop location will be wrong, similar to 3D.

After searching for a long time, I finally knew why. Cocos2dX had such a sentence,

CCDirector: sharedDirector ()-> setProjection (kCCDirectorProjection3D );

This is the 3D model. Cocos2DX supports the Perspective Projection and orthogonal projection modes, so I changed kCCDirectorProjection3D to kCCDirectorProjection2D.

The flop setting is not 3D, but normal.

However, other images in the project are distorted, which cannot be tolerated.

I tried to read Cocos2dx's content about setting the setProjection function to see if I could avoid this, making the flip natural.

In the end, I failed, but it was too difficult.

I found an alternative solution to implement the flop action, and found CCScaleTo to implement it. This process is indeed quite difficult.

Below I will paste the key code of both solutions for your convenience.

1. First, use the CCOrbitCamera class to implement the flop effect (I encapsulated it into a function ).

Void HelloWorld: showObtAniUseOrbitCamera (CCSize visibleSize) {if (m_pCardFront! = NULL) {this-> removeChild (m_pCardFront);} if (m_pCardBack! = NULL) {this-> removeChild (m_pCardBack);} // The front and back sides of the card. m_pCardFront = CCSprite: create ("CardFront.png"); m_pCardBack = CCSprite :: create ("CardBack.png");/* m_pCardFront-> setPosition (ccp (visibleSize. width/2-100, visibleSize. height/2 + 100); m_pCardBack-> setPosition (ccp (visibleSize. width/2-100, visibleSize. height/2 + 100); */m_pCardFront-> setPosition (ccp (visibleSize. width/2, visibleSize. height/2); m_pCardBack-> setPosition (ccp (visibleSize. width/2, visibleSize. height/2); this-> addChild (m_pCardFront, 5); this-> addChild (m_pCardBack, 5); // animated sequence (latency, display, latency, hidden) CCSequence * pBackSeq = CCSequence: create (CCDelayTime: create (0.5f), CCShow: create (), CCDelayTime: create (0.5f), CCHide: create (), NULL); // duration, initial radius value, radius increment, initial elevation angle value, elevation angle increment, offset angle from the X axis, and incremental CCOrbitCamera * pBackCamera = CCOrbitCamera :: create (1.0f, 1, 0, 0,-90, 0, 0); CCSpawn * pSpawnBack = CCSpawn: create (pBackSeq, pBackCamera, NULL ); m_pCardBack-> runAction (pSpawnBack); // The CCSequence * pFrontSeq = CCSequence: create (CCDelayTime: create (0.5f), CCHide:: create (), CCDelayTime: create (0.5f), CCShow: create (), NULL); CCOrbitCamera * pLandCamera = CCOrbitCamera: create (1.2f, 1, 0, 0, -360, 0, 0); CCSpawn * pSpawnFront = CCSpawn: create (pFrontSeq, pLandCamera, NULL); m_pCardFront-> runAction (pSpawnFront );}

The above comments are described in detail. In fact, it is not difficult to hide the front and the back as shown on the back. This is the case if the front and the back are hidden.

Here there is a-90,-360 is the rotation angle, you can try to change to see what will happen.

Below is the running:

This is how to flip from the back to the front, but note that in "3D mode", pZ finished? http://www.bkjia.com/kf/ware/vc/ "Target =" _ blank "class =" keylink "> keys + 8671sO + keys + 8HLo6y/keys + yOe5 + keys/keys + Gz9s/WvuKz3aOss/bP1r7is921xMfpv/keys + authorization + CjxwPr7NysfS8s6q09C + 4rPdtcTH6b/2 s/bP1s 7S09bDu73ivva1vaOsy/rotate + sLro7o8L3A + rotate "brush: java;"> void HelloWorld: showObtAniUseScaleTo (CCSize visibleSize) {if (m_pCardFront! = NULL) {this-> removeChild (m_pCardFront);} if (m_pCardBack! = NULL) {this-> removeChild (m_pCardBack);} // The front and back sides of the card. m_pCardFront = CCSprite: create ("CardFront.png"); m_pCardBack = CCSprite :: create ("CardBack.png"); // reverse the card m_pCardFront-> setFlipX (true); m_pCardFront-> setPosition (ccp (visibleSize. width/2-100, visibleSize. height/2 + 100); m_pCardBack-> setPosition (ccp (visibleSize. width/2-100, visibleSize. height/2 + 100); this-> addChild (m_pCardFront, 5); this-> addChild (m_pCardBack, 5); // animation sequence (latency, hiding, latency, hide) CCSequence * pBackSeq = CCSequence: create (CCDelayTime: create (0.5f), CCHide: create (), CCDelayTime: create (0.5f), CCHide :: create (), NULL); CCScaleTo * pScaleBack = CCScaleTo: create (1.2f,-1,1); CCSpawn * pSpawnBack = CCSpawn: create (pBackSeq, pScaleBack, NULL ); m_pCardBack-> runAction (pSpawnBack); // The CCSequence * pFrontSeq = CCSequence: create (CCDelayTime: create (0.5f), CCShow:: create (), CCDelayTime: create (0.5f), CCShow: create (), NULL); CCScaleTo * pScaleFront = CCScaleTo: create (1.2f,-1, 1 ); CCSpawn * pSpawnFront = CCSpawn: create (pFrontSeq, pScaleFront, NULL); m_pCardFront-> runAction (pSpawnFront );}
Here, we need to flip the front setFlipX (true) function of the card first, and then simulate a rotation around the Y axis. If you still don't know it, please read the code and try it.

The CCScaleTo parameter is mainly set to rotate around Y. You can also try the effect in various situations. The practice is the only criterion for verifying truth. It can be set ), (1,-1) and so on.

Okay, that's almost the case.

You can try to write a HelloWord to improve your impression.