2

I want to add a Health Bar (a progressing Bar) in my Scene.

It's a rectangle bar filled with a color, on the upper left in the Scene, and every second the bar decreases (the filled color). After 2 Objects (SKSpriteNode's) hit each other, it gives you + 5 seconds time.

Thanks to LearnCocos2D and CloakedEddy, I know that I can make the Bar by using simply SKSpriteNode with Color or SKCropNode instead of SKShapeNode.

How should I implement it now at best to decrease itself every second smoothly?

My Code:

....
var progressValue = 200
....

HealthBar = SKSpriteNode(color:SKColor .yellowColor(), size: CGSize(width: progressValue, height: 30))
HealthBar.position = CGPointMake(self.frame.size.width / 3, self.frame.size.height / 1.05)
HealthBar.anchorPoint = CGPointMake(0.0, 0.5)
HealthBar.zPosition = 4
self.addChild(HealthBar)
  • 3
    You can use SKSpriteNode with color, then change its size or scale properties to make it larger/smaller. Change anchorPoint to (0, 0.5) if you want the resizing to be aligned to the left side of the bar (ie bar extends to the right). – CodeSmile Jan 29 '15 at 13:17
  • 2
    I would not opt for SKShapeNode, as it seems a bit overkill in your case. I suggest looking at [my answer to a somewhat similar question](http://stackoverflow.com/questions/23563079/how-to-create-progress-bar-in-sprite-kit/23912604#23912604) which illustrates an approach using [SKCropNode](https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKCropNode_Ref/Reference/Reference.html). – CloakedEddy Jan 29 '15 at 13:24
  • Thanks both of you! I updated my post with the code you suggested. How should I let the bar decrease itself now every second in the Update method? –  Jan 31 '15 at 11:59
  • I tried it also with `SKCropNode` like CloakedEddy suggested, but I still don't know how to implement the Bar decreasing every second. Also, I think the `SKSpriteNode with color` Method is better in my case. –  Feb 01 '15 at 18:39
  • I would stay away from crop node and shape node. Both can be expensive, especially if you have multiple health bars. Just resize your health bar as LearnCocos was saying, and use the centerRect property to stretch your image correctly if needed. – Epic Byte Feb 03 '15 at 14:54
  • Yes, I used it like LearnCocos2D mentioned. To resize my Healthbar, I want it to change its width smoothly, since the bar decreases every second, and thats were I need help. –  Feb 03 '15 at 16:26

1 Answers1

0

What you could do is have a SKSpriteNode be the health bar. Then you have a SKSpriteNode as a frame over the first node. You have an action SKAction.repeatForever(SKAction.sequence([SKAction.moveByX(moveAmount, y: 0, duration: 0.5), SKAction.waitForDuration(0.5)])) and make the health bar (not the frame) run that action. What that will do is move the health bar off the screen, making it look like its going down.

About the collision problem, look at this tutorial. If that doesn't help, maybe you could find others. I want to help with this one, but collision detection is fairly in-depth even with SpriteKit. I hope this helped. Good Luck!

Jerfov2
  • 5,264
  • 5
  • 30
  • 52