Search code examples
iosswiftsprite-kitcgpathskshapenode

How to CGPath or SKShapeNode Rotation


I want to add rotated elliptical paths to one center point. Like image below but random rotated elliptical.

atom

Draw these elliptical orbits with,

roadShape = SKShapeNode(ellipseInRect: centeredRect)
roadShape.strokeColor = UIColor.greenColor()
self.parent!.addChild(roadShape)

need to make small particles follow those elliptical orbits, thats why I need a path.

var followPath = SKAction.followPath(roadShape.path, asOffset: false, orientToPath: true, duration: 10);
particle.runAction(followPath)

I used SKShapeNode to draw and get the path property. But unfortunately SKShapeNode doesn't have any origin or anchorPoint property so I couldn't decent rotate to SKShapeNode. Do you have any suggestion to make it rotate or different way.

Thanks in advance.


Solution

  • let roadShape1 = SKShapeNode(ellipseInRect: CGRectMake(-100, -25, 200, 50))
    roadShape1.strokeColor = UIColor.greenColor()
    roadShape1.lineWidth = 3
    roadShape1.position = CGPoint(x:frame.midX, y: frame.midY)
    addChild(roadShape1)
    
    
    let roadShape2 = SKShapeNode(ellipseInRect: CGRectMake(-100, -25, 200, 50))
    roadShape2.strokeColor = UIColor.greenColor()
    roadShape2.lineWidth = 3
    
    let action2 = SKAction.rotateByAngle(CGFloat(M_PI)*0.75, duration:0)
    roadShape2.runAction(action2)
    roadShape2.position = CGPoint(x:frame.midX, y: frame.midY)
    addChild(roadShape2)
    
    
    let roadShape3 = SKShapeNode(ellipseInRect: CGRectMake(-100, -25, 200, 50))
    roadShape3.strokeColor = UIColor.greenColor()
    roadShape3.lineWidth = 3
    
    let action3 = SKAction.rotateByAngle(CGFloat(M_PI)*0.25, duration:0)
    roadShape3.runAction(action3)
    roadShape3.position = CGPoint(x:frame.midX, y: frame.midY)
    addChild(roadShape3)
    

    You can also use applyTransform to apply the rotation to the bezierPath instead of the SKShapeNode as follow:

    let roadPath1 = UIBezierPath(ovalInRect: CGRect(x: -100, y: -25, width: 200, height: 50))
    let roadPath2 = UIBezierPath(ovalInRect: CGRect(x: -100, y: -25, width: 200, height: 50))
    roadPath2.applyTransform(CGAffineTransformMakeRotation(45.0 * CGFloat(M_PI) / 180))
    let roadPath3 = UIBezierPath(ovalInRect: CGRect(x: -100, y: -25, width: 200, height: 50))
    roadPath3.applyTransform(CGAffineTransformMakeRotation(135.0 * CGFloat(M_PI) / 180))
    
    let roadShape1 = SKShapeNode(ellipseInRect: CGRectMake(-100, -25, 200, 50))
    roadShape1.path = roadPath1.CGPath
    roadPath1.stroke()
    roadShape1.lineWidth = 3
    roadShape1.position = CGPoint(x:frame.midX, y: frame.midY)
    addChild(roadShape1)
    
    let roadShape2 = SKShapeNode(ellipseInRect: CGRectMake(-100, -25, 200, 50))
    roadShape2.path = roadPath2.CGPath
    roadPath2.stroke()
    roadShape2.lineWidth = 3
    roadShape2.position = CGPoint(x:frame.midX, y: frame.midY)
    addChild(roadShape2)
    
    let roadShape3 = SKShapeNode(ellipseInRect: CGRectMake(-100, -25, 200, 50))
    roadShape3.path = roadPath3.CGPath
    roadPath3.stroke()
    roadShape3.lineWidth = 3
    roadShape3.position = CGPoint(x:frame.midX, y: frame.midY)
    addChild(roadShape3)