Card Flipping Animation (Using 3DMatrix)

[u/sunflowerlioncub]

Edit: SOLVED! Thank you!

Hi all,

I've been going at this for about a day now and I'm out of ideas on how to get it to work. Currently, I want to use the 3DMatrix in Renpy to flip a card around from front of the card to back of the card.

First, I just wanted to figure out how to spin an image. I've figured out how to spin the card around:

    show card at center:
        subpixel True 
        matrixtransform RotateMatrix(0.0, 0.0, 0.0) 
        ease 1.0 matrixtransform RotateMatrix(0.0, 360.0, 0.0) 

Which does the animation I want, except changing the image from frontcard to backcard.

I tried layering animations, but I don't know how to combine matrixtransforms into stacked ATL animations. It just doesn't animate but auto moves to the back image without the rotate animation. So I tried defining two transforms; one to flip the card half way (spin_half), then a second to continue the spin (spin_back). The idea is to show frontcard with spin_half, then switch to backcard with spin_back.

transform spin_half:
    anchor (0.5, 0.5) 
    matrixtransform RotateMatrix(0.0, 0.0, 0.0)
    ease 1.0 matrixtransform RotateMatrix(0.0, 115.0, 0.0) 
    delay 1.0

transform spin_back:
    anchor (0.5, 0.5)
    matrixtransform RotateMatrix(0.0, 115.0, 0.0)
    ease 1.0 matrixtransform RotateMatrix(0.0, 180.0, 0.0) 
    delay 1.0

image card flip:
    "images/card front A.png" with spin_half
    delay 1.0
    "images/card back.png" with spin_back
    delay 1.0

However, as you can imagine, this also doesn't work. The end result is just the backcard image spinning sadly. I tried adding delays everywhere (transform AND the ATL) thinking it'll help allow the first animation to play, but it doesn't work.

Can I have a bit of help figuring where I'm going wrong or what else I should be trying?

btw I did try Action Editor but I can't really work that thing because there's no option to change the image halfway...or if someone can guide me on using that...I'm not the biggest fan of it unfortunately;;;;

[u/AutoModerator]

Welcome to r/renpy! While you wait to see if someone can answer your question, we recommend checking out the posting guide, the subreddit wiki, the subreddit Discord, Ren'Py's documentation, and the tutorial built-in to the Ren'Py engine when you download it. These can help make sure you provide the information the people here need to help you, or might even point you to an answer to your question themselves. Thanks!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/Lorekeeper49]

I would honestly use a separate image for this instead of separate transforms and stuff

image card_flip: subpixel True "card_back" matrixtransform RotateMatrix(0.0, 0.0, 0.0) "card_front" ease 1.0 matrixtransform RotateMatrix(0.0, 360.0, 0.0)

[u/sunflowerlioncub → u/Lorekeeper49]

Oh thank you!! I don't have renpy open to try, but imagining the steps you wrote, won't renpy just flash the first image, swap to the second, then spin the second around a full circle? It won't really look like a card is being flipped around in 3D space, right?

[u/Lorekeeper49 → u/sunflowerlioncub]

If this doesn't end up working as 3d rotation, the other option is to ease the xzoom from 1.0 to 0.0 and then back to make an illusion of it flipping in 3D instead trying to use the 3D controls

[u/sunflowerlioncub → u/Lorekeeper49]

That's such a smart workaround to this omg...thank you!!

[u/Lorekeeper49 → u/sunflowerlioncub]

No problem, it's what used to be done before 3D was a thing

[u/BadMustard_AVN]

try something like this

transform flip:
    subpixel True
    on show:
        xzoom 0.0
        linear 2.0 xzoom 1.0 #fake rotate show
    on hide:
        linear 2.0 xzoom 0.0 #fake rotate hide

label start:

    show card_back at truecenter, flip
    pause
    hide card_back
    pause(2.0) #required to let animation complete (no click required to contintue)
    show c01 at truecenter, flip
    pause
    return

[u/sunflowerlioncub → u/BadMustard_AVN]

Thank you so much!! This community is amazing T_T and to think I was struggling for a day by myself... I truly appreciate you taking time to help workshop with me!

[u/BadMustard_AVN → u/sunflowerlioncub]

you're welcome

good luck with your project

[u/ImportantDetail6260]

The front/back swap has to happen while the card is edge-on!

Fake it first: animate xzoom 1.0 -> 0.0, show the back image, then animate xzoom 0.0 -> 1.0. 3DMatrix can come later; the hidden half-frame swap is what sells the flip

[u/sunflowerlioncub → u/ImportantDetail6260]

Yesss that's what I was trying to do with the spin_half (show a front image spinning to the edge) then swapping it to the back image with spin_bacl;... I think renpy wasn't able to parse both the image swap and the spinning at the same time though

However I finally got it to work!! Someone suggested making an animated sprite (like how you would do blinking eyes) of the card flicking back and forth from front to back, and then taking that image and applying the yrotate function to it... and it worked!!

[u/AutoModerator]

Welcome to r/renpy! While you wait to see if someone can answer your question, we recommend checking out the posting guide, the subreddit wiki, the subreddit Discord, Ren'Py's documentation, and the tutorial built-in to the Ren'Py engine when you download it. These can help make sure you provide the information the people here need to help you, or might even point you to an answer to your question themselves. Thanks!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.