Create a HUD

How to implement a space shooter with SpriteKit and SWIFT - Part 3

Adding a HUD with SpriteKit and SWIFT

Lite Version

Full Version

Tutorial Overview: How to implement a space shooter with SpriteKit and SWIFT

• Part 1: Initial project setup, sprite creation and movement using SKAction and SKConstraint
• Part 2: Adding enemies, bullets and shooting with SKAction and SKConstraint
• Part 3: Adding a HUD with SKLabelNode and SKSpriteNode
• Part 4: Adding basic game logic and collision detection
• Part 5: Adding particles and sound
• Part 6: GameCenter integration
• Part 7: iAd integration
• Part 8: In-App Purchases

Add the HUD:

I’ll add a simple HUD which shows the score, the remaining lifes and a pause button. As a starting point you can download the code from tutorial part 2 here.

First of all let’s fix a bug in the sample code of my last post. Open GameViewController.swift and move the code from viewDidLoad to viewDidAppear. This is necessary because the orientation change to landscape might not be completed. In this case width and height are inverted, if we determine them in viewDidLoad:

override func viewDidLoad() {
  super.viewDidLoad()
}

override func viewDidAppear(animated: Bool) {
  super.viewDidAppear(animated)

  // Detect the screensize
  var sizeRect = UIScreen.mainScreen().applicationFrame
  var width = sizeRect.size.width * UIScreen.mainScreen().scale
  var height = sizeRect.size.height * UIScreen.mainScreen().scale

  // Scene should be shown in fullscreen mode
  let scene = GameScene(size: CGSizeMake(width, height))

  // Configure the view.
  let skView = self.view as SKView
  skView.showsFPS = true
  skView.showsNodeCount = true

  /* Sprite Kit applies additional optimizations to improve rendering performance */
  skView.ignoresSiblingOrder = true
  
  /* Set the scale mode to scale to fit the window */
  scene.scaleMode = .AspectFill
  skView.presentScene(scene)
}

Now let’s create the HUD:

It contains 3 different elements :

• Remaining lifes: Must be accessible outside of the createHUD method to enable extra life or life lost events. Stored in a global array of SKSpriteNodes.

• Pause button: A SKLabelNode which is placed in a transparent SKSpriteNode to increase the touchable area.

• Score: Must be accessible outside of the createHUD method. Stored in a global SKLabelNode property.

To access the HUD elements add these global properties to GameScene.swift:

  /// HUD Global properties
  var lifeNodes : [SKSpriteNode] = []
  var remainingLifes = 3
  var scoreNode = SKLabelNode()
  var score = 0

To create a HUD add this method to GameScene.swift:

func createHUD() {
  // Create a root node with black background to position and group the HUD elemets
  // HUD size is relative to the screen resolution to handle iPad and iPhone screens
  var hud = SKSpriteNode(color: UIColor.blackColor(), size: CGSizeMake(self.size.width, self.size.height*0.05))
  hud.anchorPoint=CGPointMake(0, 0)
  hud.position = CGPointMake(0, self.size.height-hud.size.height)
  self.addChild(hud)

  // Display the remaining lifes
  // Add icons to display the remaining lifes
  // Reuse the Spaceship image: Scale and position releative to the HUD size
  let lifeSize = CGSizeMake(hud.size.height-10, hud.size.height-10)
  for(var i = 0; i<self.remainingLifes; i++) {
    var tmpNode = SKSpriteNode(imageNamed: "Spaceship")
    lifeNodes.append(tmpNode)
    tmpNode.size = lifeSize
    tmpNode.position=CGPointMake(tmpNode.size.width * 1.3 * (1.0 + CGFloat(i)), (hud.size.height-5)/2)
    hud.addChild(tmpNode)
  }

  // Pause button container and label
  // Needed to increase the touchable area
  // Names will be used to identify these elements in the touch handler
  var pauseContainer = SKSpriteNode()
  pauseContainer.position = CGPointMake(hud.size.width/1.5, 1)
  pauseContainer.size = CGSizeMake(hud.size.height*3, hud.size.height*2)
  pauseContainer.name = "PauseButtonContainer"
  hud.addChild(pauseContainer)

  var pauseButton = SKLabelNode()
  pauseButton.position = CGPointMake(hud.size.width/1.5, 1)
  pauseButton.text="I I"
  pauseButton.fontSize=hud.size.height
  pauseButton.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Center
  pauseButton.name="PauseButton"
  hud.addChild(pauseButton)

  // Display the current score
  self.score = 0
  self.scoreNode.position = CGPointMake(hud.size.width-hud.size.width * 0.1, 1)
  self.scoreNode.text = "0"
  self.scoreNode.fontSize = hud.size.height
  hud.addChild(self.scoreNode)
}

To add the HUD to the screen add this line at the end of the didMoveToView method of GameScene.swift:

// Add HUD
createHUD()

That’s all for today. In my next part I’ll add collision detection and a basic game logic for life lost, game over, pause, score behavior. You can download the code from GitHub: Part 3 or the latest version here. You can also download my prototyping App for this tutorial series:

Lite Version

Full Version

Cheers,
Stefan