Adding a HUD with SpriteKit and SWIFT: How to implement a space shooter with SpriteKit and SWIFT – Part 3
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:
- 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.
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 lines at the end of the didMoveToView method of GameScene.swift:
// Add HUD
createHUD()
Here we are:
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 also download my prototyping App for this tutorial series:
Cheers,
Stefan
Stefan