Draw smooth circle in iOS sprite kit

Question

I try to draw a single circle in my iOS SpriteKit project but the edges of the circle are not smooth. I would like to have a nicely drawn circle as I would draw it with Photoshop (anti-aliasing). I found several similar questions but the my problem remains.

-(id)initWithSize:(CGSize)size
{
    if (self = [super initWithSize:size])
    {
        self.backgroundColor = [SKColor whiteColor];
        self.scaleMode = SKSceneScaleModeAspectFill;
        self.size = CGSizeMake(640, 1136);

        CGRect circle = CGRectMake(100.0, 100.0, 80.0, 80.0);
        SKShapeNode *shapeNode = [[SKShapeNode alloc] init];
        shapeNode.path = [UIBezierPath bezierPathWithOvalInRect:circle].CGPath;
        shapeNode.fillColor = [SKColor redColor];
        shapeNode.lineWidth = 0;
        [self addChild:shapeNode];
    }
    return self;
}

What is the trick here?

I think that you need to give the node a lineWidth value greater than 0. The antialiasing is activated by default, but i think that only applies to the lines, not the fill. — gabuh, Jun 06 '14 at 09:45
By the way, the antialiasing of SKShapeNode is not very good, at least in the tests I did some time ago, I ended creating SKSpriteNodes with normal images. — gabuh, Jun 06 '14 at 09:46
@gabuh thanks :). Setting lineWidth=5 did the trick. You should post this as an answer to earn point :). Thanks! — xpepermint, Jun 06 '14 at 09:51

score 14 · Accepted Answer · answered Jun 06 '14 at 09:57

14

The antialiasing is activated by default, but It only applies to the lines, not the fill.

Set the lineWidth to a number greater than 0 and try again.

answered Jun 06 '14 at 09:57

gabuh

1,166
8
15

score 6 · Answer 2 · answered Jun 06 '14 at 09:53

Set the antialised property to YES.

shapeNode.antialiased = YES;

The rough edges are not visible when you use fill color.

//shapeNode.fillColor = [SKColor redColor];
shapeNode.strokeColor =[SKColor redColor];
shapeNode.antialiased = YES;
shapeNode.lineWidth = 1;

Now switch between YES and NO for antialisaed property. You will notice the difference.

Draw smooth circle in iOS sprite kit

2 Answers2