如何在不改变位置的情况下旋转 SKNode？

Question

我有一个SKNode，它由 4 个SKSpriteNodes组成，组成一个正方形（我希望我的措辞正确）。正方形的每一边都有不同的颜色，我试图旋转整个正方形而不改变它的位置。我尝试的方式总是在它开始旋转时改变它的位置。这就是我的处理方式：

import SpriteKit

class GameScene: SKScene, SKPhysicsContactDelegate {

    var shape = SKNode()

    override func didMoveToView(view: SKView) {

    self.addChild(shape)
    self.physicsWorld.gravity = CGVectorMake(0.0, 0.0)
    self.physicsWorld.contactDelegate = self

    let greenLine = SKSpriteNode(imageNamed: "Green")
    greenLine.position = CGPoint(x: size.width / 2, y: size.height / 2.5)

    let yellowLine = SKSpriteNode(imageNamed: "Yellow")
    yellowLine.position = CGPoint(x: greenLine.position.x - greenLine.frame.width / 2, y: frame.size.height / 2)

    let redLine = SKSpriteNode(imageNamed: "Red")
    redLine.position = CGPoint(x: greenLine.position.x + greenLine.frame.width / 2, y: frame.size.height / 2)
    let blueLine = SKSpriteNode(imageNamed: "Blue")
    blueLine.position = CGPoint(x: frame.size.width / 2, y: redLine.position.y + redLine.frame.height / 2.3)

    shape.addChild(greenLine)
    shape.addChild(yellowLine)
    shape.addChild(redLine)
    shape.addChild(blueLine)

    let rotateAction = SKAction.rotateByAngle(CGFloat(M_PI_4) * 2, duration: 5)
    shape.runAction(rotateAction)
}

我也尝试了zRotation，但根本没有用。当 SKAction 发生旋转时，它会在旋转时将整个形状向左移动，而不是停留在同一个地方。

编辑

代码：

 var shape = SKNode()

override func didMoveToView(view: SKView) {

    self.addChild(shape)
    self.physicsWorld.gravity = CGVectorMake(0.0, 0.0)
    self.physicsWorld.contactDelegate = self

    backgroundColor = UIColor.whiteColor()

    let greenLine = SKSpriteNode(imageNamed: "Green")
    greenLine.position = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2.5)

    let yellowLine = SKSpriteNode(imageNamed: "Yellow")
    yellowLine.position = CGPoint(x: greenLine.position.x - greenLine.frame.width / 2, y: frame.size.height / 2)

    let redLine = SKSpriteNode(imageNamed: "Red")
    redLine.position = CGPoint(x: greenLine.position.x + greenLine.frame.width / 2, y: frame.size.height / 2)

    let blueLine = SKSpriteNode(imageNamed: "Blue")
    blueLine.position = CGPoint(x: frame.size.width / 2, y: redLine.position.y + redLine.frame.height / 2.3)

    shape.position = CGPoint(x: 0, y: 0)
    shape.addChild(greenLine)
    shape.addChild(yellowLine)
    shape.addChild(redLine)
    shape.addChild(blueLine)

    let center = SKSpriteNode(color: .redColor(), size: CGSize(width: 50, height: 50))
    center.position = CGPoint(x: frame.midX, y: frame.midY)
    shape.addChild(center)

    let rotateAction = SKAction.rotateByAngle(CGFloat(M_PI_4) * 2, duration: 30)
    shape.runAction(rotateAction)


}

Answer 1

您可能不了解不同坐标系之间的区别。您正在向场景中添加形状节点。因此，当您设置形状的位置时，您必须在场景的坐标系中工作。相同的逻辑适用于其他节点（线）。在这里，您将它们添加到形状中，这意味着您必须在形状的坐标系中“思考”。看看这个例子：

import SpriteKit

class GameScene: SKScene, SKPhysicsContactDelegate {

    var shape = SKNode()

    override func didMoveToView(view: SKView) {

        self.addChild(shape)
        self.physicsWorld.gravity = CGVectorMake(0.0, 0.0)
        self.physicsWorld.contactDelegate = self

        let greenLine = SKSpriteNode(color: .greenColor(), size: CGSize(width: 50, height: 50))
        greenLine.position = CGPoint(x: -30, y: 30)

        let yellowLine =  SKSpriteNode(color: .yellowColor(), size: CGSize(width: 50, height: 50))
        yellowLine.position = CGPoint(x: 30, y: 30)

        let redLine = SKSpriteNode(color: .redColor(), size: CGSize(width: 50, height: 50))
        redLine.position = CGPoint(x: 30, y: -30 )
        let blueLine =  SKSpriteNode(color: .blueColor(), size: CGSize(width: 50, height: 50))
        blueLine.position = CGPoint(x:-30, y:-30)

        shape.position = CGPoint(x: frame.midX, y: frame.midY)
        shape.addChild(greenLine)
        shape.addChild(yellowLine)
        shape.addChild(redLine)
        shape.addChild(blueLine)

        let center = SKSpriteNode(color: .redColor(), size: CGSize(width: 5, height: 5))

        shape.addChild(center)

        let rotateAction = SKAction.rotateByAngle(CGFloat(2 * M_PI), duration: 5)
        shape.runAction(rotateAction)

    }
}

结果：

注意中心节点。那是形状节点的实际位置。这就是其他节点周围的点正在旋转。