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.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
How To Make a Breakout Game with SpriteKit and Swift: Part 2
25 mins
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:
- React to ball bouncing off screen borders by playing
blipSound
. - 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:
- Create an
SKNode
to serve as thetargetNode
for the particle system. - Create an
SKEmitterNode
from the BallTrail.sks file. - Set the
targetNode
to thetrailNode
. This anchors the particles so that they leave a trail, otherwise they would follow the ball. - 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:
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!