"Flip card" animation

Graphics
1

I am extremely new to both Monogame and C#, so please excuse me if my question sounds stupid or the answer is apparent.

I am primarily a Java developer and am looking to convert a simple card game I wrote in JavaFX over to Monogame. I am currently trying to use the Nez framework over Monogame, but am willing to try and do this in “native” Monogame as well i.e. without Nez.

The problem I am having is… I am trying to do a “card flip” animation i.e. I have a card which is face down (back showing) and want to flip it over to show the face of the card.

In JavaFX (in 2D mode), I can perform a rotation in the Z axis, so I essentially rotate the card back image from 0 to 90 degrees, and the card front image from 270 to 360 degrees. Both rotations are done in parallel over a 250ms period. This creates the impression of the card flipping over.

I can’t seem to figure out how to do this in Monogame. From what I can see, you can’t perform a rotation in the Z axis in 2D mode.

Could someone please point me in the right direction as to how I can achieve the same “card flip” in Monogame?

Thanks!

UPDATE:

Mike (author of the Nez framework) offered a couple suggestions via email:

There are lots of ways that you could do that with MonoGame/Nez. You could create verts manually and push them through via DrawIndexedPrimitives. The Nez Batcher has methods available to manually set the verts when you draw. The Batcher also has a draw variant that lets you skew while drawing which would also do the trick for an effect like that.

If you are interest in shaders you could also just make a card shader that handles both the front and back of the card.

2

It’s in 2D, so there’s no perspective. This means the card edges won’t get larger as they turn towards you and smaller as they turn away from you. To simulate a card turning in orthographic, you can simply scale the card back on the x-axis until it reaches zero, then change to the card front (since you won’t see the back again) and scale back up from zero to one. The origin of the card must be in the centre of the card to have this work effectively.

3

If you apply a sine function to the scale during the interpolation, the speed will match an actual rotation as if it was in 3D.

4

That is correct. Slow at the start, faster in the middle and slowing towards the end.

5

Thanks for the suggestions. I will give those a try.

I also came across PrimitiveBatch in Monogame.Extended which might be another option to getting this to work.

I will experiment with the various options to see what I can get working.

Thanks!

6

@YTN PrimitiveBatch is still under construction in MonoGame.Extended. I wouldn’t advise to use it yet out of develop branch because the API might change.

7

@LithiumToast Thanks for the note. I did see that it’s still under development, but I don’t mind being an early beta tester for the feature. If I do end up using it as the final solution, then I am ok with modifying my code later if the API happens to change.

8

I tried to figure out such an animation for my card game engine but nothing I did looked good so I moved on to other things.

9

@SoundGoddess I did see that you are working on a card game. Looks pretty cool. I came across your thread(s) when I was trying to figure out drag and drop… which is the next interesting challenge :slightly_smiling:

10

Well this code is good enough for one of my games that is live on windows store. it doesn’t support touch screen yet (I’m working on it)

I haven’t gotten around to doing a tutorial yet but if you need help with the code let me know :slight_smile:

1 Like
11

@SoundGoddess Thanks for the pointers to the code. Will definitely ping you if I need a shove in the right direction :slightly_smiling: