cocos2dx: CCOrbitCamera realizes the spherical flipping of sprites or similar book-turning operations, and the optimization of flipping tracks

cocos2dx: CCOrbitCamera realizes the spherical flipping of sprites or similar book-turning operations, and the optimization of flipping tracks

Device/Engine: Mac(11.6)/cocos

Development tools: Xcode (13.0)

Development requirements: CCOrbitCamera realizes the spherical flipping of sprites or operations similar to flipping books, and the optimization of flipping trajectories

The requirement I want to talk about today is simply to use cocos2d to achieve the 3D flip effect. There are two methods. One is to use ScaleX to achieve the flip effect. However, this method needs to control the interval because it is a zoom operation on two sprites. Time, need to fine-tune, time-consuming; Another method is to use CCOrbitCamera function to achieve spherical flip effect.

1. The principle of ScaleX
is very simple: while the ScaleX of the sprite before flipping is reduced, the ScaleX of the sprite to be flipped is enlarged. If the timing is controlled well, there will be a 3D flipping effect visually.

//需要显示的精灵设置初始的ScaleX
cardSprite->setScaleX(0.0);

//已经显示的精灵的动作
CCScaleTo* scale1 = CCScaleTo::create(0.3, 0, 1);

The above contains 3 parameters, namely time, scalex, scaley

//需要显示的精灵的动作
CCScaleTo* scale2 = CCScaleTo::create(0.3, 1, 1);

The above contains 3 parameters, namely time, scalex, scaley

After clicking the sprite, pay attention to calling the correct action. The actual effect needs to be tested and adjusted by yourself, which is time-consuming.

2. CCOrbitCamera
code is as follows:

CCOrbitCamera* orbit1 = CCOrbitCamera::create(0.5, 1, 0, 0, 180, 0, 0);

Introduction to function parameters: time, starting radius, radius difference, starting Z angle, rotating Z angle, starting X angle, rotating X angle;

Also care needs to be taken to call the correct action for the corresponding sprite.

Note: When using this function, you must set setDepthTest to false. The reason is that you need to cancel the depth detection of OpenGL before using the grid. The result of not setting it is that the rotation effect will be stuck. It only looks halfway. You can actually try the code as follows

CCDirector::sharedDirector()->setDepthTest(false);//解决翻转轨迹问题

So far is the main code and principle of the two methods, and the specific details need to be adjusted by the ape friends.

Hope to bring you help! ! ! If you have any questions to discuss, you can comment and private message. Welcome to discuss~