user3589173
user3589173

Reputation: 45

Shapes in sprite kit

How do you make a circle or another shape in sprite kit I have seen some that use CGPath but i haven't really ever used CGPath ever . I was able to make a square with SKSpritenode but I can't seem to make triangles or circles.

Upvotes: 2

Views: 1924

Answers (2)

Mike Clark
Mike Clark

Reputation: 1870

Code snippet to create Triangle using Sprite Kit


SKShapeNode* leftContainer = [SKShapeNode node];
leftContainer.position = CGPointMake(CGRectGetMidX(self.frame),
                                     CGRectGetMidY(self.frame));
CGMutablePathRef pathLeftContainer = CGPathCreateMutable();


// Move to position and Draws line to form a triangle
CGPathMoveToPoint(pathLeftContainer, NULL, 60, 100);
CGPathAddLineToPoint(pathLeftContainer, 0, 120, 160);
CGPathAddLineToPoint(pathLeftContainer, 0,180,100);
CGPathAddLineToPoint(pathLeftContainer, 0,60,100);


[leftContainer setPath:pathLeftContainer];
leftContainer.lineWidth = 10.0;
leftContainer.strokeColor = [UIColor redColor];
leftContainer.physicsBody = [SKPhysicsBody bodyWithEdgeChainFromPath:leftContainer.path];
leftContainer.physicsBody.dynamic = FALSE;
[leftContainer.physicsBody setAllowsRotation:FALSE];
[self addChild:leftContainer];
CGPathRelease(pathLeftContainer);

Code snippet to create Circle using Sprite Kit

SKShapeNode* leftContainer = [SKShapeNode node];
leftContainer.position = CGPointMake(CGRectGetMidX(self.frame),
                                     CGRectGetMidY(self.frame));
CGMutablePathRef pathLeftContainer = CGPathCreateMutable();

// Draw circle with radius 20
CGPathAddArc(pathLeftContainer, NULL, 0, 20, 20, 0, 2*M_PI, true);


[leftContainer setPath:pathLeftContainer];
leftContainer.lineWidth = 10.0;
leftContainer.strokeColor = [UIColor redColor];
leftContainer.physicsBody = [SKPhysicsBody bodyWithEdgeChainFromPath:leftContainer.path];
leftContainer.physicsBody.dynamic = FALSE;
[leftContainer.physicsBody setAllowsRotation:FALSE];
[self addChild:leftContainer];
CGPathRelease(pathLeftContainer);

Upvotes: 2

0x141E
0x141E

Reputation: 12753

This creates an SKShapeNode and sets its path property to a circle path with radius 16.

    SKShapeNode *shape = [SKShapeNode node];
    CGRect rect = CGRectMake(0, 0, 32, 32);
    shape.path = [self circleInRect:rect];
    shape.strokeColor = [SKColor greenColor];
    shape.fillColor = [SKColor redColor];
    shape.position = CGPointMake(100,100);

    [self addChild:shape];

This method returns a CGPath object initialized with a oval path

- (CGPathRef) circleInRect:(CGRect)rect
{
    // Adjust position so path is centered in shape
    CGRect adjustedRect = CGRectMake(rect.origin.x-rect.size.width/2, rect.origin.y-rect.size.height/2, rect.size.width, rect.size.height);
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:adjustedRect];
    return bezierPath.CGPath;
}

Here's a triangle path...

- (CGPathRef) triangleInRect:(CGRect)rect
{
    CGFloat offsetX = CGRectGetMidX(rect);
    CGFloat offsetY = CGRectGetMidY(rect);
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];

    [bezierPath moveToPoint: CGPointMake(offsetX, 0)];
    [bezierPath addLineToPoint: CGPointMake(-offsetX, offsetY)];
    [bezierPath addLineToPoint: CGPointMake(-offsetX, -offsetY)];   

    [bezierPath closePath];
    return bezierPath.CGPath;
}

Upvotes: 4

Related Questions