Search code examples
swiftsprite-kitcore-graphicscore-animationcoin-flipping

3D Coin Flipping Animation on SKSpriteNode


I'm currently developing a game using Swift 3 and SpriteKit. I have a coin that falls during a game that the user can collect. Right now, it falls and doesn't have any rotation or anything. I want to add a 3D spinning effect while it falls. This effect should be a rotation around the y-axis . I'm not sure how to create a 3D effect like this or if I should be using another program.

I've found what I'm looking for on another stack overflow post but it's in objective-c:

Spinning an image like a coin

I've found a way to do this (from the link) with Core Animations/ Core Graphics, but I don't know how to make it work on an SKSpriteNode.

    var coinFlip = CATransition()
    coinFlip.startProgress = 0
    coinFlip.endProgress = 1.0
    coinFlip.type = "flip"
    coinFlip.subtype = "fromRight"
    coinFlip.duration = 0.5
    coinFlip.repeatCount = 2

    yourView.layer.addAnimation(coinFlip, forKey: "transition")

This last line only works on UIViews and therefore causes errors when I try to run it on an SKSpriteNode.

If someone could explain to me how to do this and/or show me another way of creating this animation for an SKSpriteNode it would be greatly appreciated.


Solution

  • I ended up creating the spinning effect by decreasing and increasing the xScale of the coin while also changing the colorBlendFactor to make the coin seem like its darkening when the light shouldn't be hitting it.

    Here's my code:

    let scaleSequence = SKAction.sequence([SKAction.scaleX(to: 0.1, duration: 0.75), SKAction.scaleX(to: 1, duration: 0.75)])
    let darkenSequence = SKAction.sequence([SKAction.colorize(with: SKColor.black, colorBlendFactor: 0.25, duration: 0.75, SKAction.colorize(withColorBlendFactor: 0, duration: 0.75)])
    let group = SKAction.group([scaleSequence, darkenSequence])
    fallingCoin.run(SKAction.repeatForever(group))
    

    It's a little messy, but it works. Simply put, it uses SKAction.group so the actions run simultaneously and I put the SKAction.sequences of darkening the colour and "turning" the coin in the group so each sequence runs simultaneously. Also note that all the durations are 0.75. If you use this code, make sure all the durations are the same so the effect isn't ruined.

    To make the coin look like its flipping rather than turning, instead of modifying the xScale, change the yScale instead.

    Thanks to @Mobile Ben for pointing me in the right direction!