How To Create A Breakout Game Using SpriteKit

An-Ever-Bouncing Ball

Once you have a nice clean scene in landscape mode, it is time to play around with the physics of SpriteKit. Open MyScene.m and add the following line of code to the end of initWithSize: (right after the line adding the background to the scene):

    self.physicsWorld.gravity = CGVectorMake(0.0f, 0.0f);

The above changes the gravity of the game world, with one line of code. Don’t let this kind of power go to your head ;). The default gravity in SpriteKit is 0 along the x-Axis and -9.8 along the y-Axis simulating that of the earth. However, for your Breakout game you do not want any gravity. So, you just set the gravity to zero along both axes.

Next you should create an invisible barrier around the screen. This will effectively cage the ball on screen, ensuring that it cannot escape.

No escape for the ball.

No escape for the ball.

To do this, add the following code to the end of initWithSize: (right after the last line you added) in MyScene.m:

    // 1 Create a physics body that borders the screen
    SKPhysicsBody* borderBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
    // 2 Set physicsBody of scene to borderBody
    self.physicsBody = borderBody;
    // 3 Set the friction of that physicsBody to 0
    self.physicsBody.friction = 0.0f;

1. You create an SKPhysicsBody. SKPhysicsBodies are used to add physics simulation to a node. In this case, you create an edge-based body which does not have mass or volume, and is unaffected by forces or impulses.
2. You can set a physics body for every node. Here, you attach it to the scene. Note: The coordinates of the SKPhysicsBody are relative to the position of the node.
3. Set the friction to 0.0f so that the ball will not be slowed down when colliding with the border barrier. Instead, you want to have a perfect reflection, where the ball leaves along the same angle that it hit the barrier.

Perfect reflection

Perfect reflection

At this point you have this amazing cage, but you cannot see its effects. To actually see how the cage works, you need to add the ball. Go ahead and add the following lines of code to the end of initWithSize: (right after the previous code):

    // 1
    SKSpriteNode* ball = [SKSpriteNode spriteNodeWithImageNamed: @"ball.png"];
    ball.name = ballCategoryName;
    ball.position = CGPointMake(self.frame.size.width/3, self.frame.size.height/3);
    [self addChild:ball];
    
    // 2
    ball.physicsBody = [SKPhysicsBody bodyWithCircleOfRadius:ball.frame.size.width/2];
    // 3
    ball.physicsBody.friction = 0.0f;
    // 4
    ball.physicsBody.restitution = 1.0f;
    // 5
    ball.physicsBody.linearDamping = 0.0f;
    // 6
    ball.physicsBody.allowsRotation = NO;

1. No surprises here. You simply create a sprite, name it for later reference, set its position relative to the scene, and add it to the scene.
2. You create a volume-based body for the ball. In contrast to the edge-based body you created to form the barrier around the screen, this physics body is affected by forces or impulses, and collisions with other bodies. Here you create a physics body with the form of a circle that has exactly the same size as the ball sprite.
3. Next, you set up a few properties for the physics body. You’ve already worked with friction, and it should be quite clear what this line does – it simply removes all friction.
4. Restitution refers to the bounciness of an object. You set the restitution to 1.0f, 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.
5. LinearDamping 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 restitution to 0.0f.
6. AllowsRotation does exactly what the name implies. It either allows rotation of the body or not. Here you do not want the ball to rotate.

Note: Usually, it’s best to have the physics body be fairly similar to what the player sees. For the ball it’s very easy to have a perfect match. However, with more complex shapes you’ll have to get a bit more creative. This is where you’ll need to be careful since very complex bodies can exact a high toll on performance.

It’s time to get the ball rolling (bouncing, actually). Add the following code right after the previous lines:

    [ball.physicsBody applyImpulse:CGVectorMake(10.0f, -10.0f)];

This new code applies an impulse (think of it like the propulsion from a jet pack thruster) to the ball to get it moving in a particular direction (in this case, diagonally down to the right). Once the ball is set in motion, it will simply bounce around the screen because of the barrier around the screen!

Now it’s time to try it out! When you compile and run the project, you should see a ball continuously bouncing around the screen – cool!

They see me bouncin’, they hatin’ :D

They see me bouncin’, they hatin’ :D

Adding the Paddle

It wouldn’t be a Breakout game without a paddle, now would it?

Construct the paddle (and its companion physics body) in initWithSize: in MyScene.m by adding this code just after you create and configure the ball:

     SKSpriteNode* paddle = [[SKSpriteNode alloc] initWithImageNamed: @"paddle.png"];
     paddle.name = paddleCategoryName;
     paddle.position = CGPointMake(CGRectGetMidX(self.frame), paddle.frame.size.height * 0.6f);
     [self addChild:paddle];
     paddle.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:paddle.frame.size];
     paddle.physicsBody.restitution = 0.1f;
     paddle.physicsBody.friction = 0.4f;
     // make physicsBody static
     paddle.physicsBody.dynamic = NO;

Most of the code is similar to the code used when creating the ball. However, this time you use a rectangle to form the physics body as it more closely matches what is visible on screen.

Here you need to make sure that the paddle is static. This ensures that the paddle does not react to forces and impulses. You will soon see why this is important.

If you build and run, you’ll see your paddle in the scene, and the ball will bounce off it:

The most boring game ever :/

The most boring game ever :/

However, this isn’t much fun, because you can’t move the paddle yet!