Page 1 of 1
Card Flip
Posted: Thu Oct 15, 2020 12:32 pm
by 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.
Re: Card Flip
Posted: Thu Oct 15, 2020 10:48 pm
by 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?
Re: Card Flip
Posted: Fri Oct 16, 2020 1:58 am
by nananame
first, if you define a transform you use with:
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.
Re: Card Flip
Posted: Fri Oct 16, 2020 9:53 am
by 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.
Re: Card Flip
Posted: Fri Oct 16, 2020 10:46 am
by 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
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.
Re: Card Flip
Posted: Fri Oct 16, 2020 4:11 pm
by Alex
galadain wrote: ↑Thu Oct 15, 2020 10:48 pm
... 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)
"?!"
Re: Card Flip
Posted: Fri Oct 16, 2020 4:18 pm
by 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.
Re: Card Flip
Posted: Mon Oct 19, 2020 12:42 pm
by 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
Re: Card Flip
Posted: Mon Oct 19, 2020 1:36 pm
by Alex
Try to positioning the card using 'pos' and 'anchor' instead of 'align' then.