Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Playing Card Flip Effect — Gideros Forum

Playing Card Flip Effect

drewfgdrewfg Member
edited June 2013 in General questions
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?

Comments

  • ar2rsawseenar2rsawseen Maintainer
    edited 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
  • drewfgdrewfg Member
    @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
  • ar2rsawseenar2rsawseen Maintainer
    edited 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)
  • drewfgdrewfg Member
    @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

    Likes: plicatibu

    +1 -1 (+1 / -0 )Share on Facebook
  • john26john26 Maintainer
    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.

    Likes: plicatibu

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.