Drawing dashed line in Sprite Kit using SKShapeNode

Question

I fount this solution but I can't make it into swift code

This what I try

var pattern[2]:CGFloat; this 

var dashed: CGPathRef = CGPathCreateCopyByDashingPath(CGPathCreateCopyByDashingPath(path, transform, phase, lengths, count);

var myShapeNode: SKShapeNode!;

        var CGPathCreateCopyByDashingPath:CGPathRef;

Where do you fail? Show us your try. – Christian Jan 21 '15 at 17:09 — Christian, Jan 21 '15 at 17:09
please add that code to your question. – Christian Jan 21 '15 at 17:17 — Christian, Jan 21 '15 at 17:17
question is very badly asked. code is poorly formatted – Gerald Apr 15 '16 at 14:59 — Gerald, Apr 15 '16 at 14:59

score 12 · Accepted Answer · edited Apr 12 '16 at 14:28

12

This is how you can draw a dashed line in swift. You can change the parameters as you want.

let bezierPath = UIBezierPath()
let startPoint = CGPointMake(0, 250)
let endPoint = CGPointMake(450, 250)
bezierPath.moveToPoint(startPoint)
bezierPath.addLineToPoint(endPoint)

var pattern : [CGFloat] = [10.0, 10.0]
let dashed = CGPathCreateCopyByDashingPath (bezierPath.CGPath, nil, 0, pattern, 2)

var shapeNode = SKShapeNode(path: dashed)
shapeNode.position = CGPointMake(100, 100)
self.addChild(shapeNode)

edited Apr 12 '16 at 14:28

Jon Winstanley

23,010
22
73
116

answered Jan 21 '15 at 17:24

rakeshbs

24,392
7
73
63

5

In Swift 3 `CGPathCreateCopyByDashingPath` has been replaced by `path.copy(dashingWithPhase:lengths:)` – neave Jul 25 '17 at 13:46

score 5 · Answer 2 · answered Dec 20 '18 at 12:15

In swift 4:

    let square = SKShapeNode(rectOf: CGSize(width: 64, height: 64))
    let pattern : [CGFloat] = [4.0, 4.0]

    let dashed = square.path?.copy(dashingWithPhase: 1, lengths: pattern)

    let shapeNode = SKShapeNode(path: dashed!)
    shapeNode.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
    shapeNode.fillColor = SKColor.clear
    shapeNode.strokeColor = SKColor.red
    shapeNode.lineWidth = 2
    self.addChild(shapeNode)

score 2 · Answer 3 · answered Aug 17 '16 at 11:33

For anyone looking to work out how to apply this same principal to an SKShapeNode like I was, here is an example. A rectangle with a blue dashed line.

import SpriteKit
import GameplayKit

let square = SKShapeNode(rectOfSize: CGSize(width: 64, height: 64))
let circle = SKShapeNode(circleOfRadius: 20.0)

var pattern : [CGFloat] = [2.0, 2.0]
let dashed = CGPathCreateCopyByDashingPath (square.path, nil, 0, pattern, 2)

var shapeNode = SKShapeNode(path: dashed!)
shapeNode.fillColor = UIColor.blueColor()
shapeNode.strokeColor = UIColor.blueColor()

score 2 · Answer 4 · answered Jan 27 '20 at 12:09

2

Swift 5

if let path = path?.copy(dashingWithPhase: 1, lengths: [5, 5]) {
    let line = SKShapeNode(path: path)
    line.strokeColor = .white
    self.addChild(line)
}

answered Jan 27 '20 at 12:09

Mike Glukhov

1,758
19
18

whilst this looks great, for me it lacks some extra information that actually helps you produce the path in the image. where are the points that define that curve, and where does "path" come from in the first place? – PKCLsoft May 04 '20 at 10:20

score 1 · Answer 5 · answered May 04 '20 at 10:51

Adding to the solution provided by Mike Glukhov above, this is my solution:

func drawTrace(pointArray: Array<CGPoint>) {
    if pointArray.count > 1 {
        let pattern : [CGFloat] = [10.0, 10.0]

        let path = CGMutablePath.init()

        // start at the first point.
        path.move(to: pointArray[0])

        // now add all of the others.
        for p in 1 ..< pointArray.count {
            path.addLine(to: pointArray[p])
        }

        // create the dashed path.
        let dashedPath = path.copy(dashingWithPhase: 1, lengths: pattern)

        let dashName = "dash"

        // now create the node
        let line = SKShapeNode(path: dashedPath)
        line.strokeColor = .white
        line.name = dashName

        if let parent = self.parent {
            if let oldLine = parent.childNode(withName: dashName) {
                oldLine.removeFromParent()
            }

            parent.addChild(line)
        }
    }
}

Drawing dashed line in Sprite Kit using SKShapeNode

5 Answers5

Linked