Orthographic projecttion for card flip effect

I’ve done a lot of searching, but no result.

I want to implement a card flip effect for cards in different positions on the screen (cocos2d-x 3.0 alpha). I tried both FlipX3D and Orbit Camera, but they both have a z-center in the middle of the screen, so cards in different positions have a different angle of rotation. I don’t want this effect.

If I set projection to _2D, then I have no depth effect at all, and I want it to be.

I guess the best solution will be to set orthographic projection. I tried changing fov-y and setting camera eye, but my knowledge in this field is too week and I failed.

Any help, guys?

1 Like

hi,
i don’t know what do you want to do :slight_smile: but in a my game, i have done a simple flip card effect. simply, if the cover is foreground:
scale cover X from 1 to 0
hide cover and show face with scale X setted at 0
scale face from 0 to 1.
this is a old school flip card :slight_smile:

byz

Artem Demyanov wrote:

I’ve done a lot of searching, but no result.
>
I want to implement a card flip effect for cards in different positions on the screen (cocos2d-x 3.0 alpha). I tried both FlipX3D and Orbit Camera, but they both have a z-center in the middle of the screen, so cards in different positions have a different angle of rotation. I don’t want this effect.
>
If I set projection to _2D, then I have no depth effect at all, and I want it to be.
>
I guess the best solution will be to set orthographic projection. I tried changing fov-y and setting camera eye, but my knowledge in this field is too week and I failed.
>
Any help, guys?

Thanks, Stefano

This is the first approach I applied :slight_smile: You can make even more realistic by using EaseIn and EaseOut.
But it doesn’t have a depth effect (3d perspective) during rotation. I want this effect and I want it to be same for all cards despite their position on the screen.

@Artem,
I think you are looking something like this. :wink:
Flip Card Demo

Hey, Paras

Thank you for posting. The upper row is exactly what I’m trying to achieve! And actually I can, with an OrbitCamera action :slight_smile:

The bottom row hovewer is what I’m trying to avoid - their animation is not the same as upper, it is directed to the center of the screen - take a look at the upper and lower edges of the cards.

Any suggestions?

Artem Demyanov wrote:

Hey, Paras
>
Thank you for posting. The upper row is exactly what I’m trying to achieve! And actually I can, with an OrbitCamera action :slight_smile:
>
The bottom row hovewer is what I’m trying to avoid - their animation is not the same as upper, it is directed to the center of the screen - take a look at the upper and lower edges of the cards.
>
Any suggestions?

Hi,
I was busy with ongoing family functions. Here is the link for the demo. I made it for some client.
https://db.tt/5yqj8IA8

Enjoy!

Thank you Paras,
Your solution is exactly the same as I used!
But once again, all cards have projections towards center of the screen during rotation. E.g. the bottom row has angle from bottom to up, and the top row from up to down. And only cards in the center rotate as I want.
I’m still unable to achieve the same effect for all cards regardless of their position

Experiencing exactly the same issue on Cocos2d-x 3.0 Alpha 1.0.

Rotating same amount of ‘deltaAngleZ’ on different X coordinate gives a different result.
Is this intended?

I can’t really say it is the intended result, but the camera is always pointed at the center of the screen

i ran to the same problem with you while ago

the above screenshot shows cards all angled at the same 45 degrees
but because the screen camera is always pointed at the center, they appears to be different angle

the default Field of view for Cocos2d is 60,

I calculated the screen position, then work out an angle for each cards, so that it appears to be the same angle TO the screen camera

the result is this

this still appears awkwards to me, as cards become stretched, the top card appears to be longer than the bottom card

If you are ok with the result, then this might work for you

If not, there is another hack, at the cost of performance

you draw your rotated card at the center of the screen onto a render texture, then you redraw it at a different location

Thanks paras.It really helpful.:slight_smile: