Search code examples
swiftsprite-kituibezierpathskshapenode

Drawing circle outline with small gap Sprite Kit Swift


I am currently creating a game in SpriteKit. In this game, I am trying to draw an outline of a circle with a small gap(s) in the outline of this circle (possibly about 1/8 the entire circumference of the circle). Here is a drawn picture of what I am visualizing.

enter image description here

How would I do this using SpriteKit? Would I use SKShapeNode? Any help would be appreciated. Thank you.


Solution

  • You can get something similar using the SKShapeNode in combination with SKEffectNode, like this:

    override func didMoveToView(view: SKView) {
    
            let effectNode = SKEffectNode()
            let gap = CGFloat(M_PI_4 / 4.0)
    
            for i in 0...3 {
    
                let shape = SKShapeNode(circleOfRadius: 50)
    
                shape.fillColor = .clearColor()
                shape.lineWidth = 6.8
                shape.strokeColor = .darkGrayColor()
    
                let startAngle:CGFloat = CGFloat(i) * CGFloat(M_PI_2) + gap
                let endAngle:CGFloat = startAngle + CGFloat(M_PI_2) - gap * 2
    
                print("Iteration \(i) : start angle (\(startAngle * 180 / CGFloat(M_PI)), end angle (\(endAngle  * 180 / CGFloat(M_PI)))")
    
                shape.path = UIBezierPath(arcCenter: CGPointZero, radius: -50, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath
    
                effectNode.addChild(shape)
            }
    
            effectNode.position = CGPoint(x: frame.midX, y: frame.midY)
            effectNode.shouldRasterize = true
    
            addChild(effectNode)
    }
    

    The result:

    crosshair

    Or you could make a mask programatically and apply it to a SKCropNode. The SKCropNode of course will be a parent of a ring (SKShapeNode with fillColor set to .clearColor() and strokeColor set to appropriate value).