Plot nodes along a UIBezierPath in spritekit - ios

Question

i'm currently developing a game in spritekit which has a game level map. I'm using an UIBezierPath for the pathway i want the level nodes to follow, the only problem I have is trying to plot them along the path and was wondering how I go about adding them to the scene so they get added to the path way and each one is individually spaced 50 apart from the last one that was plotted before it. currently I have this:
My Code
let path = UIBezierPath()
path.move(to: CGPoint(x: -200, y: 0))
path.addCurve(to: CGPoint(x: 0, y: 0), controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: -200, y: 0))
path.addCurve(to: CGPoint(x: 140, y: 0), controlPoint1: CGPoint(x: 60, y: 180), controlPoint2: CGPoint(x: 140, y: 10))
path.addCurve(to: CGPoint(x: 280, y: 0), controlPoint1: CGPoint(x: 220, y: -180), controlPoint2: CGPoint(x: 280, y: 0))
path.addCurve(to: CGPoint(x: 440, y: 0), controlPoint1: CGPoint(x: 400, y: -300), controlPoint2: CGPoint(x: 440, y: 0))
let shapeNode = SKShapeNode(path: path.cgPath)
shapeNode.strokeColor = UIColor.white
addChild(shapeNode)
for i in 1...5 {
let level1 = mapLevelTiles()
level1.createAndDisplay(Data: lev3)
level1.position = CGPoint(x: 0 + level1.levelImageNode.size.width * 1.5 * CGFloat(i), y: path.cgPath.currentPoint) //path.cgPath.currentPoint
level1.zPosition = 10
addChild(level1)
}
The code above doesn't achieve what I want because it only allows me to get the end point of the last line in the path. How do I plot the nodes along the path that I have drawn?

Answer 1

You can use the timingFunction method of SKAction.follow(path:) to set the spacing of your sprites along the bezier path. Typically, you use the timingFunction method to customize the timing of an action, for example, to the ease-in or ease-out. In this case, you can use it to set the starting point of a sprite along a path.
For example, if you want to start the sprite at the midpoint of your bezier path, you can offset the time parameter of the timingFunction by 0.5, where the time starts at 0 and ends at 1.
let move = SKAction.follow(path.cgPath, speed: 100)
move.timingFunction = {
time in
return min(time + 0.5, 1)
}
If you run the move action on your sprite, it will start at the midpoint of your path and end at the path's end point.
Here's an example to set the spacing for a set of sprites along a bezier path
// Show the path
let shapeNode = SKShapeNode(path: path.cgPath)
shapeNode.strokeColor = UIColor.white
addChild(shapeNode)
// Add 5 sprites to the scene at various points along the path
for i in 1...5 {
let move = SKAction.follow(path.cgPath, speed: 100)
move.timingFunction = {
time in
return min(time + 0.1 * Float(i), 1)
}
let sprite = SKSpriteNode(color: .blue, size: CGSize(width: 20, height: 20))
addChild(sprite)
sprite.run(move)
}

Answer 2

You can move your sprites one by one using following code.
let path = UIBezierPath()
path.move(to: CGPoint(x: -200, y: 0))
path.addCurve(to: CGPoint(x: 0, y: 0), controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: -200, y: 0))
path.addCurve(to: CGPoint(x: 140, y: 0), controlPoint1: CGPoint(x: 60, y: 180), controlPoint2: CGPoint(x: 140, y: 10))
path.addCurve(to: CGPoint(x: 280, y: 0), controlPoint1: CGPoint(x: 220, y: -180), controlPoint2: CGPoint(x: 280, y: 0))
path.addCurve(to: CGPoint(x: 440, y: 0), controlPoint1: CGPoint(x: 400, y: -300), controlPoint2: CGPoint(x: 440, y: 0))
let shapeNode = SKShapeNode(path: path.cgPath)
shapeNode.strokeColor = UIColor.white
addChild(shapeNode)
for i in 1...5 {
let level1 = SKShapeNode(circleOfRadius: 30.0)
level1.zPosition = 10
addChild(level1)
let followPath = SKAction.follow(path.cgPath, asOffset: true, orientToPath: true, duration: 5.0)
level1.run(SKAction.sequence([SKAction.hide(),
SKAction.wait(forDuration: 2.0 * Double(i)),
SKAction.unhide(),
followPath,
SKAction.removeFromParent()]))
}