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