在 spritekit 中沿 UIBezierPath 绘制节点 [英] Plot nodes along a UIBezierPath in spritekit

问题描述

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

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:

我的代码

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)

}

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

推荐答案

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

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.

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

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

如果你在你的精灵上运行 move 动作，它会从你路径的中点开始，到路径的终点结束.

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

这篇关于在 spritekit 中沿 UIBezierPath 绘制节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！