Draw circles and other shapes with SpriteKit Scene Editor?

Question

Tutorials online allude to creating circles and other shapes using the SpriteKit Scene Editor. One such example is this: https://www.raywenderlich.com/118225/introduction-sprite-kit-scene-editor.

However, the only type of shape node available in the Object Library is a square shape.

How do you use the Object Library to create other shapes besides squares?

score 3 · Answer 1 · answered Jul 12 '16 at 18:54

3

As of right now, square is your only option. Perhaps in the next version they will allow more shapes, but as of right now, I would avoid using SKShapeNode's because they are extremely buggy

Source: XCode scene editor, only option is square, none of the tabs allow this to change or be subclassed

answered Jul 12 '16 at 18:54

Knight0fDragon

16,609
2
23
44

Where is the source from? Link? – Charlie Martin Dec 13 '16 at 05:08
What source? Open up xcode spritekit scene editor and look yourself – Knight0fDragon Dec 13 '16 at 09:15
I misunderstood. I thought when you said "Source:", you were quoting someone. You were saying the source is the scene editor itself and you are correct – Charlie Martin Dec 13 '16 at 17:18
3

Still true in 2020 – Nicolas Miari Apr 18 '20 at 02:04
Square is only option, and you can't even specify it's size, only the scale. – kelin Jan 06 '23 at 20:11

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

An SKShapeNode object draws a shape defined by a Core Graphics path.

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.

Creating a shape node from a path 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.

You can find more details to the Apple official guide

This is the actual available init methods from the sources:

/* Create a Shape Node using a CGPathRef, optionally centered at the Node's origin. */
    @available(iOS 8.0, *)
    public convenience init(path: CGPath)
    @available(iOS 8.0, *)
    public convenience init(path: CGPath, centered: Bool)
    
    /* Create a Shape Node representing a Rect. */
    @available(iOS 8.0, *)
    public convenience init(rect: CGRect)
    
    /* Create a Shape Node representing a rect centered at the Node's origin. */
    @available(iOS 8.0, *)
    public convenience init(rectOfSize size: CGSize)
    
    /* Create a Shape Node representing a rounded rect with a corner radius */
    @available(iOS 8.0, *)
    public convenience init(rect: CGRect, cornerRadius: CGFloat)
    
    /* Create a Shape Node representing a rounded rect with a corner radius centered at the Node's origin. */
    @available(iOS 8.0, *)
    public convenience init(rectOfSize size: CGSize, cornerRadius: CGFloat)
    
    /* Create a Shape Node representing an circle centered at the Node's origin. */
    @available(iOS 8.0, *)
    public convenience init(circleOfRadius radius: CGFloat)
    
    /* Create a Shape Node representing an Ellipse inscribed within a Rect */
    @available(iOS 8.0, *)
    public convenience init(ellipseInRect rect: CGRect)
    
    /* Create a Shape Node representing an Ellipse inscribed within a Rect centered at the Node's origin. */
    @available(iOS 8.0, *)
    public convenience init(ellipseOfSize size: CGSize)
    
    /* Create a Shape Node representing an a series of Points interpreted as line segments */
    @available(iOS 8.0, *)
    public convenience init(points: UnsafeMutablePointer<CGPoint>, count numPoints: Int)
    
    /* Create a Shape Node representing a smoothed spline that passes through a series of Points */
    @available(iOS 8.0, *)
    public convenience init(splinePoints points: UnsafeMutablePointer<CGPoint>, count numPoints: Int)

As you can see you can create non only squares but also irregular polygon using for example the a custom CGPath.

A typical example is this below:

let shape = SKShapeNode()
shape.path = UIBezierPath(roundedRect: CGRect(x: -128, y: -128, width: 256, height: 256), cornerRadius: 64).CGPath
shape.position = CGPoint(x: CGRectGetMidX(frame), y: CGRectGetMidY(frame))
shape.fillColor = UIColor.redColor()
shape.strokeColor = UIColor.blueColor()
shape.lineWidth = 10
addChild(shape)

P.S.: Could occur some bugs in memory caused by SKShapeNode during development but nothing that would prevent you to test, create and publish a game, many games on the market make use of SKShapeNode without problems , you have to simply be more careful in the code without abusing of it.

Draw circles and other shapes with SpriteKit Scene Editor?

2 Answers2