Create HUD in Sprite Kit that remains static on screen

Question

I'm trying to create a static HUD that stays at the top of the screen throughout the game in a jump game from this tutorial. I'm still new to Swift, so maybe it's a convention I don't see easily:

http://www.raywenderlich.com/87232/make-game-like-mega-jump-sprite-kit-swift-part-2

In the tutorial, he puts the HUD in the override init(size: CGSize) function:

 required init?(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
  }

 override init(size: CGSize) {
      super.init(size: size)
    ...

   // Build the HUD

   // HUD
   hudNode = SKNode()
   hudNode.zPosition = 1000
   addChild(hudNode)


   // Coins
   // 1
   let coin = SKSpriteNode(imageNamed: "powerup05_1")
   coin.position = CGPoint(x: 300, y: self.size.height-100)
   coin.zPosition = 1000
   hudNode.addChild(coin)

  // 2
  lblCoins = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
  lblCoins.fontSize = 70
  lblCoins.fontColor = SKColor.whiteColor()
  lblCoins.position = CGPoint(x: 375, y: self.size.height-100)
  lblCoins.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Left
  lblCoins.zPosition = 1000

  // 3
  lblCoins.text = String(format: "X %d", GameState.sharedInstance.coins)
  hudNode.addChild(lblCoins)

  // Score
  // 4
  lblScore = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
  lblScore.fontSize = 70
  lblScore.fontColor = SKColor.whiteColor()
  lblScore.position = CGPoint(x: self.size.width-325, y: self.size.height-100)
  lblScore.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Right
  lblScore.zPosition = 1000

  // 5
  lblScore.text = "0"
  hudNode.addChild(lblScore)
 }

However, if I try to use this function in my game I get an error:

Argument labels '(fileNamed:)' do not match any available overloads

In this function:

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
   switch gameState.currentState {
   case is WaitingForTap:
   gameState.enterState(WaitingForBomb)
   // Switch to playing state
   self.runAction(SKAction.waitForDuration(2.0),
    completion:{
      self.gameState.enterState(Playing)
  })

  case is GameOver:
  // Error! Argument labels '(fileNamed:)' do not match any available overloads
   let newScene = GameScene(fileNamed:"GameScene")
   newScene!.scaleMode = .AspectFill
   let reveal = SKTransition.flipHorizontalWithDuration(0.5)
   self.view?.presentScene(newScene!, transition: reveal)

   default:
   break
  }
}

So I've resorted to putting it in the override func didMoveToView(view: SKView), but the HUD moves once the player jumps up:

override func didMoveToView(view: SKView) {
 ....
// Build the HUD

// HUD
 hudNode = SKNode()
 hudNode.zPosition = 1000
 addChild(hudNode)


// Coins
// 1
 let coin = SKSpriteNode(imageNamed: "powerup05_1")
 coin.position = CGPoint(x: 300, y: self.size.height-100)
 coin.zPosition = 1000
 hudNode.addChild(coin)

// 2
 lblCoins = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
 lblCoins.fontSize = 70
 lblCoins.fontColor = SKColor.whiteColor()
 lblCoins.position = CGPoint(x: 375, y: self.size.height-100)
 lblCoins.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Left
 lblCoins.zPosition = 1000

 // 3
 lblCoins.text = String(format: "X %d", GameState.sharedInstance.coins)
 hudNode.addChild(lblCoins)

 // Score
 // 4
 lblScore = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
 lblScore.fontSize = 70
 lblScore.fontColor = SKColor.whiteColor()
 lblScore.position = CGPoint(x: self.size.width-325, y: self.size.height-100)
 lblScore.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Right
 lblScore.zPosition = 1000

 // 5
 lblScore.text = "0"
 hudNode.addChild(lblScore)
}

Is your game scene subclassing SKScene? GameScene: SKScene {...} — Stefan, Nov 07 '15 at 15:03
Yes. My code looks like this: `class GameScene: SKScene, SKPhysicsContactDelegate {` — Paul, Nov 07 '15 at 17:39
Is it possible to upload the code to github? I can't find an error in the part you have posted here — Stefan, Nov 08 '15 at 19:03
How are you doing camera stuff for this game? Are you making your own virtual camera or using the new sprite kit features? — J.Doe, Nov 08 '15 at 20:24
@Stefan I've uploaded a private repo to BitBucket. If you send me an email address I can invite you to the repo. — Paul, Nov 08 '15 at 20:48
@J.Doe I'm pretty sure it's using new Sprite Kit features. I didn't write the game, I'm just trying to augment it. If you can send me an email address I can invite you to the private repo so you can take a look. — Paul, Nov 08 '15 at 20:50

WangYudong · Accepted Answer · 2018-02-05T02:30:37.607

8

Adding your hudNode to the cameraNode makes the HUD move together with the camera so that it will look static on screen. That is to change addChild(hudNode) to cameraNode.addChild(hudNode).

Then use convert(_:to:) to change the point from the current scene coordinate to the cameraNode coordinate. That will set HUD's position in the new coordinate with just a little modification. For instance, change coin.position like this:

coin.position = convert(CGPoint(x: 300, y: self.size.height-100), to: cameraNode)

Do the same thing to the other HUD:

lblCoins.position = convert(CGPoint(x: 375, y: self.size.height-100), to: cameraNode)
lblScore.position = convert(CGPoint(x: self.size.width-325, y: self.size.height-100), to: cameraNode)

The result after those 4 lines modification:

edited Feb 05 '18 at 02:30

answered Nov 09 '15 at 04:00

WangYudong

4,335
4
32
54

Wow. I would have never figured that out. Swift is still really new to me. Thanks for your help! – Paul Nov 09 '15 at 17:02
Using the addChild() function is indeed better than setting hudNode.position = camera.position. – jmcmahon443 Nov 10 '15 at 16:24
@jmcmahon443 Yeah, but you were close! – Paul Nov 11 '15 at 04:57
@WangYudong Sorry, I didn't award your bounty. i will have another bounty for this question in a few days: http://stackoverflow.com/questions/33663151/collect-coins-and-add-to-score-label-in-sprite-kit – Paul Nov 12 '15 at 04:45

Create HUD in Sprite Kit that remains static on screen

1 Answers1