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

Update 9/22/16: This tutorial has been updated for Xcode 8 and Swift 3 by Michael Briscoe. Original post by Tutorial Team member Barbara Reichart.

Sprite Kit is Apple’s game development framework for iOS and OS X. Not only does it come with some great graphics capabilities, but it also includes an easy to use physics engine. Best of all, you do all the work using the tools you are familiar with: Swift, Xcode and Interface Builder!

There’s a lot you can do with Sprite Kit, and a great way to start learning about how it works is to create a simple game.

In this 2-part tutorial series, you are going to learn how to create a Breakout game using Sprite Kit, complete with collision detection, ball bouncing using physics effects, dragging the paddle via touches, and game states.

If you are new to Sprite Kit, you should go through the Sprite Kit Swift Tutorial for Beginners before proceeding with this tutorial.

Getting Started

Be sure to download the starter project for this tutorial. This project was created using the standard Xcode game template. The assets and state classes, have already been imported to save a bit of time. You’ll learn more about game states as you go along.

Go ahead and take a moment to familiarize yourself with the project. Build and run, and you’ll see a gray screen in landscape mode.

Introducing the Sprite Kit Visual Editor

Let’s start by configuring the scene file. To do that, open the GameScene.sks file. This is a visual editor already linked to your Sprite Kit Scene and every element dropped in there will be accessible in your game and from GameScene.swift.

First, you will have to resize the scene so it fits your targeted screen for this tutorial: an iPhone 6 screen. You can do that in the Scene section of the Attributes inspector on the top right corner of the Xcode window. If you don’t see the Attributes inspector, you can access it via View/Utilities/Show Attributes Inspector. Set the scene’s size to 568×320 as shown in the screenshot below.

Now to the game’s background. As shown in the screenshot below, drag a Color Sprite from the Object Library panel on the bottom right corner of the Xcode window. If you don’t see the Object Library panel, select View/Utilities/Show Object Library from the menubar.

Using the Attributes inspector, change the Position to 284,160 and set it’s Texture to be bg.

You can now build and run to see your game display it’s background.

Once you have a nice clean landscape scene with a background, it is time to add the ball! Still in GameScene.sks, drag a new Color Sprite into the scene. Then, set it’s Name to ball, it’s Texture to ball, and it’s Position to 284,220. Also set it’s Z Position to 2 to ensure that the ball appears over the background.

Build and run and you’ll see your ball appear on the screen:

However, it doesn’t move yet. That is because you need to add some physics to it.

Physics

In Sprite Kit you work in two environments: the graphical world that you see on the screen and the physics world, which determines how objects move and interact.

The first thing you need to do when using Sprite Kit physics is to change the world according to the needs of your game. The world object is the main object in Sprite Kit that manages all of the objects and the physics simulation. It also sets up the gravity that works on physics bodies added to it. The default gravity is -9.81 thus similar to that of the earth. So, as soon as you add a body it would “fall down”.

Once you have configured the world object, you can add things to it that interact according to the principles of physics. For this the most usual way is to create a sprite (graphics) and set its physics body. The properties of the body and the world determine how it moves.

Bodies can be dynamic objects (balls, ninja stars, birds, …) that move and are influenced by physical forces, or they can be static objects (platforms, walls, …) that are not influenced by those forces. When creating a body you can set a ton of different properties like shape, density, friction and many more. Those properties heavily influence how the body behaves within the world.

When defining a body, you might wonder about the units of their size and density. Internally Sprite Kit uses the metric system (SI units). However within your game you usually do not need to worry about actual forces and mass, as long as you use consistent values.

Once you’ve added all of the bodies to your world, Sprite Kit can take over and do the simulation.

To set up your first physics body, select the ball node you just added and scroll down the Attributes inspector until you reach the Physics Definition section. Select Body Type > Bounding Circle and set the newly appeared properties to the following:

1. Uncheck Allows Rotation
2. Set the Friction to 0
3. Set the Restitution to 1
4. Set the linear Damping to 0
5. Set the Angular Damping to 0

Adding physics to the ball

Adding physics to the ball

Here you’ve created a volume-based physics body with the form of a circle that has exactly the same size as the ball sprite. This physics body is affected by forces or impulses, and collisions with other bodies.

As for it’s properties:

1. Allows Rotation does exactly what the name implies. It either allows rotation of the body or not. Here you do not want the ball to rotate.
2. Friction is also quite clear – it simply removes all friction.
3. Restitution refers to the bounciness of an object. You set the restitution to 1, meaning that when the ball collides with an object the collision will be perfectly elastic. In plain English, this means that the ball will bounce back with equal force to the impact.
4. Linear Damping simulates fluid or air friction by reducing the body’s linear velocity. In the Breakout game the ball should not be slowed down when moving. So, you set the damping to 0.
5. Angular Damping is the same as Linear Damping but for the angular velocity. Setting this is optional as you don’t allow rotation for the ball.

Build and run. If you’re quick enough you should see the ball just fall through the scene and disappear at the bottom of the screen.

Two reasons for this: first, the default gravity of a scene simulates that of the earth – 0 along the x-axis and -9.8 along the y-axis. Second, your scene’s physics world has no boundaries that would act as a cage enclosing the ball. Let’s start with that!