Class

SKShapeNode

A node that renders a shape defined by a Core Graphics path.

Overview

The graphics path is a collection of straight lines and curves that can define either open or closed subpaths. You can specify separate rendering behavior for the filled and stroked portion of the path. Each part can be rendered using either a solid color or a texture; if you need to render more sophisticated effects, you can also use a custom shader.

Shape nodes are useful for content that cannot be easily decomposed into simple textured sprites. Shape nodes are also very useful for building and displaying debugging information on top of your game content. However, the SKSpriteNode class offers higher performance than this class, so use shape nodes sparingly.

SKShapeNode shows an example of how to create a shape node. The example creates a circle with a blue interior and a white outline. The path is created and attached to the shape node’s path property.

Listing 1

Creating a shape node from a path

SKShapeNode *ball = [[SKShapeNode alloc] init];
 
CGMutablePathRef myPath = CGPathCreateMutable();
CGPathAddArc(myPath, NULL, 0,0, 15, 0, M_PI*2, YES);
ball.path = myPath;
 
ball.lineWidth = 1.0;
ball.fillColor = [SKColor blueColor];
ball.strokeColor = [SKColor whiteColor];
ball.glowWidth = 0.5;

You can see from the code that the shape has three essential elements:

  • The interior of the shape is filled. The fillColor property specifies the color used to fill the interior.

  • The outline of the shape is rendered as a line. The strokeColor and lineWidth properties define how the line is stroked.

  • A glow extends from the outline. The glowWidth and strokeColor properties define the glow.

You can disable any of these elements by setting its color to [SKColor clearColor].

The shape node provides properties that let you control how the shape is blended into the framebuffer. You use these properties the same way as the properties of the SKSpriteNode class. See SKShapeNode.

Symbols

Creating a Shape Path

init(path: CGPath)

Creates a shape node from a Core Graphics path.

init(path: CGPath, centered: Bool)

Creates a shape node from a Core Graphics path.

init(rect: CGRect)

Creates a shape node with a rectangular path.

init(rectOf: CGSize)

Creates a shape node with a rectangular path centered on the node’s origin.

init(rect: CGRect, cornerRadius: CGFloat)

Creates a shape with a rectangular path with rounded corners.

init(rectOf: CGSize, cornerRadius: CGFloat)

Creates a shape with a rectangular path with rounded corners centered on the node’s origin.

init(circleOfRadius: CGFloat)

Creates a shape node with a circular path centered on the node’s origin.

init(ellipseOf: CGSize)

Creates a shape node with an elliptical path centered on the node’s origin.

init(ellipseIn: CGRect)

Creates a shape node with an elliptical path that fills the specified rectangle.

init(points: UnsafeMutablePointer<CGPoint>, count: Int)

Creates a shape node from a series of points.

init(splinePoints: UnsafeMutablePointer<CGPoint>, count: Int)

Creates a shape node from a series of spline points.

Inspecting the Shape Node’s Path

var path: CGPath?

The path that defines the shape.

Setting the Fill Properties

var fillColor: UIColor

The color used to fill the shape.

var fillTexture: SKTexture?

The texture used to fill the shape.

var fillShader: SKShader?

A custom shader used to determine the color of the filled portion of the shape node.

Setting the Stroke Properties

var lineWidth: CGFloat

The width used to stroke the path.

var glowWidth: CGFloat

The glow that extends outward from the stroked line.

var isAntialiased: Bool

A Boolean value that determines whether the stroked path is smoothed when drawn.

var strokeColor: UIColor

The color used to stroke the shape.

var strokeTexture: SKTexture?

The texture used to stroke the shape.

var strokeShader: SKShader?

A custom shader used to determine the color of the stroked portion of the shape node.

var lineCap: CGLineCap

The style used to render the endpoints of the stroked portion of the shape node.

var lineJoin: CGLineJoin

The junction type used when the stroked portion of the shape node is rendered.

var miterLimit: CGFloat

The miter limit to use when the line is stroked using a miter join style.

Blending the Shape with the Framebuffer

var blendMode: SKBlendMode

The blend mode used to blend the shape into the parent’s framebuffer.

Reading the Shape Node’s Properties

var lineLength: CGFloat

The length of the line defined by the shape node.

Instance Properties

var customPlaygroundQuickLook: PlaygroundQuickLook

A custom playground quick look for this instance.