CODEWITHSUNDEEP
iosswiftxcodesprite-kituibezierpath
Astrum
Astrum

Reputation: 375

Plot nodes along a UIBezierPath in spritekit

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:

enter image description here

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?

Upvotes: 2

Views: 1247

Answers (2)

0x141E
0x141E

Reputation: 12773

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)
}

Upvotes: 4

Komal Goyani
Komal Goyani

Reputation: 847

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()]))

 }

Upvotes: 0

Related Questions