[英]Swift creating a health progress bar with a SKSpriteNode
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? 在GameScene中,我已将var xProgress = 1设置为空。是否应该显示空白图像,因为现在的值应为0?
I'm trying to test the SKNode before making it the value decrease over time so it reduces slowly. 我正在尝试先测试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")
}
}
In my GameScene I also have: 在我的GameScene中,我还有:
let progressBar = IMProgressBar(emptyImageName: nil,filledImageName: "health")
progressBar.position = CGPoint(x: self.frame.midX, y: self.frame.height / 3)
self.addChild(progressBar)
You can implement a progress bar using two sprite nodes, where one node is the bar and the other is the background. 您可以使用两个Sprite节点实现进度条,其中一个节点是进度条,另一个是背景。
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. 接下来,将条形图的zPosition
设置为高于背景的值,这样条形图将出现在背景之上。 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. 通过将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)
Finally, set the progress amount by scaling the bar in the x direction by 最后,通过在x方向上按比例缩放条来设置进度量
bar.xScale = value
where value
is a value between 0 and 1, inclusive. 其中value
是介于0和1之间(含0和1)的值。
Here's the full implementation as a subclass of SKNode
: 这是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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.