Rotating an SKShapeNode along its center

Question

I have an SKShapeNode (rectangle in this case) which I am trying to rotate along its center. However it is rotating along the screen's bottom left point. Since I cannot set an anchor point for SKShapeNode, how can I achieve my requirement (to rotate the shape along its centre). This is the code I'm trying.

    let rectangle = SKShapeNode()
    rectangle.path = UIBezierPath(rect: CGRectMake(view.frame.width/4, view.frame.height/2, view.frame.width/2, view.frame.width/2)).CGPath
    rectangle.fillColor = UIColor.yellowColor()
    rectangle.strokeColor = UIColor.yellowColor()

    let oneRevolution = SKAction.rotateByAngle(360, duration: 100.0)
    let repeat = SKAction.repeatActionForever(oneRevolution)
    rectangle.runAction(repeat)

Answer 1

When you create the SKShapeNode you have to set it to center this way:

let shapePath = UIBezierPath(...)
...
...            
let shape = SKShapeNode(path: shapePath.cgPath, centered: true)

That way the anchor point of the SKShapeNode will be the center point.

Answer 2

We have to explicitly center the SKShapeNode before applying rotation.

    import SpriteKit
    import PlaygroundSupport

    let bounds = CGRect(x: 0, y: 0, width: 400, height: 200)
    let skview = SKView(frame: bounds)

    PlaygroundPage.current.liveView = skview

In the first and second examples below, this is done by setting x and y parameters while initializing the rectangle, and then setting the position property.

    let first = SKShapeNode(rect: CGRect(x:-20, y:-20, width: 40, height: 40))
    first.position = CGPoint(x: 70, y: 30)


    let second = SKShapeNode(rect: CGRect(x:-20, y:-20, width: 40, height: 40))
    second.position = CGPoint(x: 70, y: 30)
    second.zRotation = CGFloat.pi * 0.15
    second.strokeColor = .red

In the third example below, this is done by setting centered to true while initializing the shape, and then setting the position property.

    let path = CGMutablePath();
    path.move(to: CGPoint(x: 50,y: 10))
    path.addLine(to: CGPoint(x: 90, y: 10))
    path.addLine(to: CGPoint(x: 90, y: 50))
    path.addLine(to: CGPoint(x: 50, y: 50))
    path.addLine(to: CGPoint(x: 50, y: 10))

    let third = SKShapeNode(path: path, centered: true);
    third.position = CGPoint(x: 70,y: 30);
    third.zRotation = CGFloat.pi * 0.35
    third.strokeColor = .yellow

    let scene = SKScene(size: CGSize(width: 400, height: 200))
    scene.scaleMode = SKSceneScaleMode.aspectFill
    scene.size = skview.bounds.size
    scene.addChild(first);
    scene.addChild(second);
    scene.addChild(third);
    skview.presentScene(scene);

Answer 3

SKSpriteNode rectangle = [SKSpriteNode spriteWithSize size: CGSizeMake(20,20)];

You can make the same rectangle as a spriteNode which would give you access to change the anchorpoint. My syntax may be off a bit but I believe it can also take a color in the constructor.

Answer 4

Did you look at the SKShapeNode documentation : https://developer.apple.com/library/IOs/documentation/SpriteKit/Reference/SKShapeNode_Ref/index.html

Try using:

shapeNodeWithPath:centered:

Choose YES for centered.

If YES, the path is translated so that the center of the path’s bounding box is at the node’s origin; otherwise the path is relative to the node’s origin.