How To Make a Breakout Game with SpriteKit and Swift: Part 2

Learn how to make a breakout game for iOS with Sprite Kit and Swift via a fun hands-on tutorial. By Michael Briscoe.

Leave a rating/review
Save for later
Share
You are currently viewing page 3 of 3 of this article. Click here to view the first page.

Finishing Touches

Now that Bamboo Breakout is complete, let's kick it up a notch by adding a little juice! You'll do this by adding some sound effects whenever the ball makes contact, and when the blocks are broken. You'll also add a quick blast of music when the game is over. Finally, you'll add a particle emitter to the ball, so that it leaves a trail as it bounces around the screen!

Adding sound effects

To save time the project has the various sound files already imported. To start, make sure that GameScene.swift is open, then add the following constants to the top of the class, just after the gameWon variable:

let blipSound = SKAction.playSoundFileNamed("pongblip", waitForCompletion: false)
let blipPaddleSound = SKAction.playSoundFileNamed("paddleBlip", waitForCompletion: false)
let bambooBreakSound = SKAction.playSoundFileNamed("BambooBreak", waitForCompletion: false)
let gameWonSound = SKAction.playSoundFileNamed("game-won", waitForCompletion: false)
let gameOverSound = SKAction.playSoundFileNamed("game-over", waitForCompletion: false)

You define a series of SKAction constants, each of which will load and play a sound file. Because you define these actions before you need them, they are preloaded into memory, which prevents the game from stalling when you play the sounds for the first time.

Next, update the line that sets the ball's contactTestBitMask within the didMove(to:) method, to the following:

ball.physicsBody!.contactTestBitMask = BottomCategory | BlockCategory | BorderCategory | PaddleCategory

Nothing new here, you're just adding the BorderCategory and PaddleCategory to the ball's contactTestBitMask so that you can detect contact with the borders of the screen, and when the ball makes contact with the paddle.

Let's edit didBegin(_:) to include the sound effects by adding the following lines right after the if/else statement where you set up firstBody and secondBody accordingly:

// 1
if firstBody.categoryBitMask == BallCategory && secondBody.categoryBitMask == BorderCategory {
  run(blipSound)
}
      
// 2
if firstBody.categoryBitMask == BallCategory && secondBody.categoryBitMask == PaddleCategory {
  run(blipPaddleSound)
}

This code checks for two new collisions:

  1. React to ball bouncing off screen borders by playing blipSound.
  2. React to paddle contact by playing blipPaddleSound.

Of course you want a satisfying crunching sound when the ball breaks the blocks, so add this line to the top of breakBlock(node:):

run(bambooBreakSound)

Lastly, at the top of the class insert the following line within the didSet property observer for the gameWon variable:

run(gameWon ? gameWonSound : gameOverSound)

One more thing...

Now let's add a particle system to the ball, so that it leaves a flaming trail as it bounces around!

Add this code to didMove(to:):

// 1
let trailNode = SKNode()
trailNode.zPosition = 1
addChild(trailNode)
// 2
let trail = SKEmitterNode(fileNamed: "BallTrail")!
// 3
trail.targetNode = trailNode
// 4
ball.addChild(trail)

Let's review this section by section:

  1. Create an SKNode to serve as the targetNode for the particle system.
  2. Create an SKEmitterNode from the BallTrail.sks file.
  3. Set the targetNode to the trailNode. This anchors the particles so that they leave a trail, otherwise they would follow the ball.
  4. Attach the SKEmitterNode to the ball by adding it as a child node.

That's it - you're all done! Build and run to see how much more polished your game feels with a little juice:

Flaming particle ball

Where To Go From Here?

You can download the final project for the Sprite Kit Breakout Game that you’ve made in this tutorial.

This is a simple implementation of Breakout. But now that you have this working, there’s a lot more you can do. You could add scoring, or you could extend this code to give the blocks hit points, have different types of blocks, and make the ball have to hit some of them (or all of them) a number of times before they are destroyed. You could add blocks which drop bonuses or power-ups, let the paddle shoot lasers toward the blocks, whatever you dream up!

If you want to learn more about Sprite Kit, you should check out our book 2D iOS & tvOS Games by Tutorials:

In this book we'll teach you everything you need to know to make great games for iOS & tvOS - from physics, to tile maps, to particle systems, and even how to make your games "juicy" with polish and special effects.

I hope you enjoyed this tutorial, and if you have any questions or comments, please join the forum discussion below!

Michael Briscoe

Contributors

Michael Briscoe

Author

Over 300 content creators. Join our team.