Swift creating a health progress bar with a SKSpriteNode

Question

This is my current code for the progress bar. In the GameScene I have set the var xProgress = 1. Shouldn't the empty image appear as the value should now = 0?

I'm trying to test the SKNode before making it the value decrease over time so it reduces slowly.

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 my GameScene I also have:

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

It would be more usual to store the player health in a variable, decrease it when something hits them, and game over when it reaches zero. You render it on screen seperately to show the player the value, but don't try and read the value from the display. — simonWasHere, Feb 20 '17 at 22:26
I've not been very clear in the question. The progress bar is more of a fuel bar. So the player must frequently collide with a sprite node in order to increase their fuel level which is the bar. — Alex Ingram, Feb 20 '17 at 22:31
I don't quite know how I would implement this. I'm assuming I'd set a var health = 100 and then have this decrease over time to 0? — Alex Ingram, Feb 20 '17 at 22:34
Yes, decrease the value in the scene update fuction is probably best. — simonWasHere, Feb 20 '17 at 22:37
Ok great. How would I link this up to a visible node however and have 100 = full size and 0 the node is gone? I've read about the SKCropNode? — Alex Ingram, Feb 20 '17 at 22:39
http://stackoverflow.com/questions/23563079/how-to-create-progress-bar-in-sprite-kit — simonWasHere, Feb 20 '17 at 22:45
Thanks Simon! I've followed the answer by "Bikee" and everything compiles with no problems. My only issue now is linking this adding the fuel variable and getting it to decrease over 10 seconds or so? Where do I add this bit? — Alex Ingram, Feb 20 '17 at 23:09
Would I set the XProgressValue to equal 100? and then have this decrease? — Alex Ingram, Feb 20 '17 at 23:10
OK great, and how do I get this value to reduce from 1-0 over a time interval? — Alex Ingram, Feb 20 '17 at 23:19
You can adjust it in the update function of your SKScene class — simonWasHere, Feb 20 '17 at 23:20
You should post it in another question I guess, this comment thread is getting a bit long :) — simonWasHere, Feb 20 '17 at 23:40
Would it best just to add a SKSpriteNode and set the width to progressValue which would initially equal 100 and it decreases every few seconds? — Alex Ingram, Feb 20 '17 at 23:44
I think I'll do that instead, seems much easier and I'll be able to manage that no problem. Thanks for your help Simon! — Alex Ingram, Feb 20 '17 at 23:45

score 6 · Answer 1 · answered Feb 21 '17 at 20:13

You can implement a progress bar using two sprite nodes, where one node is the bar and the other is the background.

First, create the bar and background nodes with the same size:

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

Next, set the bar's zPosition to a value higher than the background, so the bar will appear above the background. Left-justify the bar by setting the anchorPoint to (0, 0.5) and set the position of the bar so it's at the left edge of the background.

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

Finally, set the progress amount by scaling the bar in the x direction by

bar.xScale = value

where value is a value between 0 and 1, inclusive.

Here's the full implementation as a subclass of 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)
        }
    }
}

usage:

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

addChild(progressBar)

progressBar.progress = 0.5

Swift creating a health progress bar with a SKSpriteNode

1 Answers1