I need to make a card flip over, but I’m not in the 3d world, so I don’t know how to fake it. Take a card game and then deal a card face down. I want to flip the card over instead of just showing the front of the card directly.
Any suggestions on how I might do this?
I have 2 images, the front and the back of the card. The card can either flip from a side or it can flip from the middle of the card.
Regards,
Dr. A>
Just change the width of the image. That looks already pretty ok-ish. Well, you end up with a perspective which uses a infinifite small fov and infinifite huge distance (orthographic), but that’s ok I guess 
Bonus points for keeping in mind that it’s a rotation… and not linear shrinkage… uhm… sketch
does anything speak against a framestrip ? a turning card would perhaps only need 10/15 frames to look very smooth.
so you would also have no problems to fake lighting changes
etc…
does anything speak against a framestrip ?
Not really. Well, you have lot’s of cards (usually 52) and for each one lets say 10 frames… duh 
But y’know these cards should flip over rather quickly (in order to avoid annoying the user - pretty? yes! waiting? no!). So there is no real need for having em look sexy for during that half splitsecond. Quick n dirty (unfiltered) scaling should be good enough imo.
edit: hmm… you could of course cheat there a bit… a frame sheet for the backside and a blank (with changing light) for the front. The card images itself could use simple bitmask transparency… if the light change is subtle enough you wont be able to notice the wrong colors (and well real cards do reflect more light on those spots where they aren’t colored - so it’s still pretty ok).
in my FreeCellgame, when you win, I spin all of the cards off the game. To do so I scale them horizontally in a sinusoidal fashion with an AffineTransform object to imitate the effect you’re after.
I tried to the free cell game, but I have to win to see the effect. :-/
Do you have a way I can see the win effect without winning?
oNyx - I understand the image you drew. That would be looking perpendicular to the front/back of the card. When you say change the width, I’m assuming you mean to scale the face into a smaller and smaller width. My fear is that it will look like I simply squished the image - which of course I would be. As the card nears the viewer I would expect the image to shrink. The far side of the card should stretch.
This actually isn’t a card game (52 card deck) its for my daughterware game. These are memory cards. Either way, when the flip, I want them to look mostly right/nice. I am trying to be careful about using transparency and other ‘advanced’ things, as I want to ensure the game doesn’t stutter when running on a low end PC.
I develop on my 1.3 gig lap top, then test on her 200 Mhz machine. You’d be amazed at what types of things you’ll notice on a machine that slow.
Thanks,
Dr. A>
Malohkan -
I LOVE how the freecell game stops and tells you its lost the focus.l I take it you registered a focus event listener?
Regards,
Dr. A>
Applet.hasFocus() is built in to the Applet No need to register anything. Yay for Applet’s
I think I’ll make a key to flip the current card you’re dragging for fun. I’ll post back after it’s done ;D
ok I put it in! Press S to toggle the feature. When you pick up a card to move it, it will spin. Left and Right arrows will change the speed of the spin. Here’s how I do it:
//start radians at 0, make radianIncriment a small number, like, between 0 and pi
radians += radianIncriment;
double num = Math.sin(-Math.PI/2+(Math.PI*radians));
//use this AffineTransform object to draw your card:
aT.setTransform(num, 0, 0, 1, p.getX() + CARD_WIDTH/2 - CARD_WIDTH*num/2, p.getY());
Enjoy!
mal - Thanks for the code snippet!
Here’s what I ended up with after a few revisions.
totalTime = calcTotalTime();
double num = Math.abs((-2f / timeToRotate * totalTime) + 1);
afTransform.setTransform(num, 0, 0, 1, WIDTH / 2 - WIDTH * num / 2, 0);
if (totalTime < timeToRotate / 2f) {
((Graphics2D) g).drawImage(cardBackImage, afTransform, null);
} else {
if (totalTime >= timeToRotate) {
g.drawImage(cardImage, 0, 0, null);
// Notify whoever we are done with the flip
} else {
((Graphics2D) g).drawImage(cardImage, afTransform, null);
}
}
break;
I played with all sorts of sin functions. I concocted 2 ways of traversing the curves and then realized they gave different rotation appearances. At any rate I settled on this and decided it will work.
Thanks again!
Dr. A>
Awesome, I’m glad it helped!
I actually updated things a tad, since I talked to a friend about it.
We came up with an even shorter method -
double angle = Math.PI * totalTime / timeToRotate;
double num = Math.abs(Math.cos(angle));
The function you had originally is actually a cos function, so we just chopped the shifting out. Throwing in the abs() means you can increment from 0 to timeToRotate and you get the right visuals.
I ditched my linear function, since as onyx pointed out, the rotation isn’t visually linear. Using the trig, produces a nicer effect.
Dr. A>
the absolute value portion is fine, except it won’t work in my case of flipping the back and drawing the card reversed. The width is the same, though
True true. I’ve gone a bit crazy and added in the ability for the card to lift up and when it flips too.
Our card flipping needs are a bit different, but thanks to you, they both have solutions. I’ll post the 2 sided flip code with zoom/lifting for others.
Thanks for starting me off on this!
Dr. A>