After removing CCActionOrbitCamera from the Cocos2D framework our flip animation within on of our games did no longer work. We used it to simply flip cards with a nice visual effect. After searching for another approach for a while, we thankfully found something easy which may be useful for you too.

If you do not already know, there exists some extensions for Cocos2D. These extensions are not included by default and you have to do this by your own. You will find these extension at the Cocos2D Extensions GitHub repository. Go ahead and add these extensions to your project right away.

 

As mentioned before, we need to flip animation for on of our games. It is a simple Memory®-like game where we need to flip cards. You can see the animation in the following video:

There is not much work to be done to get this nice animation. Actually, everything you have to do is the following:

1. Create a new instance of CCTransformationNode, set the position of it and add it your your CCNode .

2. Add a CCSprite  to your  transformation node, which will be responsible to show the cover and the image of your card.

3. Now the tricky part is to create an animation sequence, in which you spin the first half of the card, replace the image and spin the second part of the card. Altogether it will look smooth and nicely. For spinning the card we will manipulate the roll property of the CCTransformationNode  and for exchanging the image we are going to simply change the texture rect of the corresponding sprite.

The action for flipping the card looks like the following:

self.flipAction = [CCActionSequence actionWithArray:@[
                        [[CCActionTween alloc] initWithDuration:0.4 key:@"roll" from:0.f to:M_PI_2],
                        [CCActionCallFunc actionWithTarget:self selector:@selector(swapImage)],
                        [[CCActionTween alloc] initWithDuration:0.4 key:@"roll" from:M_PI_2 to:M_PI]]];

This action will be executed directly on your CCTransformationNode  instance. Additionally, we created a subclass of CCSprite  which represents our card. The method swapImage  will be implemented within this class:

- (void) swapImage
{
  if(cardFacePosition == kFaceDown)
  {
    CCSpriteFrame *frame = [CCSpriteFrame frameWithImageNamed:@"card_cover.png"];
    self.textureRect = frame.rect;
  }
  else
  {
    CCSpriteFrame *frame = [CCSpriteFrame frameWithImageNamed:@"card_image.png"];
    self.textureRect = frame.rect;
  }
}

All you have to do, is to manage the state of the card (if you want to show the cover or the card image) and execute the corresponding flip action methods.