Different results of adding UIBezierPath in UIKit and SpriteKit

Question

I'm trying to add an arc to my SpriteKit scene with SKShapeNode. If I draw an arc with UIView like:

- (void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(self.frame),CGRectGetMidY(self.frame)) radius:64.0f startAngle:0 endAngle:M_PI*4/3 clockwise:YES];
    [[UIColor greenColor] setStroke];
    path.lineWidth = 2.0f;
    [path stroke];
}

I get the following:

And I get what I expect. If I draw a similar arc through SKScene like:

- (void)createCircle {
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:128.0f startAngle:0 endAngle:M_PI*4/3 clockwise:YES];
    SKShapeNode *ring = [SKShapeNode shapeNodeWithPath:path.CGPath];
    ring.name = @"ring";
    ring.lineWidth = 20;
    ring.strokeColor = [SKColor magentaColor];
    ring.position = CGPointMake(CGRectGetMidX(self.view.bounds),CGRectGetMidY(self.view.bounds));
    [self.scene addChild:ring];
}

I get the following picture. That's not what I expect to see. It goes counter-clockwise. Why don't I get an arc like the first picture? Do I need to flip the axes or something? My development target is iOS 8.4 if that matters.

Answer 1

The 2D coordinate system in UIKit and SpriteKit is different.

• UIKit view has the origin at the upper-left corner.

• SpriteKit view has the origin at the lower-left corner.

To achieve the same arc, modify the path

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:128.0f startAngle:0 endAngle:-M_PI*4/3 clockwise:NO];