Rotating 2D sprite around tilted Y axis

Question

I am building a sprite that I want to spin along an axis. I am using SpriteKit on iOS for this, but I'm sure that the question is not really tool specific.

In my case, I have a sprite such as:

and I want to rotate it around the red line as if it is a spinning disc spinning in 3D (even though it is only a 2D sprite).

SpriteKit gives me the SKTransformNode class that allows me to adjust the X, Y and Z rotation of the node. So I am able to rotate the sprite along the X or Y axis in pseudo 3D. The following 3 images attempt to give you an idea of what I'm trying to achieve:

I thought I should be able to animate the rotation around the X and Y axis in a way to achieve this but I've found it harder than expected.

I'm hoping that someone can point me in the right direction.

[edit]

to further illustrate what I don't want, here is what happens using simply Y scaling without using an SKTransformNode. Note that the image inside the circle does not reflect as it turns.

Answer 1

Try creating the art so that the red line is horizontal, then rotate it in Swift on its zRotation, and animate scaling along the scaleX or scaleY to achieve the effect.

For example:

class GameScene: SKScene {
    private var sprite : SKSpriteNode?
    override func didMove(to view: SKView) {
        self.sprite = self.childNode(withName: "//axis") as? SKSpriteNode
        if let sprite = self.sprite {
            sprite.zRotation = -CGFloat.pi / 3
            let scaleDown = SKAction.scaleY(to: -1.0, duration: 2)
            let scaleUp = SKAction.scaleY(to: 1.0, duration: 2)
            let sequence = SKAction.sequence([scaleDown, scaleUp])
            sprite.run(SKAction.repeatForever(sequence))
        }
    }
}

Answer 2

I think this would be easiest using SKTransformNode.setQuaternion instead.

This makes it easy to express a rotation by some angle around any axis you choose, rather than only rotations around the coordinate axes as with Euler angles. You can come up with Euler triples to correspond to any arbitrary orientation, but it's complicated for diagonal axes.

Instead, you can init a simd_quatf using a given angle (expressed as a Float in radians) and axis (SIMD3<Float>) to rotate around. Pass that to setQuaternion and you're set. You can repeat this each frame, incrementing your angle argument over time to make it spin, while holding the rotation axis fixed.

This way, you don't have to do any trigonometric calculations yourself — that's all handled by the init function.