Swift使用SKSpriteNode创建运行状况进度栏

Question

这是我当前的进度条代码。 在GameScene中，我已将var xProgress = 1设置为空。是否应该显示空白图像，因为现在的值应为0？

我正在尝试先测试SKNode，然后使其值随时间减小，以便使其减小。

class IMProgressBar : SKNode{

var emptySprite : SKSpriteNode? = nil
var progressBar : SKCropNode
init(emptyImageName: String!,filledImageName : String)
{
    progressBar = SKCropNode()
    super.init()
    let filledImage  = SKSpriteNode(imageNamed: filledImageName)
    progressBar.addChild(filledImage)
    progressBar.maskNode = SKSpriteNode(color: UIColor.white,
                                        size: CGSize(width: filledImage.size.width * 2, height: filledImage.size.height * 2))

    progressBar.maskNode?.position = CGPoint(x: -filledImage.size.width / 2,y: -filledImage.size.height / 2)
    progressBar.zPosition = 0.1
    self.addChild(progressBar)

    if emptyImageName != nil{
        emptySprite = SKSpriteNode.init(imageNamed: emptyImageName)
        self.addChild(emptySprite!)
    }
}
func setXProgress(xProgress : CGFloat){
    var value = xProgress
    if xProgress < 0.1{
        value = 0
    }
    if xProgress > 0.1 {
        value = 0
    }
    progressBar.maskNode?.xScale = value
}

    required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

在我的GameScene中，我还有：

let progressBar = IMProgressBar(emptyImageName: nil,filledImageName: "health")
    progressBar.position = CGPoint(x: self.frame.midX, y: self.frame.height / 3)
    self.addChild(progressBar)

Answer 1

您可以使用两个Sprite节点实现进度条，其中一个节点是进度条，另一个是背景。

首先，创建大小相同的条和背景节点：

background = SKSpriteNode(color:SKColor.white, size:size)
bar = SKSpriteNode(color:color, size:size)

接下来，将条形图的zPosition设置为高于背景的值，这样条形图将出现在背景之上。 通过将anchorPoint设置为(0, 0.5) anchorPoint左对齐条形图，并设置条形图的位置，使其位于背景的左边缘。

bar.zPosition = 1.0
bar.anchorPoint = CGPoint(x:0.0,y:0.5)
bar.position = CGPoint(x:-size.width/2,y:0)

最后，通过在x方向上按比例缩放条来设置进度量

bar.xScale = value

其中value是介于0和1之间（含0和1）的值。

这是SKNode的子类的完整实现：

class ProgressBar:SKNode {
    var background:SKSpriteNode?
    var bar:SKSpriteNode?
    var _progress:CGFloat = 0
    var progress:CGFloat {
        get {
            return _progress
        }
        set {
            let value = max(min(newValue,1.0),0.0)
            if let bar = bar {
                bar.xScale = value
                _progress = value
            }
        }
    }

    convenience init(color:SKColor, size:CGSize) {
        self.init()
        background = SKSpriteNode(color:SKColor.white,size:size)
        bar = SKSpriteNode(color:color,size:size)
        if let bar = bar, let background = background {
            bar.xScale = 0.0
            bar.zPosition = 1.0
            bar.position = CGPoint(x:-size.width/2,y:0)
            bar.anchorPoint = CGPoint(x:0.0,y:0.5)
            addChild(background)
            addChild(bar)
        }
    }
}

用法：

let progressBar = ProgressBar(SKColor.blue, size:CGSize(width:100, height:10))

addChild(progressBar)

progressBar.progress = 0.5