Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

After searching "flip card" in google and our stackexchange site, there is no result and I have no ideas about how to flip a card by a corner. I am developing a ios card game with cocos2d, in this game, i just want to touch the right-bottom corner of back face, and hold on moving towards left-up direction. With moving a little distance, the card can flip to front face. Any ideas? enter image description here

share|improve this question
Not an answer, but in they do exactly what you are asking for (mid-right example) using CSS3. Perhaps looking at the source code you can get some inspiration! – Dan Apr 10 '13 at 12:21
You could just provide animations for the card flip - I can't think of an easy way of doing that programmatically. You could look at the link that Dan gave or at the flipping mechanism provided in Cocoa (Apple-specific). – Polar Apr 10 '13 at 13:02
The examples on the link site that Dan gave is not the effect i want.But still thanks.@Polar maybe i'll go deep into the flipping mechanism in Cocoa. – ChildhoodAndy Apr 10 '13 at 14:18
Have a look at this example for inspiration: note the bending effect is faked; it's a gradient on a standard flat image of the flipped side. – congusbongus Apr 11 '13 at 0:13
@CongXu Yes, it's the very effect that i want! – ChildhoodAndy Apr 11 '13 at 2:33

Your image example doesn't fit reality for the card you have shown. You are showing the wrong corner, but that's just me pointing out little things ;)

I will give you the simplified version for being able to flip an area that's a triangle.

  1. Calculate the x and y offset from the bottom right corner. (it's the difference between the world coords of the dragged corner and the original position of the mentioned corner)
  2. Draw a similar triangular area on the bottom right corner. For U,W mapping just flip the X and Y.
share|improve this answer
1)Yes, you are right. The image i provided doesn't fit reality for the card, i simply made the picture in flashIDE, for a better understanding. – ChildhoodAndy Apr 10 '13 at 14:26
Very useful suggestion in num2.But Could you give a sample code to explain that?I'm a little confused... – ChildhoodAndy Apr 10 '13 at 14:33

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.