3D Coin Flipping Animation on SKSpriteNode

Question

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.

Convert it to swift - https://objectivec2swift.com/#/home/converter/ — Pranav Wadhwa, Aug 20 '16 at 21:39
...um UIKit and SpriteKit are too different animals, your code will not work, Sprite Kit does not have anything that I know of that will achieve what you are looking for natively, you are going to have to make textures that create a 3d spinning effect and animate it that way. — Knight0fDragon, Aug 21 '16 at 20:25
I figured... Is there another similar way to create this type of animation in sprite kit though? — Nik, Aug 21 '16 at 20:26
I hit the enter key thinking it would make a new line, I updated my comment — Knight0fDragon, Aug 21 '16 at 20:27
Alright. I was gonna start by doing that, but was hoping there was an easier way to do this. I guess Ill just have to do that... — Nik, Aug 21 '16 at 20:28
As already mentioned, you can create a flipbook animation. Another trick if you wanted would be to reduce the scale in one direction. So for the link you posted, you can reduce/increase the scale in X while leaving Y in tact. This will not handle the color effect, but would be sufficient in tricking the eye. — Mobile Ben, Aug 22 '16 at 17:01
You can color blend for that. Just fix things one at a time. Note that in this case if you should only constrain the scale to 1 axis. Else it really won't look right. — Mobile Ben, Aug 22 '16 at 17:16

Nik · Accepted Answer · 2017-05-16T21:20:07.397

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!

Now this is the one long statement :) Have you considered putting this in a few separate lines? I mean, I am very familiar with SpriteKit and SKAction is my fav :), but even if it is easy to understand what is going on, it is not readable. Breaking it up in a few statements would make this code a lot better. — Whirlwind, May 16 '17 at 19:11
@Whirlwind Yeah lol. That's only written this way because I wrote that line really early in my swift/SpriteKit "career". I'll fix that up now — Nik, May 16 '17 at 19:12

3D Coin Flipping Animation on SKSpriteNode

1 Answers1