在 spritekit 中沿着 UIBezierPath 绘制节点

Question

我目前正在用 spritekit 开发一个游戏，它有一个游戏关卡地图。我正在使用 UIBezierPath 作为我希望级别节点遵循的路径，我遇到的唯一问题是尝试沿着路径绘制它们，并且想知道如何将它们添加到场景中以便将它们添加到路径中每一个都与之前绘制的最后一个单独间隔 50。目前我有这个：

我的代码

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)

}

上面的代码没有实现我想要的，因为它只允许我获取路径中最后一行的终点。如何沿着我绘制的路径绘制节点？

Answer 1

您可以使用以下代码一个一个地移动您的精灵。

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

 }

Answer 2

您可以使用 SKAction.follow(path:) 的 timingFunction 方法来设置精灵沿贝塞尔曲线路径的间距。通常，您使用 timingFunction 方法来自定义动作的时间，例如，缓入或缓出。在这种情况下，您可以使用它来设置精灵沿路径的起点。

例如，如果您想在贝塞尔曲线路径的中点开始精灵，您可以将 timingFunction 的 time 参数偏移 0.5，其中 time从 0 开始到 1 结束。

let move = SKAction.follow(path.cgPath, speed: 100)

move.timingFunction = {
    time in
    return min(time + 0.5, 1)
}

如果您运行对精灵执行 move 动作，它将从您路径的中点开始，并在路径的终点结束。

下面是一个示例，用于沿贝塞尔曲线路径设置一组精灵的间距

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

在 spritekit 中沿着 UIBezierPath 绘制节点

Plot nodes along a UIBezierPath in spritekit

xcode

ios

uibezierpath

sprite-kit

swift