Swift Erstellen einer Gesundheit Fortschrittsbalken mit einem SKSpriteNode

Question

Dies ist mein derzeitiger Code für den Fortschrittsbalken. In der GameScene habe ich die var xProgress = 1 gesetzt. Sollte nicht das leere Bild erscheinen wie der Wert jetzt = 0 sein sollte?

Ich versuche, den SKNode zu testen, bevor es den Wert verringert im Laufe der Zeit, so dass es langsam reduziert.

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

In meinem GameScene Ich habe auch:

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

Answer 1

Sie können einen Fortschrittsbalken mit zwei Sprite-Knoten implementieren, wobei ein Knoten der Bar und der andere ist der Hintergrund.

zuerst die Bar und Hintergrund-Knoten mit der gleichen Größe erstellen:

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

Als nächstes stellte die zPosition der Bar auf einen Wert höher als der Hintergrund, so dass die Balken über dem Hintergrund erscheinen. Richten Sie die Leiste linksbündig aus, indem Sie die anchorPoint auf (0, 0.5) setzen und die Position der Leiste so festlegen, dass sie sich am linken Rand des Hintergrunds befindet.

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

Schließlich setzte die Fortschritte Betrag durch die Balken in der X-Richtung Skalierung durch

bar.xScale = value 

wo value ein Wert zwischen 0 und 1 einschließlich.

Hier ist die vollständige Umsetzung als eine Unterklasse von 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) 
     } 
    } 
} 

Nutzung:

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

addChild(progressBar) 

progressBar.progress = 0.5