Playing Card Flip Effect

drewfg · June 2013

I am brand new to Gideros and am creating my first game. I am trying to create a simple effect for a matching game that flips a playing card from back to front and front to back when clicked on. Does anyone have any suggestions how I would accomplish this?

ar2rsawseen · June 2013

tween scale of one axis from 1 to 0, switch the cards from bottom image to top image, and tween it from 0 to 1, and you'll have a flip effect for your card

Something like this (not tested)

local card = Sprite.new()
local upwards = Bitmap.new(Texture.new("cardup.png", true))
upwards:setAnchorPoint(0.5, 0.5)
upwards:setScaleX(0)
local downwards = Bitmap.new(Texture.new("carddown.png", true))
downwards:setAnchorPoint(0.5, 0.5)
card.up = upwards
card:addChild(upwards)
card.down = downwards
card:addChild(downwards)
 
function card:flip()
    if self.upwards:getScaleX() == 0 then
        local tween = GTween.new(self.downwards, 1, {scaleX = 0})
        tween.nextTween = GTween.new(self.upwards, 1, {scaleX = 1})
    else
        local tween = GTween.new(self.upwards, 1, {scaleX = 0})
        tween.nextTween = GTween.new(self.downwards, 1, {scaleX = 1})
    end
end

drewfg · June 2013

@ar2rsawseen Thanks for your super quick response and the code you provided.

I modified the code a bit to get it working, but I am not getting the desired flip effect (more of a slide-out slide-in effect), I would think the image would need to stay positioned in the center and scale from the outsides inward on both sides, but I have no idea how to accomplish this, any help would be fantastic.

local card = Sprite.new()
local upwards = Bitmap.new(Texture.new("cardup.png", true))
upwards:setScaleX(0)
local downwards = Bitmap.new(Texture.new("carddown.png", true))
card.up = upwards
card:addChild(upwards)
card.down = downwards
card:addChild(downwards)
 
function card:flip()
    if self.up:getScaleX() == 0 then
        local tween = GTween.new(self.down, 1, {scaleX = 0})
        tween.nextTween = GTween.new(self.up, 1, {scaleX = 1})
    else
        local tween = GTween.new(self.up, 1, {scaleX = 0})
        tween.nextTween = GTween.new(self.down, 1, {scaleX = 1})
    end
end

ar2rsawseen · June 2013

@drewfg oh yes you are right

local upwards = Bitmap.new(Texture.new("cardup.png", true))
upwards:setAnchorPoint(0.5, 0.5)
upwards:setScaleX(0)
local downwards = Bitmap.new(Texture.new("carddown.png", true))
downwards:setAnchorPoint(0.5, 0.5)

drewfg · June 2013

@ar2rsawseen Thank you for your help I got it working perfectly.

Working code below in case anyone else is interested.

local card = Sprite.new()
 
local upwards = Bitmap.new(Texture.new("cardup.png", true))
upwards:setScaleX(0)
 
local downwards = Bitmap.new(Texture.new("carddown.png", true))
 
card.up = upwards
card.up:setAnchorPoint(0.5, 0.5)
card:addChild(upwards)
card.down = downwards
card.down:setAnchorPoint(0.5, 0.5)
card:addChild(downwards)
 
self:addChild(card)
 
function card:flip()
    if self.up:getScaleX() == 0 then
        local tween1 = GTween.new(self.down, 0.1, {scaleX = 0}, {})
	local tween2 = GTween.new(self.up, 0.1, {scaleX = 1}, {autoPlay = false})
	tween1.nextTween = tween2
    else
	local tween1 = GTween.new(self.up, 0.1, {scaleX = 0}, {})
	local tween2 = GTween.new(self.down, 0.1, {scaleX = 1}, {autoPlay = false})
	tween1.nextTween = tween2
    end
end

anneMurielle · May 2014

Thanks, I will use that in my new game!

john26 · May 2014

I've actually used the same technique myself for a card game. You could also experiment with easings eg ease=easing.outExponential normally looks better than linear. Also you should get used to setting onComplete=function as you probably want something to happen when the card has finished flipping.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Playing Card Flip Effect

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Playing Card Flip Effect

Comments