Card Flip

[galadain]

I'm attempting to put together an animation with two cards that flip over. Users are shown the card backs (over the background scene), they flip, the user clicks on card front, and they both flip back over again. I've looked through the documentation and I think I need to use xzoom and ATL/Transformations. I'm at a complete loss for how to actually deploy the code.

[galadain]

Alright...Let's try this. Here is what I have so far.

Code: Select all

scene test_bg
with fade
    
show img_test1
    
    transform flip:
      xzoom -1.0

This shows the scene and the image but then nothing happens. No flip. Suggestions?

[nananame]

first, if you define a transform you use with:

Code: Select all

show image at flip

check the docs: https://www.renpy.org/doc/html/displaying_images.html

But I'd like to ask how are you intending to show this? If you want to flip a card you're acting as if it's a 3D object. Which it isn't. So no amount of zoom will help. You probably need an animation, with several frames. I'd suggest a simple atl block.

[galadain]

I definitely want a front and back to the card. Starts out on the back then flips to the front. I was unable to find a video or tutorial about ATL blocks. The documentation shows what lines can go into an ATL block (like xzoom) but doesn't really show and example of a block.

[nananame]

This is a very old post but a good tutorial for atl: viewtopic.php?t=16604

The easiest atl block, and the way you should think about any animation, is having frames. Like making a gif. If you wanted to create an animation of a card flipping as a gif you would have several images, each being a frame of the animation. For example the first image is the card back, the second image is a card slightly lifted on its side, then the card shown very thin as we only see the side, then part of front and then the front of card. A simple atl block then would be:

Code: Select all

image flipcard:
    "images/card1.png"
    0.2
    "images/card2.png"
    0.2
    "images/card3.png"
    0.2
    "images/card4.png"
    0.2
    "images/card5.png"
    0.2

So you basically define an image which consists of these 5 images which display one after another with a pause of 0.2 between them.
You use is as a regular image in your script

Code: Select all

show flipcard

These are just the basics of atl and far more can be done with parallel blocks, combining transforms and other stuff. I suggest you figure out how you want something to look and then google that. You'll find a tutorial somewhere.

[Alex]

... Suggestions?

You could try to make it like

Code: Select all

image red:
    Solid("#c00")
    size(100, 100)
    
image green:
    Solid("#0c0")
    size(100, 100)

image blue:
    Solid("#00c")
    size(100, 100)

image card red:
    "blue" # back
    linear 0.5 xzoom 0.01
    
    "red" # face
    xzoom 0.01
    linear 0.5 xzoom 1.0
    
image card green:
    "blue"
    linear 0.5 xzoom 0.01
    0.5
    "green"
    xzoom 0.01
    linear 0.5 xzoom 1.0

        
# The game starts here.

label start:
    "..."
    show card red at truecenter
    "?"
    show card green:
        align(0.75, 0.3)
    "?!"

[Imperf3kt]

xzoom will do what you want, but you haven't used it correctly.
You'll probably also want to shear the card a bit otherwise it will look unnatural.

The problem is this is your code.

Code: Select all

scene test_bg
with fade
    
show img_test1
    
    transform flip:
      xzoom -1.0

Which is not quite correct. What you want to do is define the transform, then apply it to the image. You'll also want to then show the other image and do it again but in reverse. Don't use a transform though, use an ATL block.
Maybe something like this (completely untested, numbers pulled out of thin air)

Code: Select all

image card_front = "images/cardF.jpg"
image card_back = "images/cardB.jpg"

image cardflip_BtoF:
    "card_back"
    xzoom 100
    linear 0.6 xzoom 0.0
    "card_front"
    xzoom 0.01
    linear 0.6 xzoom -100.0
   
image cardflip_FtoB:
    "card_front"
    xzoom 0.01
    linear 0.6 xzoom -100
    "card_back"
    xzoom 0.01
    linear 0.6 xzoom 100
    
    
label start:

scene test_bg
with fade
    
    show card_back
    "Oh that's a nice card"
    hide card_back
    show cardflip_BtoF

Looks like Alex beat me to it while I was typing lol.

[galadain]

This works for flipping the card in the middle of the screen

Code: Select all

image flipcard:
       "back.png"
       xalign 0.5 yalign 0.5
       linear 1 xzoom 0.1
       
       "front.png"
       xalign 0.5 yalign 0.5
       linear 1 xzoom 1.0

However, when I try to move the card to the right it no longer flips directly on the y-axis.

Code: Select all

       "back.png"
       xalign 0.75 yalign 0.5
       linear 1 xzoom 0.1
       
       "front.png"
       xalign 0.75 yalign 0.5
       linear 1 xzoom 1.0

[Alex]

Try to positioning the card using 'pos' and 'anchor' instead of 'align' then.