Animating a card flip

Getting Started Newbie Questions
#1

I’m totally a noob, so forgive me, but I’m banging my head against the wall trying to figure this out.

This is only a code snippet, because everything else works and I’m just trying to get a card to appear to flip by scaling it. (Unless someone can come up with a better way?)

–
local notFinishedFlipping = true
local lastTime = system.getTimer()
local scale = 1.0

function rotate()
print(“Should be scaling”)
tileBackImage.xScale = scale

end

while (notFinishedFlipping) do
local curTime = system.getTimer()

if (scale <= 0.01) then
notFinishedFlipping = false
elseif (curTime - lastTime >= 30) then
rotate()
scale = scale - .05
lastTime = curTime
print(scale)
end

end

Here’s what I don’t get. The timer works, and the all of the prints do what I expect… except the image doesn’t scale till the last frame. It goes from full to a thin sliver in one jump, despite the “Should be scaling” being spat out to console 20ish times.

I am completely and utterly baffled. [import]uid: 37122 topic_id: 8163 reply_id: 308163[/import]

#2

Edit: Tried editing above, but getting errors from the board. For ease of legibility I’m repasting the code with the appropriate forum syntax:

[blockcode]

local notFinishedFlipping = true
local lastTime = system.getTimer()
local scale = 1.0

function rotate()
print(“Should be scaling”)
tileBackImage.xScale = scale

end

while (notFinishedFlipping) do
local curTime = system.getTimer()

if (scale <= 0.01) then
notFinishedFlipping = false
elseif (curTime - lastTime >= 30) then
rotate()
scale = scale - .05
lastTime = curTime
print(scale)
end

end

[/blockcode]
[import]uid: 37122 topic_id: 8163 reply_id: 29085[/import]

#3

I’m just trying to get a card to appear to flip by scaling it. (Unless someone can come up with a better way?)

“Better” is a relative term, depending on what you want. Is the easiest method better, or the most convincing appearance?

Animating scale is the easiest way, but it also won’t look very convincing because the card’s perspective should change while it flips. Maybe the flip will be fast enough that nobody will notice, I dunno.

In my current game the tiles flip, and I simply drew the frames of animation by hand (well, I used Flash) and put them together into a spritesheet:
http://www.youtube.com/watch?v=wHYIhxUaHO0 [import]uid: 12108 topic_id: 8163 reply_id: 29145[/import]

#4

Thanks for that! It was really helpful. I think I’ll move to spritesheet at some later point in development.

In the meantime though, I’m an idiot and figured out how to make my method work.

It’s as simple as using Transition.to. First off, I didn’t realize Transition.to lets you specify a delay in the parameters (I was building my own timer to fix my problems) and secondly, I didn’t realize it could modify ANY and ALL of the parameters of an image.

So the solution, instead of being 30 lines of code with loops that don’t work turns into 3:

[blockcode]
self.tileFrontImage.xScale = .001
transition.to(self.tileBackImage, {time = 125, xScale = .001})
transition.to(self.tileFrontImage,{time = 125, delay = 130, xScale = 1})
[/blockcode]

It doesn’t look as good as your spritesheet, but it gets the job done for now, especially since I flip it for a split second. [import]uid: 37122 topic_id: 8163 reply_id: 29153[/import]

#5

Yes, that’s how I would do it too.

In case you didn’t figure it out already, your original code didn’t work because the code was all executed within a single frame. So while the scale was reduced step by step by the for loop, the image was not refreshed until the for loop was completed. You would have needed to modify it to reduce the scale each time you have an “EnterFrame” event.

I believe you can also try some of the different easing methods to get a different feel for your flipping. Like: http://developer.anscamobile.com/node/2506 [import]uid: 35852 topic_id: 8163 reply_id: 29530[/import]

#6

the one problem with this, is that the back of the card doesn’t really disappear. the xScale=0.001 leaves a single line from the back of the card.

is there a way to make it disappear completely, when the ‘front of the card’ appears?

thx! [import]uid: 147360 topic_id: 8163 reply_id: 105147[/import]

#7

change alpha… [import]uid: 86417 topic_id: 8163 reply_id: 105149[/import]

#8

AWESOME! thanks! [import]uid: 147360 topic_id: 8163 reply_id: 105171[/import]

#9

Here’s how I did it, expanding on gigaflop’s example.

[code]
local cardFront = display.newGroup()
local cardBack = display.newGroup()

– create card front
local cardFrontBG = display.newImageRect(“card_bg.png”,300,400)
cardFrontBG:setFillColor(255,100,255,255)
cardFrontBG:setReferencePoint(display.TopCenterReferencePoint)
cardFrontBG.x = display.contentWidth * 0.5
cardFrontBG.y = 54

local textFront = display.newText(“LOOKING AT THE FRONT OF TH ECARD”, 0, 0, 0, 0, native.systemFont, 14)
textFront:setReferencePoint(display.TopCenterReferencePoint)
textFront:setTextColor(0,0,0,255)
textFront.x = cardFrontBG.x
textFront.y = 100

cardFront:insert(cardFrontBG)
cardFront:insert(textFront)

– create card back
local cardBackBG = display.newImageRect(“card_bg.png”,300,400)
cardBackBG:setFillColor(100,255,255,255)
cardBackBG:setReferencePoint(display.TopCenterReferencePoint)
cardBackBG.x = display.contentWidth * 0.5
cardBackBG.y = 54

local textBack = display.newText(“LOOKING AT THE BACK OF THE CARD”, 0, 0, 0, 0, native.systemFont, 14)
textBack:setReferencePoint(display.TopCenterReferencePoint)
textBack:setTextColor(0,0,0,255)
textBack.x = cardBackBG.x
textBack.y = 100

cardBack:insert(cardBackBG)
cardBack:insert(textBack)

cardBack.isVisible = false

– flip stuff
local cardFlipTime = 150
local showCardFront – forward ref

function onCompleteShowCardBack()
print(“showing back of card”)
cardFront.isVisible = false
timer.performWithDelay (1000, showCardFront)
end

function onCompleteShowCardFront()
print(“showing front of card”)
cardBack.isVisible = false
timer.performWithDelay (1000, showCardBack)
end

function showCardBack()
cardFront.xScale = 1.0
cardBack.xScale = 0.001
cardBack.isVisible = true
transition.to(cardFront,{time = cardFlipTime, xScale = 0.001})
transition.to(cardBack,{time = cardFlipTime, delay=cardFlipTime, xScale = 1.0, onComplete=onCompleteShowCardBack})
end

function showCardFront()
cardFront.xScale = 0.001
cardBack.xScale = 1.0
cardFront.isVisible = true
transition.to(cardBack,{time = cardFlipTime, xScale = 0.001})
transition.to(cardFront,{time = cardFlipTime, delay=cardFlipTime, xScale = 1.0, onComplete=onCompleteShowCardFront})
end

– make sure objects are inserted into the groups before changing any of the properties
cardFront:setReferencePoint(display.CenterReferencePoint)
cardBack:setReferencePoint(display.CenterReferencePoint)
timer.performWithDelay (1000, showCardBack)
[/code] [import]uid: 48658 topic_id: 8163 reply_id: 115939[/import]