使用 SKSpriteNode 快速创建健康进度条答案

【问题标题】：Swift creating a health progress bar with a SKSpriteNode使用 SKSpriteNode 快速创建健康进度条
【发布时间】：2017-02-20 22:19:39
【问题描述】：

这是我当前的进度条代码。在 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)

【问题讨论】：

更常见的做法是将玩家生命值存储在一个变量中，当有东西击中他们时减少它，当它达到零时游戏结束。您在屏幕上单独渲染它以向播放器显示值，但不要尝试从显示器中读取值。
这个问题我不是很清楚。进度条更像是一个燃料条。所以玩家必须经常与精灵节点碰撞，以增加他们的燃料水平，也就是酒吧。
将燃料值存储在变量中会更好
现在只能是 0.1 或 0，我觉得很奇怪
是的，或者形状节点都可以工作

标签： ios swift sprite-kit progress

【解决方案1】：

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

首先，创建大小相同的bar和background节点：

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

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

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 之间的值。

这是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

【讨论】：