1

Create a SpriteKit Game Project

11:21FreeDone

Lay Out the Game UI

8:54FreeDone
3

Define the Game Piece Model

13:16FreeDone
4

Create the Level Model

5:47FreeDone
5

Draw the Rune Sprites

6:02FreeDone
6

Detecting Taps on Runes

5:27ProsDone
7

Determine Swipe Direction

6:18ProsDone
8

Add Physics to Shatter Runes

14:00ProsDone
9

Build Out the UI Text

12:24ProsDone
10

Keeping Score

8:41ProsDone
11

Displaying Score Feedback

8:18ProsDone

Lay Out the Game UI

Published by Chris Slowik

Episode Notes

Extra tips from the author

Making Static UI Panels

Many games have some form of static UI element, in the form of top and bottom frames, or some kind of HUD. To build something like that is usually a combination of SpriteKit and UIKit elements - our game will be no different. In this episode we're going to start laying out the SpriteKit elements. All the UIKit stuff will sit on top of the drawn sprites so this works perfectly.

Start by moving all your sprite declarations to the top of the game scene class so they are instance level variables to be accessed throughout. We'll be making some separate functions for animation so this makes sense. Add a couple sprites as well, called topPanel and bottomPanel.

let topPanel = SKSpriteNode(imageNamed: "topPanel") 
let bottomPanel = SKSpriteNode(imageNamed: "bottomPanel")

The top and bottom panels will be positioned very much like how we positioned the sides - the anchor point will be aligned with the edge we want to be flush with the scene edge, and then we align that with the scene. We'll also set the zPosition to be 100 so that they get drawn above every other sprite we'll draw. Add them to the scene and you'll be able to see the UI in position.

topPanel.anchorPoint = CGPoint(x: 0.5, y: 1.0) 
bottomPanel.anchorPoint = CGPoint(x: 0.5, y: 0.0) 
topPanel.position = CGPoint(x: 0.0, y: size.height / 2) 
bottomPanel.position = CGPoint(x: 0.0, y: -size.height / 2) 
topPanel.zPosition = 100 
bottomPanel.zPosition = 100 
addChild(topPanel) 
addChild(bottomPanel)

Animating UI Elements

Let's add some style to the UI reveal. Start by changing the initial positions of the top and bottom panels so they rest just off the screen.

topPanel.position = CGPoint(x: 0.0, y: size.height / 2 + topPanel.size.height) 
bottomPanel.position = CGPoint(x: 0.0, y: -size.height / 2 - bottomPanel.size.height)

Now you can create a new section under the init for animation. Create a new function called animateUI_In, with no parameters and no return. Within this function, we'll create two SKAction variables. These will be run by the top and bottom panels. You can think of an SKAction in this case as similar to a CAAnimation - its an animation instruction. However, an SKAction can do a lot of different things - including playing a sound.

// Mark: - Animation 
func animateUI_in() { 
  let drop = SKAction.moveTo(y: size.height / 2, duration: 0.3) 
  drop.timingMode = .easeOut 
  topPanel.run(drop) 
  let rise = SKAction.moveTo(y: -size.height / 2, duration: 0.3) 
  rise.timingMode = .easeOut 
  bottomPanel.run(rise) 
}

The game UI also has a wooden level placard in the center of the top panel. This will have the level number written on it later with a UILabel. Let's add the wooden part now, as a separate sprite. That way, we can animate that as well to add more life to the top panel movement. Games really benefit from some extra exuberant motion! Before adding the animation lines, set up the levelPlacard sprite in the init function.

//MARK: - Properites
...
let levelPlacard = SKSpriteNode(imageNamed: "levelPlacard")

...

    // in the init
    levelPlacard.position = CGPoint(x: 6.0, y: -topPanel.size.height / 2) 
    levelPlacard.setScale(0.65) 
    topPanel.addChild(levelPlacard)

Now, we'll use an SKAction.sequence to run multiple actions in sequence. This will create the appearance of a bounce-back effect. Add these lines to the UI animation function:

let pop = SKAction.sequence([
  SKAction.wait(forDuration: 0.2),
  SKAction.scale(to: 1.1, duration: 0.2), 
  SKAction.scale(to: 1.0, duration: 0.3)
]) 
pop.timingMode = .easeOut 
levelPlacard.run(pop)

Build and run the app now, and you'll see the wooden piece pop into view as the panel slides in.. Awesome!

Episode Topics: