How to flip a card with cocos2d-x?

@yagoub not better than http://gameit.ro/2014/04/card-flipping-effect-using-cocos2d-x-without-fisheye-distortion/

If I’ll find something I will post here.

Ok, thanks

The “eye vector” refers to the view vector of camera. If you are working on 2.x version, you can use the following code

float x,y,z;
getCamera()->getEye(&x,&y,&z);

Then based on the vector, you could calculate the angle to know whether the card is in front or back side.
In 3.x, the implementation is a little bit different because there is no Camera. However, the concept is the same.

[Shameless advertisement] If you want to see the result, you may check my app via following video
youtu.be/IT3lUSxYeDU?t=10s

or play it if you like (http://bit.ly/1o5cGho)

Hi I’m resuming this topic because the problem is still actual.
The actual cocos version is 3.8.1, can I flip a card without fisheye if the card is in the top right corner of the screen? I thiught using the new camera system, so I have a sprite in (0,0) and a camera pointing to that sprite and positioned to (0,0,800), what is rendered by the camera goes in the center of the screen, can i move this rendered object in another position?
thanks

Here is my humble solution. I create fake flip animation, by transforming sprite’s mesh.


Take a look on FakeRotateX and FakeRotateY

Demo: https://www.dropbox.com/s/64y0uuj02quextl/cards.webm

1 Like

Hi,your can use two picture to simulator this,one for front,one for back.then, put them as same as one card,when you need to flip you can flip two.

Hi Capone,

I have been trying to implement your solution FakeRotateX in my project but I have been unable to because I am using javascript for coding and some of the objects and functions you are using do not exist in JS (getPolygonInfo, calculateAngles,…).
Could you please let me know if you know how to implement your custom actions in Javascript code?

Thank you very much in advance.

calculateAngles() its simple function, you can reproduce it on JS. But getPolygonInfo() more complicated, it returns array of sprite’s vertices. As i know JS engine use C++ sources, you can modify them by adding custom methods and then create binding from C++ to JS. Maybe this links will help
http://www.cocos2d-x.org/wiki/Javascript_Binding
http://www.cocos2d-x.org/wiki/How_to_bind_C++_to_Javascript
http://www.cocos2d-x.org/wiki/Cocos2d-js

When I was choosing game engine I specifically chose Cocos because it has the JS support. I guess I will have to learn C++ after all to make really cool stuff (or at least learn how to bind C++ object). :slight_smile:

Thank you very much for the quick reply. All the best!

1 Like

you should view https://www.youtube.com/watch?v=Q4fJrMvZVhI

This is how I flipped a card. Set the rotation point for the desired effect, set it to (0.0,0.0) and it
would be like book page instead of a poker card.

card->setAnchorPoint(Vec2(0.5f,0.0f));

auto rotateCallBack =[=](float value){
card->setRotation3D(Vec3(0,value,0));
};
auto runAction = ActionFloat::create(0.5f, 0.0f, 180.f, rotateCallBack);
card->runAction(runAction);