5
\$\begingroup\$

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

Improve this question
\$\endgroup\$
5
  • \$\begingroup\$ Not an answer, but in css3playground.com/flip-card.php they do exactly what you are asking for (mid-right example) using CSS3. Perhaps looking at the source code you can get some inspiration! \$\endgroup\$
    – Dan
    Apr 10, 2013 at 12:21
  • \$\begingroup\$ 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). \$\endgroup\$
    – Polar
    Apr 10, 2013 at 13:02
  • \$\begingroup\$ 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. \$\endgroup\$
    – ChildhoodAndy
    Apr 10, 2013 at 14:18
  • \$\begingroup\$ Have a look at this example for inspiration: mypageflip.com/demos/xml-basic/default.html note the bending effect is faked; it's a gradient on a standard flat image of the flipped side. \$\endgroup\$
    – congusbongus
    Apr 11, 2013 at 0:13
  • \$\begingroup\$ @CongXu Yes, it's the very effect that i want! \$\endgroup\$
    – ChildhoodAndy
    Apr 11, 2013 at 2:33

1 Answer 1

Reset to default
3
\$\begingroup\$

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.
Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ 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. \$\endgroup\$
    – ChildhoodAndy
    Apr 10, 2013 at 14:26
  • \$\begingroup\$ Very useful suggestion in num2.But Could you give a sample code to explain that?I'm a little confused... \$\endgroup\$
    – ChildhoodAndy
    Apr 10, 2013 at 14:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .